/* ======================================================
   UPERX 
====================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ================= RESET GERAL ================= */
/* Zera margens/paddings padrão do navegador e ajusta o box-sizing
   de todos os elementos da página. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ================= ROLAGEM SUAVE ================= */
/* Faz a página rolar suavemente ao clicar em links âncora (ex: #contato). */
html {
    scroll-behavior: smooth;
}

/* ================= FUNDO E TEXTO BASE DO SITE ================= */
/* Cor de fundo geral do site, fonte padrão e cor do texto padrão. */
body {
    font-family: 'Inter', sans-serif;
    background: #061325;
    color: #ffffff;
    overflow-x: hidden;
}

/* ======================================================
   Paleta de Cores
====================================================== */
/* ================= VARIÁVEIS DE COR (PALETA DO SITE) ================= */
/* Aqui ficam TODAS as cores principais do site. Mudando essas variáveis,
   os botões, brilhos, bordas e textos em destaque mudam automaticamente
   em todo o site, sem precisar editar cada elemento. */
:root{
    --primary:#36a3bb;
    --primary-light:#22E0FF;
    --secondary:#0099CC;

    --dark:#051222;
    --dark2:#071930;
    --dark3:#0E2545;

    --text:#ffffff;
    --text2:#B8D0E8;

    --border:rgba(255,255,255,.08);
    --glass:rgba(255,255,255,.05);
    --shadow:0 20px 60px rgba(0,0,0,.4);
    --radius:20px;
}

/* ================= CONTAINER PADRÃO ================= */
/* Largura máxima e centralização usada em quase todas as seções do site.
   AJUSTE 2/2 (item 2 do pedido do cliente — ainda sobrava espaço nas
   laterais): na primeira versão eu tinha deixado um "teto" de 1600px
   (max-width) achando que era só para textos não ficarem esticados
   demais em monitores enormes. Só que em qualquer tela MAIOR que
   1600px (o que inclui monitores comuns de 1920px, muito usados) esse
   teto voltava a criar a mesma sobra vazia nas laterais que você
   apontou — só que agora fixa em 1600px em vez de 1280px.
   AGORA: removi esse teto (max-width). O container ocupa 100% da
   largura da janela sempre, em QUALQUER resolução — não importa se
   você abre o navegador maximizado, em uma janela menor, ou em um
   monitor ultrawide: o conteúdo sempre se ajusta sozinho, sem sobras.
   O "padding" com clamp() continua ali só para o conteúdo não colar
   nas bordas da tela — essa margem cresce/encolhe suavemente com a
   largura da janela, mas nunca deixa um vão vazio de fundo como antes.
   IMPORTANTE: se no futuro precisar limitar a LARGURA DE LEITURA de
   um bloco de texto específico (não do site inteiro), crie uma classe
   nova (ex: ".container--narrow { max-width: 1280px; }") e aplique só
   naquele bloco — não mexa nesta regra geral, para não voltar a
   afetar o site inteiro. */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 90px);
}

/* ================= FUNDO DEGRADÊ GERAL DA PÁGINA ================= */
/* Camada de gradiente fixa atrás de todo o conteúdo (o "clima" azulado
   de fundo do site inteiro, visível através de todas as seções). */
.bg-gradient {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, #22e0ff33, transparent 35%),
        radial-gradient(circle at 80% 10%, #0099cc22, transparent 35%),
        radial-gradient(circle at 50% 90%, #22e0ff18, transparent 40%),
        linear-gradient(135deg, #061325, #08182e, #061325);
    z-index: -5;
}

/* ================= GRADE DE PONTINHOS DE FUNDO ================= */
/* Textura de pontinhos visível no fundo do site. */
.bg-grid {
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(34, 224, 255, 0.12) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -4;
}

/* ================= GLOW GERAL DE FUNDO (BOLHAS DESFOCADAS) ================= */
/* Controla o TAMANHO e a INTENSIDADE das bolhas de luz desfocadas que
   ficam flutuando atrás do conteúdo do site inteiro.
   -> Para diminuir o efeito: reduza "width"/"height" e/ou "blur".
   -> Para deixar mais sutil: reduza "opacity". */
.bg-glow {
    position: fixed;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .16;
    z-index: -3;
}

/* Posição e cor de cada bolha de glow individual */
.glow-1 {
    background: var(--primary-light);
    top: -300px;
    left: -200px;
    animation: glowMove1 16s infinite alternate;
}

.glow-2 {
    background: var(--secondary);
    bottom: -250px;
    right: -150px;
    animation: glowMove2 18s infinite alternate;
}

/* ================= ANIMAÇÃO DE MOVIMENTO DO GLOW ================= */
@keyframes glowMove1 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(180px, 80px); }
}

@keyframes glowMove2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-180px, -100px); }
}

/* ================= CABEÇALHO / MENU FIXO NO TOPO ================= */
/* Barra fixa no topo da página com o logo e o menu de navegação. */
.header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    transition: .4s;
    backdrop-filter: blur(18px);
    background: rgba(8,18,35,.45);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.header .container {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ================= LOGO ================= */
/* AJUSTE (pedido do cliente): a logo precisa se manter proporcional
   e nunca distorcer ao redimensionar/ampliar a janela do navegador.
   .logo recebe flex-shrink:0 para nunca ser espremida pelo header
   (que é flex), e a imagem usa clamp() + height:auto para escalar
   de forma fluida sem esticar/achatar em nenhuma largura de tela. */
.logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Moldura ao redor da logo — é nela que roda o efeito de luz do
   contorno (pseudo-elemento ::before logo abaixo). */
.logo-frame {
    position: relative;
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 14px;
    isolation: isolate;
}

.logo img {
    position: relative;
    z-index: 2;
    display: block;
    width: clamp(120px, 10vw, 170px);
    height: auto;
    max-width: 100%;
    /* Correção de transparência e bordas */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ================= EFEITO DE LUZ NO CONTORNO DA LOGO ================= */
/* Uma linha de luz ciano gira continuamente ao redor da moldura da
   logo (contorno fino), reforçando a identidade "tech" do site.
   Feito só com CSS: um anel em conic-gradient, "recortado" para
   sobrar apenas a borda fina, girando em loop. */
.logo-frame {
    overflow: hidden; /* necessário para o reflexo não vazar da moldura */
}

.logo-frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent,
        rgba(255,255,255,.55),
        var(--primary-light),
        transparent
    );
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 1;
    animation: logoShine 5s ease-in-out infinite;
}

@keyframes logoShine {
    0%   { left: -75%; }
    18%  { left: 130%; }
    100% { left: 130%; } /* fica "parado" fora da tela até reiniciar o ciclo */
}
/* ================= MENU DE NAVEGAÇÃO (LINKS DO TOPO) ================= */
.navbar ul {
    display: flex;
    gap: 45px;
    list-style: none;
}

.navbar a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: .35s;
}

/* Linha animada que aparece embaixo do link do menu ao passar o mouse */
.navbar a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--primary-light);
    transition: .4s;
}

.navbar a:hover {
    color: var(--primary-light);
}

.navbar a:hover::after {
    width: 100%;
}

/* ================= BOTÃO PRIMÁRIO (CTA principal, ex: "Contratar Agora") ================= */
/* Botão de destaque em degradê usado nas chamadas principais do site. */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 34px;
    border-radius: 60px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(34,224,255,.35);
    transition: .4s;
}

.btn-primary:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 60px rgba(34,224,255,.55);
}

/* Efeito de brilho passando por cima do botão ao passar o mouse */

.btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-25deg);
}

.btn-primary:hover::before {
    left: 150%;
    transition: 1.1s;
}

/* ================= BOTÃO SECUNDÁRIO (contorno/vidro) ================= */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 34px;
    border-radius: 60px;
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(15px);
    background: rgba(255,255,255,.04);
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    transition: .35s;
}

.btn-secondary:hover {
    background: rgba(255,255,255,.08);
    transform: translateY(-6px);
}

/* ================= SEÇÃO HERO (BANNER PRINCIPAL) ================= */
/* Estrutura geral da primeira seção do site (título grande + imagem). */
.hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}

.hero-container {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;
}

/* ================= SELO/BADGE PEQUENO DO HERO ================= */
.hero-badge {
    display: inline-flex;
    padding: 10px 20px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 40px;
    margin-bottom: 25px;
    font-size: 14px;
}

/* ================= TÍTULO PRINCIPAL DO HERO ================= */
.hero h1 {
    font-size: 68px;
    line-height: 1.05;
    font-weight: 800;
    margin-bottom: 30px;
}

/* Trecho do título em destaque com texto em degradê */
.hero h1 span {
    background: linear-gradient(90deg, var(--primary-light), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 19px;
    line-height: 1.9;
    color: var(--text2);
    max-width: 640px;
    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 60px;
}

/* ================= IMAGEM DO HERO (personagem/ilustração) ================= */
.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Animação de flutuação suave da imagem principal */
.hero-image img {
    width: 100%;
    max-width: 900px;
    animation: floating 6s ease-in-out infinite;
    filter: drop-shadow(0 30px 80px rgba(34,224,255,.35));
}

/* ================= BOLHAS DE GLOW ATRÁS DA IMAGEM DO HERO ================= */
/* Controla o TAMANHO dos círculos de luz desfocados atrás do personagem.
   -> Para diminuir: reduza "width"/"height" de cada círculo abaixo,
      e/ou reduza o "blur" e a "opacity" aqui em ".circle". */
.circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(45px);
}

.circle1 {
    width: 150px;
    height: 150px;
    background: var(--primary-light);
    top: 20%;
    left: 5%;
    opacity: .22;
}

.circle2 {
    width: 180px;
    height: 180px;
    background: var(--secondary);
    right: 0;
    bottom: 5%;
    opacity: .18;
}

.circle3 {
    width: 120px;
    height: 120px;
    background: var(--primary-light);
    top: 60%;
    left: 30%;
    opacity: .14;
}

/* ================= ANIMAÇÃO DE FLUTUAÇÃO DA IMAGEM ================= */
@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-18px); }
    100% { transform: translateY(0px); }
}

/* ================= TELA DE CARREGAMENTO (PRELOADER) ================= */
/* Tela exibida enquanto a página carrega, antes do site aparecer. */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark);
    transition: opacity .5s ease, visibility .5s ease;
}

#preloader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Círculo giratório de carregamento */
.loader {
    width: 52px;
    height: 52px;
    border: 4px solid rgba(255,255,255,.1);
    border-top-color: var(--primary-light);
    border-radius: 50%;
    animation: spin .9s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ================= BOTÕES DO CABEÇALHO (LOGIN/CONTRATAR NO TOPO) ================= */
.header-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-outline {
    padding: 14px 28px;
    border-radius: 60px;
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: .35s;
}

.btn-outline:hover {
    background: rgba(255,255,255,.08);
    border-color: var(--primary-light);
}

/* ================= BOTÃO DE MENU MOBILE (HAMBÚRGUER) ================= */
.menu-mobile {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.menu-mobile span {
    width: 26px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: .3s;
}

/* ================= MENU MOBILE ABERTO ================= */
/* Estilo do menu quando ele é expandido em telas pequenas. */
.navbar.active {
    display: block !important;
    position: fixed;
    top: 82px;
    left: 0;
    width: 100%;
    background: var(--dark2);
    padding: 30px;
    border-bottom: 1px solid var(--border);
}

.navbar.active ul {
    flex-direction: column;
    gap: 22px;
    text-align: center;
}

/* ======================================================
   AJUSTE: Redução do espaçamento entre seções
====================================================== */
/* ================= ESPAÇAMENTO PADRÃO ENTRE SEÇÕES ================= */
section {
    padding: 70px 0;
}

/* ================= SELO PEQUENO NO TOPO DE CADA SEÇÃO ================= */
/* Ex: "BACKUP EM NUVEM" acima dos títulos de seção. */
.section-tag {
    display: inline-block;
    padding: 8px 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--primary-light);
    margin-bottom: 20px;
}

/* ================= CABEÇALHO DE SEÇÃO (TÍTULO + PARÁGRAFO CENTRAL) ================= */
.section-header {
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}

.section-header h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.25;
}

.section-header p {
    color: var(--text2);
    font-size: 17px;
    line-height: 1.8;
}

/* ================== ÁREA DE TECNOLOGIAS (CARROSSEL DE LOGOS/ITENS) ================== */
.companies {
    padding: 50px 0;
    overflow: visible;
}

.title-small {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--text2);
    margin-bottom: 30px;
}

.companies-wrapper {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
    overflow: hidden;
    padding: 10px 0; /* Espaço interno para não cortar o efeito */
}

/* Faixas do carrossel que rolam automaticamente na horizontal */
.companies-track-1 {
    display: flex;
    gap: 25px; /* Mais espaço entre botões */
    width: max-content;
    animation: scrollLeft 32s linear infinite;
}

.companies-track-2 {
    display: flex;
    gap: 25px;
    width: max-content;
    animation: scrollLeft 40s linear infinite;
}

/* ================= ANIMAÇÃO DE ROLAGEM DO CARROSSEL ================= */
@keyframes scrollLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ======================================================
   AJUSTE: Botões maiores e efeito neon completo
====================================================== */
/* ================= ITEM INDIVIDUAL DO CARROSSEL (CADA "PÍLULA") ================= */
.tech-item {
    min-width: 220px; /* Largura aumentada */
    padding: 20px 30px; /* Altura aumentada */
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 16px;
    color: var(--text2);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    transition: all 0.4s ease;
    cursor: default;
    white-space: nowrap;
    position: relative;
}

/* Efeito neon ao passar o mouse sobre um item do carrossel */
.tech-item:hover {
    transform: scale(1.08);
    border-color: var(--primary-light);
    color: #ffffff;
    box-shadow: 0 0 8px var(--primary-light),
                0 0 15px rgba(34, 224, 255, 0.4),
                0 0 25px rgba(34, 224, 255, 0.2);
}

/* Pausa a rolagem do carrossel quando o mouse está em cima */
.companies-wrapper:hover .companies-track-1,
.companies-wrapper:hover .companies-track-2 {
    animation-play-state: paused;
}

/* AJUSTE: seção "sobre" com padding vertical reduzido — o padding
   genérico de 70px (regra "section") deixava muito vazio em cima
   e embaixo do boneco. */
/* ================= SEÇÃO "SOBRE" (TEXTO + IMAGEM DO PERSONAGEM) ================= */
.about {
    padding: 25px 0;
}

.about-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 15px;
    align-items: center;
}

.about-image {
    display: flex;
    justify-content: flex-end;
}

.about-image img {
    width: 40%;
    /* CORRIGIDO: box-shadow criava um retângulo visível ao redor
       de todo o canvas do PNG (mesmo nas áreas transparentes).
       drop-shadow segue apenas o contorno real do personagem. */
    filter: drop-shadow(0 20px 45px rgba(0,0,0,.45));
}

.about-content h2 {
    font-size: 36px;
    font-weight: 800;
    margin: 20px 0;
    line-height: 1.35;
}

.about-content p {
    color: var(--text2);
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 20px;
}

/* ================= GRADE DE CARDS DE SERVIÇOS ================= */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Card individual de serviço (ícone + título + texto + link) */
.service-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px 30px;
    transition: .4s;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: rgba(34,224,255,.4);
    box-shadow: var(--shadow);
}

.service-icon {
    font-size: 38px;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 22px;
    margin-bottom: 14px;
}

.service-card p {
    color: var(--text2);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.service-card a {
    color: var(--primary-light);
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.service-card a:hover {
    color: #fff;
}

/* ================= SEÇÃO DE PLANOS EM NUVEM (Cloud Core / Edge / Prime) ================= */
/* Grade com os 3 cards de planos mostrados na seção de armazenamento em nuvem. */
.cloud-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: center;
}

/* Card individual de plano */
.cloud-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 45px 35px;
    position: relative;
    transition: .4s;
}

.cloud-card:hover {
    transform: translateY(-10px);
}

/* Estilo especial do card em destaque (ex: "Cloud Edge / Mais Escolhido") */
.cloud-card.destaque {
    border-color: var(--primary-light);
    background: linear-gradient(180deg, rgba(34,224,255,.14), rgba(255,255,255,.03));
    transform: scale(1.05);
}

/* Selo "MAIS ESCOLHIDO" que aparece acima do card em destaque */
.cloud-card .badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    padding: 6px 18px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 700;
}

.cloud-card h3 {
    font-size: 24px;
    margin-bottom: 25px;
}

.cloud-card ul {
    list-style: none;
    margin-bottom: 30px;
}

.cloud-card li {
    color: var(--text2);
    padding: 8px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--border);
}

/* ================= BOTÃO "CONTRATAR" DENTRO DOS CARDS DE PLANO ================= */
.btn-card {
    display: block;
    text-align: center;
    padding: 14px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    transition: .35s;
}

.btn-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(34,224,255,.4);
}

/* ======================================================
   NOVA SEÇÃO DE BACKUP EM NUVEM (seguindo a imagem enviada
   pelo cliente): selo + título + texto de apresentação,
   4 cards de características e um único botão de CTA para
   o WhatsApp, no lugar dos 3 planos com preço.
   Os estilos antigos (.cloud-grid, .cloud-card, .btn-card)
   foram mantidos no arquivo, mas não são mais usados no HTML.
====================================================== */
.cloud-header {
    max-width: 760px;
}

/* Destaque em degradê ciano na parte final do título */
.cloud-highlight {
    background: linear-gradient(90deg, var(--primary-light), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Parágrafo de apresentação, com a primeira linha em negrito
   (igual ao "Não trabalhamos com pacotes prontos." da imagem) */
.cloud-lead {
    color: var(--text2);
    font-size: 16px;
    line-height: 1.85;
}

.cloud-lead strong {
    color: #fff;
    font-weight: 700;
}

/* Grade com os 4 cards de características (Diagnóstico, Backup
   Automatizado, Segurança, Recuperação Rápida) */
.cloud-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 45px;
}

.cloud-feature {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 26px;
    text-align: center;
    transition: .4s;
}

.cloud-feature:hover {
    transform: translateY(-8px);
    border-color: rgba(34,224,255,.35);
    box-shadow: var(--shadow);
}

.cloud-feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(34,224,255,.1);
    color: var(--primary-light);
    font-size: 24px;
}

.cloud-feature h3 {
    font-size: 19px;
    margin-bottom: 12px;
}

.cloud-feature p {
    color: var(--text2);
    font-size: 14px;
    line-height: 1.75;
}

/* Bloco final: botão único de CTA + aviso abaixo dele */
.cloud-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.cloud-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 40px;
    border-radius: 60px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 15px 45px rgba(34,224,255,.35);
    transition: .4s;
}

.cloud-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 55px rgba(34,224,255,.5);
}

.cloud-btn i {
    font-size: 18px;
}

.cloud-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text2);
    font-size: 14px;
}

.cloud-note i {
    color: var(--primary-light);
}

/* ================= RESPONSIVO: SEÇÃO DE BACKUP EM NUVEM ================= */
@media(max-width: 992px) {
    .cloud-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 600px) {
    .cloud-features {
        grid-template-columns: 1fr;
    }
    .cloud-btn {
        width: 100%;
        padding: 16px 28px;
    }
}

/* ======================================================
   NOVA SEÇÃO: ANTIVÍRUS EMPRESARIAL (parceria Kaspersky)
   O verde da Kaspersky é usado SOMENTE dentro de .antivirus,
   via variáveis locais (--av-green / --av-green-light), para
   não interferir na paleta azul/ciano do restante do site.
====================================================== */
.antivirus {
    --av-green: #1FCB6B;
    --av-green-light: #4CFFA0;
    --av-green-glow: rgba(31, 203, 107, .18);
    position: relative;
}

/* Selo "ANTIVÍRUS EMPRESARIAL" em tom verde, no padrão dos demais section-tag */
.av-tag {
    color: var(--av-green-light);
    border-color: rgba(31,203,107,.25);
    background: rgba(31,203,107,.06);
}

/* Grade principal: texto à esquerda, ilustração à direita */
.av-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 70px;
    align-items: center;
    margin-bottom: 70px;
}

.av-content h2 {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.25;
    margin: 20px 0 22px;
}

/* Trecho do título em destaque com degradê verde (Kaspersky) */
.av-highlight {
    background: linear-gradient(90deg, var(--av-green), var(--av-green-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Palavras-chave (Kaspersky / Uperx) destacadas em verde no texto */
.av-text-highlight {
    color: var(--av-green-light);
    font-weight: 700;
}

.av-content > p {
    color: var(--text2);
    font-size: 17px;
    line-height: 1.85;
    margin-bottom: 30px;
    max-width: 560px;
}

/* Linha com os 5 ícones de benefícios (Proteção em tempo real, etc.) */
.av-features {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 34px;
}

.av-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.av-feature i {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(31,203,107,.08);
    border: 1px solid rgba(31,203,107,.25);
    color: var(--av-green-light);
    font-size: 17px;
}

.av-feature span {
    font-size: 12.5px;
    color: var(--text2);
    line-height: 1.4;
}

/* Botão CTA "Solicitar uma análise gratuita" em verde Kaspersky */
.btn-kaspersky {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 30px;
    border-radius: 60px;
    background: linear-gradient(135deg, var(--av-green), #0E9E52);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 15px 40px rgba(31,203,107,.3);
    transition: .4s;
    margin-bottom: 28px;
}

.btn-kaspersky:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 55px rgba(31,203,107,.5);
}

/* Selo de parceiro oficial Kaspersky */
.av-partner {
    display: flex;
    align-items: center;
    gap: 14px;
}

.av-partner-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(31,203,107,.35);
    background: rgba(31,203,107,.08);
    color: var(--av-green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}

.av-partner strong {
    display: block;
    font-size: 14px;
}

.av-partner span {
    display: block;
    font-size: 11.5px;
    letter-spacing: .5px;
    color: var(--text2);
}

/* ===== Ilustração: ameaças (esquerda) > escudo (centro) > dispositivos (direita) ===== */
.av-visual {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}

.av-threats,
.av-devices {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.av-threat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Ameaças mantêm o vermelho de alerta (cor de sistema, não é a paleta do site) */
.av-threat-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,70,70,.08);
    border: 1px solid rgba(255,70,70,.3);
    color: #ff5c5c;
    font-size: 19px;
}

.av-threat span {
    font-size: 10.5px;
    letter-spacing: 1px;
    color: var(--text2);
    font-weight: 600;
}

/* Dispositivos protegidos usam o ciano padrão do site (mantendo homogeneidade) */
.av-device {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass);
    border: 1px solid rgba(34,224,255,.25);
    color: var(--primary-light);
    font-size: 20px;
    margin: 0 auto;
}

/* ===== ESCUDO CENTRAL =====
   AJUSTE (item 3 do pedido do cliente — escudo maior, mais moderno
   e com movimento):
   - Tamanho: 190px -> 260px, e o ícone dentro dele também cresceu.
   - Efeitos novos adicionados (cada um com sua animação abaixo):
     1. .av-shield        -> "respira" (pulsa de tamanho bem sutil).
     2. .av-shield-ring   -> anel tracejado girando (já existia).
     3. .av-shield-ring-2 -> anel novo, sólido em 2 lados, girando no
        sentido CONTRÁRIO ao primeiro e mais rápido — dá a sensação
        de "radar"/tecnologia girando nas duas direções.
     4. .av-shield-scan   -> linha verde brilhante que varre o escudo
        de cima a baixo, como um "scanner de segurança" ativo.
     5. O ícone do escudo pulsa o brilho (glow) suavemente.
   Se quiser deixar o movimento mais rápido/lento, é só mudar os
   valores de tempo (ex: "3.5s", "6s", "2.6s") nas regras abaixo. */
.av-shield {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle, var(--av-green-glow), transparent 70%);
    animation: avShieldPulse 3.5s ease-in-out infinite;
}

@keyframes avShieldPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}

.av-shield-ring {
    position: absolute;
    inset: 0;
    border: 1px dashed rgba(31,203,107,.35);
    border-radius: 50%;
    animation: avSpin 20s linear infinite;
}

/* Segundo anel: gira mais rápido e no sentido contrário, com apenas
   dois lados coloridos (efeito "radar" em vez de um círculo fechado). */
.av-shield-ring-2 {
    position: absolute;
    inset: 20px;
    border: 2px solid transparent;
    border-top-color: var(--av-green-light);
    border-right-color: var(--av-green-light);
    border-radius: 50%;
    opacity: .6;
    animation: avSpin 6s linear infinite reverse;
}

/* Linha de "scanner" varrendo o escudo de cima a baixo */
.av-shield-scan {
    position: absolute;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--av-green-light), transparent);
    filter: drop-shadow(0 0 6px var(--av-green-light));
    animation: avScan 2.6s ease-in-out infinite;
}

@keyframes avScan {
    0%   { top: 15%; opacity: 0; }
    12%  { opacity: 1; }
    50%  { top: 85%; opacity: 1; }
    62%  { opacity: 0; }
    100% { top: 15%; opacity: 0; }
}

@keyframes avSpin {
    to { transform: rotate(360deg); }
}

.av-shield > i:first-of-type {
    position: relative;
    z-index: 2;
    font-size: 130px;
    background: linear-gradient(180deg, var(--av-green-light), var(--av-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: avIconGlow 3.5s ease-in-out infinite;
}

@keyframes avIconGlow {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(31,203,107,.45)); }
    50%      { filter: drop-shadow(0 0 40px rgba(31,203,107,.85)); }
}

.av-shield-check {
    position: absolute;
    z-index: 3;
    font-size: 40px;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    filter: drop-shadow(0 0 8px rgba(255,255,255,.5));
}

/* ===== Barra de estatísticas (+100 empresas, 99,9%, 24/7, 8 anos) ===== */
.av-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 30px;
    margin-bottom: 50px;
}

.av-stat {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Estatísticas seguem o ciano padrão do site */
.av-stat i {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34,224,255,.08);
    border: 1px solid rgba(34,224,255,.25);
    color: var(--primary-light);
    font-size: 18px;
    flex-shrink: 0;
}

.av-stat strong {
    display: block;
    font-size: 24px;
    font-weight: 800;
}

.av-stat span {
    font-size: 13.5px;
    color: var(--text2);
}

/* ===== Comparativo: Sem proteção (vermelho) x Com proteção (verde Kaspersky) ===== */
.av-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 25px;
    align-items: center;
    margin-bottom: 40px;
}

.av-compare-card {
    background: var(--glass);
    border-radius: var(--radius);
    padding: 35px;
}

.av-negative {
    border: 1px solid rgba(255,70,70,.25);
}

.av-positive {
    border: 1px solid rgba(31,203,107,.3);
    background: linear-gradient(180deg, rgba(31,203,107,.08), rgba(255,255,255,.03));
}

/* AJUSTE (erro apontado pelo cliente — espaçamento irregular entre
   "Uperx e" / "Kaspersky" / ",sua empresa..."):
   O PROBLEMA NÃO ERA TEXTO, era CSS. Este h3 tem um ícone + texto +
   um <span> destacando "Kaspersky" no meio da frase. A regra antiga
   usava "display: flex; gap: 10px;" no h3 inteiro — só que o h3 tem
   texto "solto" misturado com elementos (o ícone e o span), e quando
   isso acontece o navegador transforma CADA pedacinho de texto entre
   os elementos (inclusive os espaços simples do texto) em um "item
   flex" separado. Como o "gap: 10px" é aplicado entre TODOS os itens
   flex, cada espaço de texto normal virava um item + 2x gap ao redor
   dele, criando esses vãos gigantes e ir·regulares — por isso não dava
   pra corrigir reescrevendo o texto ou os espaços, o problema estava
   na regra do CSS, não no HTML.
   CORREÇÃO: tirei o "display: flex" do h3 (voltou a ser um título
   normal, com o texto fluindo naturalmente) e ajustei só o ÍCONE do
   início com "margin-right", que dá o mesmo respiro visual sem quebrar
   o fluxo do texto em pedaços. */
.av-compare-card h3 {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 22px;
}

.av-compare-card h3 i {
    margin-right: 10px;
}

.av-negative h3 i { color: #ff5c5c; }
.av-positive h3 i { color: var(--av-green-light); }

.av-compare-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.av-compare-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text2);
    font-size: 15px;
    line-height: 1.6;
}

.av-negative li i { color: #ff5c5c; margin-top: 3px; }
.av-positive li i { color: var(--av-green-light); margin-top: 3px; }

.av-compare-divider {
    font-size: 26px;
    color: var(--av-green-light);
}

/* ===== Frase final em destaque ===== */
.av-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 60px;
    padding: 24px 40px;
}

.av-quote i {
    color: var(--av-green-light);
    font-size: 20px;
    flex-shrink: 0;
}

.av-quote p {
    font-size: 17px;
    font-weight: 600;
}

/* ================= GRADE DE PORTFÓLIO/PROJETOS ================= */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.portfolio-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 35px;
    transition: .4s;
}

.portfolio-card:hover {
    transform: translateY(-8px);
    border-color: rgba(34,224,255,.4);
}

.portfolio-card h3 {
    font-size: 20px;
    margin-bottom: 12px;
}

.portfolio-card p {
    color: var(--text2);
    font-size: 15px;
    line-height: 1.7;
}

/* ================= SEÇÃO DE CONTATO / RODAPÉ =================
   AJUSTE (item 3 do pedido do cliente — rodapé mais profissional):
   Antes esta seção era só "padding: 50px 0" sem nenhum destaque
   visual próprio, ficando visualmente igual às demais seções do site
   (mesmo fundo, sem separação clara de "isto aqui é o rodapé").
   Agora ".site-footer" (classe nova, aplicada JUNTO com ".contact" no
   HTML) dá um fundo levemente diferente do resto da página, uma borda
   no topo e mais espaço interno, para o rodapé se destacar como o
   "fechamento" do site. As classes .contact / .contact-grid /
   .contact-col continuam do jeito que estavam — nada foi removido,
   só adicionado. */
.contact {
    padding: 50px 0;
}

.site-footer {
    padding-top: 70px;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.02) 40%, rgba(255,255,255,.04));
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
}

.contact-col h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-light);
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.contact-col p {
    color: var(--text2);
    font-size: 16px;
    line-height: 1.8;
}

/* ================= ÍCONES DE REDES SOCIAIS ================= */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.social-links a {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text2);
    font-size: 20px;
    transition: all 0.35s ease;
}

.social-links a:hover {
    border-color: var(--primary-light);
    color: var(--primary-light);
    transform: translateY(-3px);
}

/* ================= BARRA FINAL DO RODAPÉ (COPYRIGHT) ================= */
/* Linha divisória + texto de direitos autorais, sempre centralizado,
   no fechamento do rodapé. O ano exibido dentro de #ano-atual é
   atualizado automaticamente pelo script.js (função no final do
   arquivo), então não precisa trocar esse número manualmente todo
   ano — só o texto ao redor, se quiser mudar. */
.footer-bottom {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.footer-bottom p {
    color: var(--text2);
    font-size: 14px;
    letter-spacing: .3px;
}

/* ======================================================
   CORRIGIDO: Botão flutuante do WhatsApp
   O SVG contém apenas o ícone em branco (o contorno do
   balão + o telefone) — ele foi feito para ficar por CIMA
   de um fundo verde. Por isso o botão precisa, sim, do
   background verde e do border-radius circular no CSS.
   O problema visual era o SVG não estar bem centralizado/
   dimensionado dentro do círculo — corrigido abaixo com
   flex centralizado e tamanho proporcional.
====================================================== */
/* ================= BOTÃO WHATSAPP FLUTUANTE ================= */
/* Bolha verde fixa no canto inferior direito da tela, com o ícone
   do WhatsApp, visível em todas as páginas/seções do site. */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  z-index: 1000;
  transition: transform .3s ease, box-shadow .3s ease;
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
  display: block;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.55);
}

/* ================= RESPONSIVO: TABLETS E TELAS MÉDIAS (até 992px) ================= */
@media(max-width: 992px) {
    section {
        padding: 55px 0;
    }
    .menu-mobile {
        display: flex;
    }
    .navbar {
        display: none;
    }
    .section-header h2 {
        font-size: 32px;
    }
    .about-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cloud-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: auto;
    }
    .cloud-card.destaque {
        transform: none;
    }

    /* --- Antivírus (responsivo tablet) --- */
    .av-grid {
        grid-template-columns: 1fr;
    }
    .av-visual {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 35px;
        margin-top: 20px;
    }
    .av-threats,
    .av-devices {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .av-features {
        grid-template-columns: repeat(3, 1fr);
    }
    .av-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .av-compare {
        grid-template-columns: 1fr;
    }
    .av-compare-divider {
        transform: rotate(90deg);
        margin: 0 auto;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .social-links {
        justify-content: center;
    }
}

/* ================= RESPONSIVO: CELULARES (até 600px) ================= */
@media(max-width: 600px) {
    section {
        padding: 45px 0;
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    .hero h1 {
        font-size: 38px;
    }
    .hero-buttons {
        flex-direction: column;
    }
    .section-header h2 {
        font-size: 26px;
    }
    .tech-item {
        min-width: 190px;
        padding: 16px 24px;
    }

    /* --- Antivírus (responsivo celular) --- */
    .av-content h2 {
        font-size: 26px;
    }
    /* Escudo um pouco menor no celular, mantendo os mesmos efeitos */
    .av-shield {
        width: 200px;
        height: 200px;
    }
    .av-shield > i:first-of-type {
        font-size: 100px;
    }
    .av-shield-check {
        font-size: 32px;
    }
    .av-features {
        grid-template-columns: repeat(2, 1fr);
    }
    .av-stats {
        grid-template-columns: 1fr;
    }
    .av-quote {
        flex-direction: column;
        border-radius: var(--radius);
    }
}