/* ============================================================
   style.css
   Estilos principais — Página de planos OnClick Digital Signage

   Função:
   - Define o visual base da página.
   - Estiliza o topo principal.
   - Prepara responsividade para celular, tablet e desktop.
============================================================ */


/* ============================================================
   1. RESET BÁSICO
   Remove margens/paddings padrão do navegador
============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ============================================================
   2. CONFIGURAÇÕES GERAIS DO BODY
============================================================ */

body {
    min-height: 100vh;
    background: #03060c;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}


/* ============================================================
   3. CONTAINER PRINCIPAL DA PÁGINA
============================================================ */

.pagina-planos {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}


/* ============================================================
   4. TOPO / HERO
   Área principal com a imagem de fundo do projeto
============================================================ */

.hero-topo {
    position: relative;
    width: 100%;
    min-height: 560px;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    overflow: hidden;
    background: #02050a;
}


/* Imagem de fundo do topo */
.hero-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* Camada escura suave para melhorar leitura dos textos */
.hero-topo::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.05),
            rgba(0, 0, 0, 0.15) 45%,
            rgba(0, 0, 0, 0.30) 100%);

    z-index: 1;
}


/* Conteúdo sobre a imagem: logo, título e slogan */
.hero-conteudo {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1100px;

    padding: 28px 20px 0;
    text-align: center;
}


/* Logo do topo */
.hero-logo {
    width: min(330px, 70vw);
    display: block;

    margin: 0 auto 12px;

    filter: drop-shadow(0 0 18px rgba(0, 180, 255, 0.45));
}


/* ============================================================
   TÍTULO PRINCIPAL DO TOPO
   Ajusta tamanho, transparência e destaque do texto principal
============================================================ */

.hero-conteudo h1 {
    font-size: clamp(1.75rem, 4.2vw, 3.35rem);
    line-height: 1.05;

    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.65);
}



/* ============================================================
   DESTAQUE DO TÍTULO PRINCIPAL
   Controla somente o texto:
   "EM UMA MÁQUINA DE VENDAS!"

   Onde alterar:
   - font-size: diminui ou aumenta somente essa linha
   - opacity: deixa mais suave ou mais forte
============================================================ */

.hero-conteudo h1 span {
    display: inline-block;

    /* Diminui somente essa segunda linha */
    font-size: 0.60em;

    color: rgba(255, 176, 0, 0.86);
    opacity: 0.92;
}




/* Destaque amarelo/laranja no título */
.hero-conteudo h1 span {
    color: #ffb000;
}


/* ============================================================
   SLOGAN DO TOPO
   Frase abaixo do título principal:
   "COMUNIQUE • ENCANTE • VENDA MAIS"

   Ajuste:
   - Desce um pouco mais o slogan.
   - Mantém boa leitura sobre a imagem.
============================================================ */

.hero-slogan {
    margin-top: 140px;
    /* Para descer mis  o slogan, altere aqui */

    font-size: clamp(1rem, 2.2vw, 1.45rem);
    letter-spacing: 3px;

    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.9);
}


/* Bolinhas/divisores do slogan */
.hero-slogan b {
    color: #ffb000;
    margin: 0 8px;
}


/* ============================================================
   5. RESPONSIVIDADE — TABLET E CELULAR
   Ajustes principais para telas até 768px
============================================================ */

@media (max-width: 768px) {

    /* ========================================================
       ALTURA DO TOPO NO CELULAR/TABLET
       Altere o min-height se quiser o topo mais alto ou mais baixo.
       Exemplo:
       - 440px = padrão atual
       - 480px = topo mais alto
       - 400px = topo mais baixo
    ======================================================== */
    .hero-topo {
        min-height: 440px;
    }


    /* ========================================================
       CONTEÚDO DO TOPO NO CELULAR
       Aqui você controla a posição geral da logo, título e slogan.
       
       Se quiser descer tudo junto:
       aumente o padding-top.
       
       Exemplo:
       - 22px = mais alto
       - 45px = mais baixo
       - 60px = bem mais baixo
    ======================================================== */
    .hero-conteudo {
        padding-top: 35px;
        padding-left: 16px;
        padding-right: 16px;
    }


    /* ========================================================
       LOGO DO TOPO NO CELULAR
       Aqui você controla o tamanho da logo.
       
       Para aumentar:
       width: min(270px, 82vw);
       
       Para diminuir:
       width: min(220px, 75vw);
       
       O margin-bottom controla o espaço abaixo da logo.
    ======================================================== */
    .hero-logo {
        width: min(245px, 78vw);
        margin-bottom: 12px;
    }


    /* ========================================================
       TÍTULO PRINCIPAL NO CELULAR/TABLET
       Texto:
       "TRANSFORME SUA TV
       EM UMA MÁQUINA DE VENDAS!"
       
       Para descer somente o título:
       aumente o margin-top.
       
       Para subir:
       diminua o margin-top.
       
       Para aumentar/diminuir o tamanho:
       altere os valores do clamp().
    ======================================================== */
    .hero-conteudo h1 {
        margin-top: 18px;
        font-size: clamp(1.35rem, 6vw, 2.1rem);
        opacity: 0.90;
    }


    /* ========================================================
       SLOGAN DO TOPO NO CELULAR
       Texto:
       "COMUNIQUE • ENCANTE • VENDA MAIS"
       
       Para descer mais o slogan:
       aumente o margin-top.
       
       Para subir:
       diminua o margin-top.
    ======================================================== */
    .hero-slogan {
        margin-top: 28px;
        font-size: 0.85rem;
        letter-spacing: 1.6px;
    }
}



/* ============================================================
   7. BENEFÍCIOS
   Mini cards abaixo do topo com os diferenciais do produto
============================================================ */

.beneficios {
    width: 100%;
    padding: 46px 16px 34px;

    background:
        radial-gradient(circle at top, rgba(0, 145, 255, 0.12), transparent 35%),
        linear-gradient(180deg, #03060c 0%, #050914 100%);
}


/* Título da área de benefícios */
.beneficios-titulo {
    max-width: 900px;
    margin: 0 auto 28px;
    text-align: center;
}

.beneficios-titulo h2 {
    font-size: clamp(1.45rem, 3vw, 2.35rem);
    line-height: 1.15;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
}

.beneficios-titulo p {
    margin-top: 10px;
    font-size: clamp(0.95rem, 2vw, 1.12rem);
    color: rgba(255, 255, 255, 0.78);
}


/* ============================================================
   GRADE DOS BENEFÍCIOS
   Organiza os mini cards em colunas responsivas.

   Desktop:
   - 3 colunas com 2 linhas, ficando mais equilibrado.

   Celular:
   - 2 colunas, mantendo número par de cards.
============================================================ */

.beneficios-grid {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}


/* Card individual */
.beneficio-card {
    min-height: 178px;
    padding: 20px 14px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    text-align: center;

    border-radius: 22px;
    border: 1px solid rgba(255, 176, 0, 0.28);

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.35),
        inset 0 0 18px rgba(255, 255, 255, 0.035);

    backdrop-filter: blur(8px);
}


/* ============================================================
   ÍCONES DOS BENEFÍCIOS
   Agora usando imagens PNG transparentes no estilo do projeto.

   Onde alterar:
   - width/height: tamanho do círculo iluminado
   - background: brilho dourado atrás do ícone
   - box-shadow: intensidade da luz
============================================================ */

.beneficio-icone {
    width: 78px;
    height: 78px;
    margin-bottom: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255, 196, 0, 0.34) 0%,
            rgba(255, 196, 0, 0.16) 42%,
            rgba(255, 196, 0, 0.04) 70%,
            transparent 100%);

    box-shadow:
        0 0 18px rgba(255, 196, 0, 0.22),
        inset 0 0 14px rgba(255, 196, 0, 0.10);
}


/* ============================================================
   IMAGEM DENTRO DO ÍCONE
   Controla o tamanho do PNG dentro do círculo.
============================================================ */

.beneficio-icone img {
    width: 44px;
    height: 44px;

    object-fit: contain;
    display: block;

    filter:
        drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 7px rgba(255, 220, 120, 0.22));
}


/* Título do card */
.beneficio-card h3 {
    font-size: 0.98rem;
    line-height: 1.18;
    font-weight: 800;
    color: #ffbf2f;
    text-transform: uppercase;
}


/* Texto pequeno do card */
.beneficio-card p {
    margin-top: 8px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.76);
}


/* Efeito suave ao passar o mouse no desktop */
.beneficio-card:hover {
    transform: translateY(-3px);
    transition: 0.25s ease;
    border-color: rgba(255, 176, 0, 0.55);
}


/* ============================================================
   9. ÁREA DE PLANOS
   Bloco geral da área de planos
============================================================ */

.area-planos {
    width: 100%;
    padding: 28px 16px 44px;
    background: linear-gradient(180deg, #040812 0%, #03060c 100%);
}


/* ============================================================
   TÍTULO DA ÁREA DE PLANOS
   Modelo mais próximo da arte aprovada pelo cliente
============================================================ */

.planos-titulo.modelo-cliente {
    max-width: 1100px;
    margin: 0 auto 22px;
    text-align: center;
}

.planos-titulo.modelo-cliente h2 {
    font-size: clamp(1.45rem, 3.8vw, 3rem);
    line-height: 1.05;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.65);
}

.planos-titulo.modelo-cliente p {
    margin-top: 8px;
    font-size: clamp(0.72rem, 1.8vw, 1rem);
    line-height: 1.5;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}


/* ============================================================
   BLOCO PRINCIPAL DO PLANO MENSAL
   Ajuste das larguras das 3 colunas:
   - esquerda
   - centro
   - direita

   Aqui aumentamos a coluna da direita para a lista caber melhor.
============================================================ */

.mensal-faixa-rgb {
    position: relative;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 270px 1fr 310px;
    gap: 0;

    padding: 18px 20px;

    border-radius: 28px;
    overflow: hidden;

    background: rgba(2, 7, 18, 0.94);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.45),
        inset 0 0 24px rgba(255, 255, 255, 0.03);
}

/* ============================================================
   BORDA RGB NEON DO PLANO MENSAL
   Cria uma borda colorida em volta do card sem preencher o meio.

   Onde alterar:
   - padding: controla a espessura da borda.
   - border-radius: controla o arredondamento.
   - background: controla as cores RGB da borda.
============================================================ */

.mensal-faixa-rgb::before {
    content: "";
    position: absolute;
    inset: 0;

    /* Espessura da borda RGB */
    padding: 2px;

    /* Arredondamento da borda */
    border-radius: 28px;

    /* Cores da borda RGB */
    background: linear-gradient(90deg,
            #29ff87 0%,
            #00e5ff 30%,
            #3f9bff 55%,
            #ff47d1 78%,
            #ff6eff 100%);

    /* Compatibilidade com Chrome, Edge e Safari */
    -webkit-mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);

    -webkit-mask-composite: xor;

    /* Propriedade padrão para compatibilidade */
    mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);

    mask-composite: exclude;

    pointer-events: none;
}

/* colunas internas */
.mensal-coluna {
    position: relative;
    z-index: 1;
    padding: 12px 16px;
}

/* divisórias verticais no desktop */
.mensal-esquerda,
.mensal-centro {
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}


/* ============================================================
   COLUNA ESQUERDA
============================================================ */

.mensal-esquerda {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.mensal-icone-principal img {
    width: 68px;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

/* Nome do plano */
.mensal-nome-plano span,
.mensal-nome-plano em,
.mensal-nome-plano strong {
    display: block;
    line-height: 1;
    text-transform: uppercase;
    font-style: normal;
}

.mensal-nome-plano span {
    font-size: 1.05rem;
    color: #ffffff;
    margin-bottom: 4px;
}

.mensal-nome-plano strong {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #ffb400;
    margin-bottom: 6px;
}

.mensal-nome-plano em {
    font-size: 1.7rem;
    color: #ffffff;
}

/* Botão amarelo */
.mensal-box-sem-fidelidade {
    margin-top: 22px;
    padding: 14px 20px;

    text-align: center;
    border-radius: 10px;

    background: linear-gradient(180deg, #f6c51f 0%, #dfa300 100%);
    box-shadow:
        0 8px 20px rgba(255, 176, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.mensal-box-sem-fidelidade span {
    display: block;
    font-size: 1rem;
    font-weight: 900;
    color: #111111;
    text-transform: uppercase;
}

.mensal-box-sem-fidelidade small {
    display: block;
    margin-top: 4px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #111111;
    text-transform: uppercase;
}


/* ============================================================
   COLUNA CENTRAL
============================================================ */

.mensal-centro {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mensal-texto-central h3 {
    font-size: clamp(1.25rem, 2.3vw, 2rem);
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.05;
}

.mensal-texto-central p {
    margin-top: 8px;
    max-width: 620px;
    font-size: 0.98rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
}

/* linha das 3 opções */
.mensal-opcoes-linha {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.mensal-opcao-item {
    padding: 0 18px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.mensal-opcao-item:last-child {
    border-right: none;
}

.mensal-opcao-item img {
    width: 52px;
    height: auto;
    margin: 0 auto 10px;
    display: block;
}

.mensal-opcao-item span {
    display: block;
    min-height: 46px;
    font-size: 0.9rem;
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
}

.mensal-opcao-item strong {
    display: block;
    margin-top: 8px;
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    line-height: 1;
    font-weight: 900;
    color: #ffb400;
    text-shadow: 0 0 14px rgba(255, 180, 0, 0.18);
}

.mensal-opcao-item small {
    display: block;
    margin-top: 4px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
}


/* ============================================================
   COLUNA DIREITA
   Aumenta o respiro interno da lista de inclusos.
============================================================ */

.mensal-direita {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 18px;
}

.mensal-inclusos {
    list-style: none;
    width: 100%;
}

/* ============================================================
   LISTA DE INCLUSOS
   Ajuste para melhorar leitura e evitar texto encostado
   na borda RGB.
============================================================ */

.mensal-inclusos li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    padding-right: 8px;

    font-size: 0.94rem;
    line-height: 1.42;
    color: #ffffff;
}

.mensal-inclusos li:last-child {
    margin-bottom: 0;
}

/* check amarelo */
.mensal-inclusos li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;

    font-size: 1rem;
    font-weight: 900;
    color: #ffb400;
}

/* ============================================================
   BOTÃO FLUTUANTE — WHATSAPP
   Função:
   - Botão fixo no canto inferior direito
   - Verde claro no padrão OnClick
   - Movimento suave de vai e vem
============================================================ */

.botao-flutuante-whatsapp {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  padding: 14px 22px;
  border-radius: 14px;

  background: linear-gradient(135deg, #9dff00, #52df00);
  color: #06101f;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;

  box-shadow:
    0 14px 34px rgba(109, 255, 0, 0.28),
    0 0 18px rgba(109, 255, 0, 0.18);

  animation: flutuarWhatsapp 3.2s ease-in-out infinite;
  transition: 0.25s ease;
}

.botao-flutuante-whatsapp:hover {
  transform: scale(1.06);
  background: linear-gradient(135deg, #b5ff26, #6dff00);
  color: #06101f;

  box-shadow:
    0 18px 44px rgba(109, 255, 0, 0.38),
    0 0 24px rgba(109, 255, 0, 0.28);
}

.icone-whatsapp-flutuante {
  font-size: 18px;
  line-height: 1;
}

.texto-whatsapp-flutuante {
  line-height: 1;
}

/* Movimento lento do botão */
@keyframes flutuarWhatsapp {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }

  50% {
    transform: translateY(-7px) translateX(-5px);
  }
}


/* ============================================================
   RESPONSIVO — BOTÃO FLUTUANTE WHATSAPP
============================================================ */

@media (max-width: 640px) {
  .botao-flutuante-whatsapp {
    right: 16px;
    bottom: 18px;
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 13px;
    gap: 7px;
  }

  .icone-whatsapp-flutuante {
    font-size: 16px;
  }
}








/* ============================================================
   10. RESPONSIVIDADE DA FAIXA MENSAL
============================================================ */

@media (max-width: 980px) {

    .mensal-faixa-rgb {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 18px;
    }

    .mensal-esquerda,
    .mensal-centro {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .mensal-esquerda,
    .mensal-centro,
    .mensal-direita {
        padding: 18px 10px;
    }

    .mensal-esquerda {
        align-items: center;
        text-align: center;
    }

    .mensal-box-sem-fidelidade {
        width: 100%;
        max-width: 320px;
    }

    .mensal-texto-central {
        text-align: center;
    }

    .mensal-texto-central p {
        margin-left: auto;
        margin-right: auto;
    }

    .mensal-direita {
        justify-content: flex-start;
    }
}


@media (max-width: 768px) {

    .area-planos {
        padding: 26px 14px 36px;
    }

    .planos-titulo.modelo-cliente {
        margin-bottom: 16px;
    }

    .planos-titulo.modelo-cliente h2 {
        font-size: clamp(1.15rem, 6vw, 2rem);
    }

    .planos-titulo.modelo-cliente p {
        font-size: 0.68rem;
        letter-spacing: 1px;
    }

    .mensal-faixa-rgb {
        padding: 14px;
        border-radius: 22px;
    }

    .mensal-faixa-rgb::before {
        border-radius: 22px;
    }

    .mensal-nome-plano span {
        font-size: 0.95rem;
    }

    .mensal-nome-plano strong {
        font-size: 2.1rem;
    }

    .mensal-nome-plano em {
        font-size: 1.45rem;
    }

    .mensal-box-sem-fidelidade {
        margin-top: 18px;
        padding: 12px 14px;
    }

    .mensal-box-sem-fidelidade span {
        font-size: 0.92rem;
    }

    .mensal-box-sem-fidelidade small {
        font-size: 0.78rem;
    }

    .mensal-texto-central h3 {
        font-size: 1.15rem;
    }

    .mensal-texto-central p {
        font-size: 0.88rem;
    }

    .mensal-opcoes-linha {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 18px;
    }

    .mensal-opcao-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding: 10px 0 16px;
    }

    .mensal-opcao-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .mensal-opcao-item span {
        min-height: auto;
        font-size: 0.85rem;
    }

    .mensal-opcao-item strong {
        font-size: 1.85rem;
    }

    .mensal-inclusos li {
        font-size: 0.92rem;
        margin-bottom: 10px;
    }
}


@media (max-width: 480px) {

    .mensal-faixa-rgb {
        padding: 12px;
    }

    .mensal-coluna {
        padding: 14px 8px;
    }

    .mensal-icone-principal img {
        width: 58px;
    }

    .mensal-nome-plano strong {
        font-size: 1.85rem;
    }

    .mensal-nome-plano em {
        font-size: 1.28rem;
    }

    .mensal-texto-central h3 {
        font-size: 1.02rem;
    }

    .mensal-texto-central p {
        font-size: 0.82rem;
    }

    .mensal-opcao-item img {
        width: 44px;
    }

    .mensal-opcao-item strong {
        font-size: 1.65rem;
    }

    .mensal-inclusos li {
        font-size: 0.86rem;
    }
}

/* ============================================================
   10. RESPONSIVIDADE DO PLANO MENSAL RGB
   Ajusta o bloco "Plano Mensal Livre" para tablet e celular

   IMPORTANTE:
   Este bloco pertence ao modelo novo RGB.
   Ele usa as classes:
   - .mensal-faixa-rgb
   - .mensal-coluna
   - .mensal-esquerda
   - .mensal-centro
   - .mensal-direita
   - .mensal-opcoes-linha
   - .mensal-opcao-item

   Se ainda existir CSS antigo com:
   - .plano-mensal-livre
   - .mensal-opcoes
   - .mensal-item
   - .mensal-cabecalho
   - .mensal-observacao

   Pode remover para não misturar estilos.
============================================================ */


/* ============================================================
   TELAS MÉDIAS — TABLET / NOTEBOOK MENOR
   Abaixo de 980px, o bloco sai de 3 colunas
   e passa a ficar empilhado em uma coluna.
============================================================ */

@media (max-width: 980px) {

    /* ========================================================
       BLOCO PRINCIPAL DO PLANO MENSAL
       Aqui o card RGB vira uma coluna única.

       Para deixar o card mais largo/estreito:
       ajuste o max-width no bloco principal fora da responsividade.
    ======================================================== */
    .mensal-faixa-rgb {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 18px;
    }


    /* ========================================================
       DIVISÓRIAS INTERNAS
       Remove linhas verticais e cria separação horizontal.
    ======================================================== */
    .mensal-esquerda,
    .mensal-centro {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }


    /* ========================================================
       ESPAÇAMENTO DAS COLUNAS
       Aumente ou diminua o padding para dar mais respiro.
    ======================================================== */
    .mensal-esquerda,
    .mensal-centro,
    .mensal-direita {
        padding: 18px 10px;
    }


    /* ========================================================
       COLUNA ESQUERDA
       Centraliza calendário, título e botão.
    ======================================================== */
    .mensal-esquerda {
        align-items: center;
        text-align: center;
    }


    /* ========================================================
       BOTÃO "SEM FIDELIDADE"
       Controla a largura máxima do botão.
    ======================================================== */
    .mensal-box-sem-fidelidade {
        width: 100%;
        max-width: 320px;
    }


    /* ========================================================
       TEXTO CENTRAL
       Centraliza o título e a descrição no tablet/celular.
    ======================================================== */
    .mensal-texto-central {
        text-align: center;
    }

    .mensal-texto-central p {
        margin-left: auto;
        margin-right: auto;
    }


    /* ========================================================
       LISTA DE INCLUSOS
       Mantém a lista bem encaixada.
    ======================================================== */
    .mensal-direita {
        justify-content: center;
    }

    .mensal-inclusos {
        max-width: 520px;
    }
}


/* ============================================================
   CELULAR E TABLET PEQUENO
   Abaixo de 768px, compacta todo o bloco.
============================================================ */

@media (max-width: 768px) {

    /* ========================================================
       ÁREA GERAL DOS PLANOS
       Controla o espaço acima e abaixo do bloco mensal.
    ======================================================== */
    .area-planos {
        padding: 26px 14px 36px;
    }


    /* ========================================================
       TÍTULO ACIMA DO PLANO MENSAL
       Controla o texto:
       "ESCOLHA O PLANO IDEAL PARA SEU NEGÓCIO"
    ======================================================== */
    .planos-titulo.modelo-cliente {
        margin-bottom: 16px;
    }

    .planos-titulo.modelo-cliente h2 {
        font-size: clamp(1.15rem, 6vw, 2rem);
    }

    .planos-titulo.modelo-cliente p {
        font-size: 0.68rem;
        letter-spacing: 1px;
    }


    /* ========================================================
       CARD RGB DO PLANO MENSAL
       Ajusta borda, arredondamento e espaço interno.
    ======================================================== */
    .mensal-faixa-rgb {
        padding: 14px;
        border-radius: 22px;
    }

    .mensal-faixa-rgb::before {
        border-radius: 22px;
    }


    /* ========================================================
       ÍCONE DO CALENDÁRIO
       Para aumentar/diminuir, altere o width.
    ======================================================== */
    .mensal-icone-principal img {
        width: 62px;
    }


    /* ========================================================
       TEXTO "PLANO MENSAL LIVRE"
    ======================================================== */
    .mensal-nome-plano span {
        font-size: 0.95rem;
    }

    .mensal-nome-plano strong {
        font-size: 2.1rem;
    }

    .mensal-nome-plano em {
        font-size: 1.45rem;
    }


    /* ========================================================
       BOTÃO AMARELO "SEM FIDELIDADE"
    ======================================================== */
    .mensal-box-sem-fidelidade {
        margin-top: 18px;
        padding: 12px 14px;
    }

    .mensal-box-sem-fidelidade span {
        font-size: 0.92rem;
    }

    .mensal-box-sem-fidelidade small {
        font-size: 0.78rem;
    }


    /* ========================================================
       TÍTULO E DESCRIÇÃO CENTRAL
       Texto:
       "FLEXIBILIDADE PARA O SEU NEGÓCIO"
    ======================================================== */
    .mensal-texto-central h3 {
        font-size: 1.15rem;
    }

    .mensal-texto-central p {
        font-size: 0.88rem;
    }


    /* ========================================================
       OPÇÕES DE VALORES
       No celular, as 3 opções ficam uma embaixo da outra.
    ======================================================== */
    .mensal-opcoes-linha {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 18px;
    }

    .mensal-opcao-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding: 10px 0 16px;
    }

    .mensal-opcao-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }


    /* ========================================================
       ÍCONES DAS TVs
       Controla os ícones das opções:
       Cliente já possui TV / TV 32 / TV 50.
    ======================================================== */
    .mensal-opcao-item img {
        width: 48px;
    }


    /* ========================================================
       TEXTOS DAS OPÇÕES
    ======================================================== */
    .mensal-opcao-item span {
        min-height: auto;
        font-size: 0.85rem;
    }


    /* ========================================================
       VALORES DO PLANO MENSAL
       Aqui controla o tamanho dos preços.
    ======================================================== */
    .mensal-opcao-item strong {
        font-size: 1.85rem;
    }

    .mensal-opcao-item small {
        font-size: 0.82rem;
    }


    /* ========================================================
       LISTA DE INCLUSOS
    ======================================================== */
    .mensal-inclusos li {
        font-size: 0.92rem;
        margin-bottom: 10px;
    }
}


/* ============================================================
   CELULARES PEQUENOS
   Abaixo de 480px, deixa tudo mais compacto.
============================================================ */

@media (max-width: 480px) {

    /* ========================================================
       CARD RGB PRINCIPAL
    ======================================================== */
    .mensal-faixa-rgb {
        padding: 12px;
    }


    /* ========================================================
       COLUNAS INTERNAS
    ======================================================== */
    .mensal-coluna {
        padding: 14px 8px;
    }


    /* ========================================================
       ÍCONE DO CALENDÁRIO
    ======================================================== */
    .mensal-icone-principal img {
        width: 58px;
    }


    /* ========================================================
       TEXTO "PLANO MENSAL LIVRE"
    ======================================================== */
    .mensal-nome-plano span {
        font-size: 0.86rem;
    }

    .mensal-nome-plano strong {
        font-size: 1.85rem;
    }

    .mensal-nome-plano em {
        font-size: 1.28rem;
    }


    /* ========================================================
       BOTÃO "SEM FIDELIDADE"
    ======================================================== */
    .mensal-box-sem-fidelidade span {
        font-size: 0.84rem;
    }

    .mensal-box-sem-fidelidade small {
        font-size: 0.72rem;
    }


    /* ========================================================
       TEXTO CENTRAL
    ======================================================== */
    .mensal-texto-central h3 {
        font-size: 1.02rem;
    }

    .mensal-texto-central p {
        font-size: 0.82rem;
    }


    /* ========================================================
       ÍCONES DAS OPÇÕES
    ======================================================== */
    .mensal-opcao-item img {
        width: 44px;
    }


    /* ========================================================
       VALORES
    ======================================================== */
    .mensal-opcao-item strong {
        font-size: 1.65rem;
    }


    /* ========================================================
       LISTA DE INCLUSOS
    ======================================================== */
    .mensal-inclusos li {
        font-size: 0.86rem;
    }
}



/* ============================================================
   11. PLANOS FIDELIDADE ELITE
   Área dos 3 cards principais dos planos fidelidade
============================================================ */

.fidelidade-area {
    width: 100%;
    max-width: 1180px;
    margin: 34px auto 0;
}


/* ============================================================
   TÍTULO "PLANOS FIDELIDADE ELITE"
   Linha decorativa + texto central
============================================================ */

.fidelidade-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin-bottom: 22px;
    text-align: center;
}

.fidelidade-titulo span {
    width: 120px;
    height: 2px;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 191, 47, 0.95),
            transparent);

    box-shadow: 0 0 12px rgba(255, 191, 47, 0.55);
}

.fidelidade-titulo h2 {
    font-size: clamp(1.45rem, 3.2vw, 2.65rem);
    line-height: 1.05;

    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: #ffd86b;
    text-shadow:
        0 0 14px rgba(255, 191, 47, 0.34),
        0 4px 14px rgba(0, 0, 0, 0.75);
}


/* ============================================================
   GRID DOS CARDS
   Desktop: 3 cards lado a lado
============================================================ */

.cards-planos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;

    width: 100%;
}


/* ============================================================
   CARD INDIVIDUAL DO PLANO
   Formato vertical 9:16 para evitar distorção
============================================================ */

.card-plano {
    position: relative;

    width: 100%;
    aspect-ratio: 9 / 16;

    overflow: hidden;
    border-radius: 26px;

    background: #050505;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.52),
        inset 0 0 18px rgba(255, 255, 255, 0.04);
}


/* Bordas dos cards */
.card-start {
    border: 1px solid rgba(255, 145, 0, 0.85);
}

.card-business32 {
    border: 1px solid rgba(210, 225, 255, 0.85);
}

.card-business50 {
    border: 1px solid rgba(255, 191, 47, 0.95);
}


/* ============================================================
   IMAGEM DE FUNDO DO CARD
   Aqui controlamos a opacidade da arte do card.

   Onde alterar:
   - opacity: 0.78 = mais opaca
   - opacity: 0.85 = menos opaca
   - opacity: 0.70 = ainda mais escura
============================================================ */

.card-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0.50;
    /* AQUI esccureçe a imagem do car*/

    z-index: 1;
}


/* ============================================================
   CAMADA ESCURA SOBRE A IMAGEM
   Essa camada ajuda o texto a ficar mais visível.

   Onde alterar:
   - Se quiser mais escuro, aumente os valores:
     ex: 0.28 / 0.52 / 0.68
   - Se quiser mais claro, diminua os valores.
============================================================ */

.card-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.28) 0%,
            rgba(0, 0, 0, 0.50) 42%,
            rgba(0, 0, 0, 0.68) 100%);

    z-index: 2;
}


/* ============================================================
   CONTEÚDO DO CARD
============================================================ */

.card-conteudo {
    position: relative;
    z-index: 3;

    width: 100%;
    height: 100%;

    padding: 22px 18px 18px;

    display: flex;
    flex-direction: column;
}


/* Logo do plano no topo do card */
.card-logo-plano {
    width: 74%;
    max-width: 255px;
    height: auto;

    display: block;
    margin: 0 auto 8px;

    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.75));
}


/* Subtítulo abaixo da logo */
.card-subtitulo {
    text-align: center;

    font-size: clamp(0.75rem, 1vw, 0.98rem);
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;

    color: #ffffff;

    margin-bottom: 14px;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.75);
}


/* ============================================================
   LISTA DE INCLUSOS DO CARD
============================================================ */

.card-inclusos {
    position: relative;
    max-width: 76%;
    margin-top: 2px;
}

.card-inclusos h3 {
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffdf4a;

    margin-bottom: 8px;
}

.card-inclusos ul {
    list-style: none;
}

.card-inclusos li {
    position: relative;

    padding-left: 18px;
    margin-bottom: 7px;

    font-size: clamp(0.66rem, 0.95vw, 0.86rem);
    line-height: 1.25;

    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.card-inclusos li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: -1px;

    font-size: 0.8rem;
    font-weight: 900;
    color: #ffcf2f;
}


/* ============================================================
   SELO DE PARCELAMENTO
============================================================ */

.card-selo {
    position: absolute;
    right: 18px;
    top: 34%;

    width: 76px;
    height: auto;

    z-index: 4;

    filter:
        drop-shadow(0 5px 10px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 8px rgba(255, 191, 47, 0.30));
}


/* ============================================================
   TABELA DE PREÇOS
   Fica presa na parte inferior do card
============================================================ */

.card-tabela-precos {
    margin-top: auto;

    width: 100%;

    border-radius: 12px;
    overflow: hidden;

    border: 1px solid rgba(255, 165, 0, 0.70);

    background: rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(6px);

    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.35),
        inset 0 0 18px rgba(255, 176, 0, 0.06);
}


/* Variação azul para Business 32 */
.card-tabela-precos.tabela-azul {
    border-color: rgba(120, 190, 255, 0.75);
}


/* Variação dourada para Business 50 */
.card-tabela-precos.tabela-dourada {
    border-color: rgba(255, 191, 47, 0.95);
}


/* Linha individual da tabela */
.linha-preco {
    display: grid;
    grid-template-columns: 1fr 120px;

    min-height: 38px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

.linha-preco:last-child {
    border-bottom: none;
}


/* Nome do período */
.linha-preco span {
    display: flex;
    align-items: center;

    padding: 0 12px;

    font-size: clamp(0.66rem, 0.85vw, 0.82rem);
    font-weight: 800;
    text-transform: uppercase;

    color: #ffffff;
}


/* Valor */
.linha-preco strong {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    font-size: clamp(0.72rem, 0.95vw, 0.92rem);
    font-weight: 900;

    color: #ffffff;

    border-left: 1px solid rgba(255, 255, 255, 0.20);
}


/* Linha final com mais destaque */
.destaque-final {
    background:
        linear-gradient(90deg, rgba(255, 144, 0, 0.55), rgba(255, 176, 0, 0.32));
}

.tabela-azul .destaque-final {
    background:
        linear-gradient(90deg, rgba(0, 100, 190, 0.70), rgba(0, 150, 255, 0.38));
}

.tabela-dourada .destaque-final {
    background:
        linear-gradient(90deg, rgba(255, 176, 0, 0.65), rgba(255, 210, 80, 0.32));
}


/* ============================================================
   13. BRILHO RGB CONSTANTE NOS CARDS DOS PLANOS
   Cria uma borda neon animada ao redor dos cards.

   Onde alterar:
   - padding: espessura da borda RGB
   - animation: velocidade do brilho
   - background: cores da borda RGB
============================================================ */


/* Prepara o card para receber a borda RGB animada */
.card-plano {
    position: relative;
    overflow: hidden;
}


/* Borda RGB animada em volta do card */
.card-plano::before {
    content: "";
    position: absolute;
    inset: 0;

    /* Espessura da borda RGB */
    padding: 3px;

    border-radius: 26px;

    background: linear-gradient(120deg,
            #ffb000,
            #00e5ff,
            #8a5cff,
            #ff47d1,
            #29ff87,
            #ffb000);

    background-size: 350% 350%;

    /* Animação constante do brilho */
    animation: brilhoRgbCard 5s linear infinite;

    /* Compatibilidade com Chrome, Edge e Safari */
    -webkit-mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);

    -webkit-mask-composite: xor;

    /* Propriedade padrão */
    mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);

    mask-composite: exclude;

    pointer-events: none;
    z-index: 5;
}


/* Brilho externo suave do card */
.card-plano::after {
    content: "";
    position: absolute;
    inset: -2px;

    border-radius: 28px;

    background: linear-gradient(120deg,
            rgba(255, 176, 0, 0.22),
            rgba(0, 229, 255, 0.18),
            rgba(255, 71, 209, 0.18),
            rgba(41, 255, 135, 0.16));

    filter: blur(18px);
    opacity: 0.45;

    animation: brilhoRgbCard 5s linear infinite;

    pointer-events: none;
    z-index: 0;
}


/* Mantém imagem, overlay e conteúdo acima do brilho externo */
.card-bg {
    z-index: 1;
}

.card-overlay {
    z-index: 2;
}

.card-conteudo {
    z-index: 3;
}


/* Animação da borda RGB */
@keyframes brilhoRgbCard {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* ============================================================
   14. SELO 3X NO CARTÃO
   Aumenta o selo e cria movimento suave de vai e vem.

   Onde alterar:
   - width: tamanho do selo
   - top/right: posição do selo
   - animation: velocidade do movimento
============================================================ */

.card-selo {
    width: 94px;
    right: 16px;
    top: 32%;

    animation: seloVaiEVem 2.8s ease-in-out infinite;

    filter:
        drop-shadow(0 8px 14px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 12px rgba(255, 191, 47, 0.42));
}


/* Movimento suave do selo */
@keyframes seloVaiEVem {
    0% {
        transform: translateY(0) rotate(-2deg) scale(1);
    }

    50% {
        transform: translateY(-8px) rotate(2deg) scale(1.04);
    }

    100% {
        transform: translateY(0) rotate(-2deg) scale(1);
    }
}


/* ============================================================
   15. RESPONSIVIDADE DO SELO E BORDA RGB
   Ajusta o selo em tablet e celular
============================================================ */

@media (max-width: 1050px) {

    /* Selo um pouco menor em telas médias */
    .card-selo {
        width: 86px;
        right: 14px;
        top: 32%;
    }
}


@media (max-width: 900px) {

    /* No celular/tablet, mantém o selo com destaque */
    .card-selo {
        width: 88px;
        right: 16px;
        top: 33%;
    }
}


@media (max-width: 480px) {

    /* Selo menor para não cobrir demais os textos no celular */
    .card-selo {
        width: 72px;
        right: 12px;
        top: 34%;
    }

    /* Ajusta o arredondamento da borda RGB no celular */
    .card-plano::before {
        border-radius: 24px;
    }

    .card-plano::after {
        border-radius: 26px;
    }
}


/* ============================================================
   16. LUZ RGB NA TABELA DE VALORES DOS CARDS
   Cria uma borda neon animada ao redor do bloco de preços.

   Onde alterar:
   - padding: espessura da borda
   - animation: velocidade do RGB
   - opacity: intensidade da luz
============================================================ */


/* Prepara a tabela para receber a borda RGB */
.card-tabela-precos {
    position: relative;
    z-index: 4;

    /* Mantém o conteúdo dentro da tabela */
    overflow: hidden;
}


/* Borda RGB interna da tabela */
.card-tabela-precos::before {
    content: "";
    position: absolute;
    inset: 0;

    /* Espessura da borda RGB */
    padding: 2px;

    border-radius: 12px;

    background: linear-gradient(120deg,
            #ffb000,
            #00e5ff,
            #8a5cff,
            #ff47d1,
            #29ff87,
            #ffb000);

    background-size: 350% 350%;
    animation: brilhoRgbTabela 4s linear infinite;

    /* Compatibilidade com Chrome, Edge e Safari */
    -webkit-mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);

    -webkit-mask-composite: xor;

    /* Propriedade padrão */
    mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);

    mask-composite: exclude;

    pointer-events: none;
    z-index: 3;
}


/* Luz externa suave na tabela */
.card-tabela-precos::after {
    content: "";
    position: absolute;
    inset: -4px;

    border-radius: 14px;

    background: linear-gradient(120deg,
            rgba(255, 176, 0, 0.25),
            rgba(0, 229, 255, 0.22),
            rgba(255, 71, 209, 0.20),
            rgba(41, 255, 135, 0.18));

    filter: blur(10px);
    opacity: 0.42;

    animation: brilhoRgbTabela 4s linear infinite;

    pointer-events: none;
    z-index: 0;
}


/* Garante que as linhas de preço fiquem por cima do brilho */
.linha-preco {
    position: relative;
    z-index: 2;
}


/* Animação da luz RGB da tabela */
@keyframes brilhoRgbTabela {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



/* ============================================================
   17. BOTÃO WHATSAPP NOS CARDS DOS PLANOS
   Botão com imagem PNG transparente, brilho verde e movimento.

   Nome da imagem:
   imagens/botao-whatsapp.png

   Onde alterar:
   - width: tamanho do botão
   - margin-bottom: distância até a tabela
   - animation: velocidade do movimento

   Ajuste de posição:
   - margin-top: auto empurra o botão para baixo.
   - margin-bottom controla a distância entre botão e tabela.
============================================================ */

.card-whatsapp-btn {
    position: relative;
    z-index: 6;

    display: block;
    width: 250px;
    /* ALMENTAR E DIMINUIR O BOTÃO WHATSAPP NO COMPUTADOR */
    max-width: 62%;

    /* Empurra o botão para perto da tabela de valores */
    margin-top: auto;

    /* Centraliza o botão */
    margin-left: auto;
    margin-right: auto;

    /* Distância entre o botão e a tabela */
    margin-bottom: -110px;
    /* Se quiser mais colado na tabela, diminua ou  Se quiser um pouco mais acima, aumente:     */

    border-radius: 999px;

    animation: whatsappFlutuando 2.6s ease-in-out infinite;

    filter:
        drop-shadow(0 0 8px rgba(0, 255, 120, 0.55)) drop-shadow(0 0 16px rgba(0, 255, 120, 0.35));

    transition:
        transform 0.22s ease,
        filter 0.22s ease;
}

/* Imagem interna do botão */
.card-whatsapp-btn img {
    width: 100%;
    height: auto;
    display: block;

    border-radius: 999px;
}


/* ============================================================
   BRILHO VERDE INTERMITENTE
   Luz pulsando ao redor do botão
============================================================ */

.card-whatsapp-btn::before {
    content: "";
    position: absolute;
    inset: -5px;

    border-radius: 999px;

    background: rgba(0, 255, 120, 0.28);
    filter: blur(10px);

    opacity: 0.65;
    z-index: -1;

    animation: brilhoWhatsapp 1.8s ease-in-out infinite;
}


/* ============================================================
   HOVER DO BOTÃO
   Quando passar o mouse, ele cresce e acende mais
============================================================ */

.card-whatsapp-btn:hover {
    transform: translateY(-4px) scale(1.06);

    filter:
        drop-shadow(0 0 10px rgba(0, 255, 120, 0.85)) drop-shadow(0 0 24px rgba(0, 255, 120, 0.55));
}


/* ============================================================
   EFEITO DE CLIQUE
   Mostra visualmente que o botão foi pressionado
============================================================ */

.card-whatsapp-btn:active {
    transform: scale(0.92);

    filter:
        drop-shadow(0 0 6px rgba(0, 255, 120, 0.95)) drop-shadow(0 0 12px rgba(0, 255, 120, 0.65));
}


/* Movimento suave de vai e vem */
@keyframes whatsappFlutuando {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}


/* Pulso da luz verde */
@keyframes brilhoWhatsapp {
    0% {
        opacity: 0.35;
        transform: scale(0.96);
    }

    50% {
        opacity: 0.90;
        transform: scale(1.08);
    }

    100% {
        opacity: 0.35;
        transform: scale(0.96);
    }
}


/* ============================================================
   RESPONSIVIDADE DO BOTÃO WHATSAPP
   Ajustes do botão dentro dos cards em tablet e celular.

   Dicas rápidas:
   - width: aumenta ou diminui o botão.
   - margin-bottom: controla a distância entre o botão e a tabela.
   - transform: translateY() desce ou sobe o botão.
============================================================ */

@media (max-width: 900px) {

    .card-whatsapp-btn {
        /* ====================================================
           TAMANHO DO BOTÃO NO TABLET/CELULAR
           Aumente para deixar maior:
           exemplo: 160px, 170px

           Diminua para deixar menor:
           exemplo: 135px, 120px
        ==================================================== */
        width: 150px;

        /* ====================================================
           DISTÂNCIA ENTRE O BOTÃO E A TABELA DE VALORES
           Quanto menor, mais perto da tabela.
           Quanto maior, mais afastado.
        ==================================================== */
        margin-bottom: -160px;

        /* ====================================================
           POSIÇÃO VERTICAL DO BOTÃO
           Valor positivo desce o botão.
           Valor negativo sobe o botão.

           Exemplo para descer mais:
           transform: translateY(10px);

           Exemplo para subir:
           transform: translateY(-8px);
        ==================================================== */
        transform: translateY(6px);
    }
}


@media (max-width: 480px) {

    .card-whatsapp-btn {
        /* ====================================================
           TAMANHO DO BOTÃO EM CELULARES PEQUENOS
           Aumente se quiser mais destaque.
           Exemplo: 145px ou 150px
        ==================================================== */
        width: 140px;

        /* ====================================================
           DISTÂNCIA ENTRE BOTÃO E TABELA NO CELULAR PEQUENO
           Menor valor deixa mais colado na tabela.
        ==================================================== */
        margin-bottom: -170px;

        /* ====================================================
           DESCER OU SUBIR O BOTÃO NO CELULAR PEQUENO
           Aumente o número para descer mais.
        ==================================================== */
        transform: translateY(8px);
    }
}



/* ============================================================
   18. BOTÃO WHATSAPP NO PLANO MENSAL LIVRE
   Botão com imagem PNG transparente, brilho verde e movimento.

   Imagem usada:
   imagens/botao-whatsapp.png

   Onde alterar:
   - width: tamanho do botão.
   - margin-top: distância entre lista e botão.
   - animation: velocidade do movimento.
============================================================ */


/* Ajusta a coluna direita para receber lista + botão */
.mensal-direita {
    flex-direction: column;
    gap: 14px;
}


/* Botão do WhatsApp no Plano Mensal Livre */
.mensal-whatsapp-btn {
    position: relative;
    z-index: 6;

    display: block;
    width: 170px;
    /* AQUI AUMENTA E DIMINUI O BOTÃO DO WHATSAPP*/
    max-width: 100%;

    margin-top: 20px;

    border-radius: 999px;

    animation: whatsappMensalFlutuando 2.6s ease-in-out infinite;

    filter:
        drop-shadow(0 0 8px rgba(0, 255, 120, 0.55)) drop-shadow(0 0 16px rgba(0, 255, 120, 0.35));

    transition:
        transform 0.22s ease,
        filter 0.22s ease;
}


/* Imagem interna do botão */
.mensal-whatsapp-btn img {
    width: 100%;
    height: auto;
    display: block;

    border-radius: 999px;
}


/* Luz verde pulsando atrás do botão */
.mensal-whatsapp-btn::before {
    content: "";
    position: absolute;
    inset: -5px;

    border-radius: 999px;

    background: rgba(0, 255, 120, 0.28);
    filter: blur(10px);

    opacity: 0.65;
    z-index: -1;

    animation: brilhoWhatsappMensal 1.8s ease-in-out infinite;
}


/* Hover do botão no desktop */
.mensal-whatsapp-btn:hover {
    transform: translateY(-4px) scale(1.06);

    filter:
        drop-shadow(0 0 10px rgba(0, 255, 120, 0.85)) drop-shadow(0 0 24px rgba(0, 255, 120, 0.55));
}


/* Efeito de clique */
.mensal-whatsapp-btn:active {
    transform: scale(0.92);

    filter:
        drop-shadow(0 0 6px rgba(0, 255, 120, 0.95)) drop-shadow(0 0 12px rgba(0, 255, 120, 0.65));
}


/* Movimento suave do botão */
@keyframes whatsappMensalFlutuando {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}


/* Pulso verde do botão */
@keyframes brilhoWhatsappMensal {
    0% {
        opacity: 0.35;
        transform: scale(0.96);
    }

    50% {
        opacity: 0.90;
        transform: scale(1.08);
    }

    100% {
        opacity: 0.35;
        transform: scale(0.96);
    }
}


/* ============================================================
   RESPONSIVIDADE DO BOTÃO WHATSAPP DO PLANO MENSAL
============================================================ */

@media (max-width: 980px) {

    /* No tablet/celular, centraliza melhor a coluna direita */
    .mensal-direita {
        align-items: center;
    }

    .mensal-whatsapp-btn {
        width: 150px;
        margin-top: 8px;
    }
}


@media (max-width: 480px) {

    .mensal-whatsapp-btn {
        width: 135px;
        margin-top: 6px;
    }
}


/* ============================================================
   19. RODAPÉ FINAL DOS PLANOS
   Área inferior com aviso de implantação e botões finais
============================================================ */

.rodape-planos {
    width: 100%;
    max-width: 1180px;
    margin: 26px auto 0;

    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 16px;
}


/* ============================================================
   AVISO DE IMPLANTAÇÃO
============================================================ */

.rodape-aviso {
    min-height: 86px;
    padding: 16px 18px;

    display: flex;
    align-items: center;
    gap: 16px;

    border-radius: 20px;
    border: 1px solid rgba(255, 191, 47, 0.35);

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(0, 0, 0, 0.24);

    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.35),
        inset 0 0 18px rgba(255, 191, 47, 0.035);
}


/* Ícone circular do aviso */
.rodape-aviso-icone {
    width: 52px;
    height: 52px;
    min-width: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 3px solid #ffb400;

    color: #ffb400;
    font-size: 2rem;
    font-weight: 900;

    box-shadow:
        0 0 16px rgba(255, 180, 0, 0.28),
        inset 0 0 10px rgba(255, 180, 0, 0.12);
}


/* Texto do aviso */
.rodape-aviso-texto {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rodape-aviso-texto strong {
    font-size: clamp(0.82rem, 1.2vw, 1rem);
    line-height: 1.2;

    font-weight: 900;
    text-transform: uppercase;

    color: #ffbf2f;
}

.rodape-aviso-texto span {
    font-size: clamp(0.72rem, 1vw, 0.88rem);
    line-height: 1.35;

    color: rgba(255, 255, 255, 0.78);
}


/* ============================================================
   BOTÕES FINAIS DO RODAPÉ
============================================================ */

.rodape-botao {
    min-height: 86px;
    padding: 14px 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    text-decoration: none;

    border-radius: 20px;
    overflow: hidden;

    position: relative;

    transition:
        transform 0.22s ease,
        filter 0.22s ease,
        box-shadow 0.22s ease;
}


/* Ícone dos botões */
.rodape-botao-icone {
    width: 52px;
    height: 52px;
    min-width: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 2rem;
    font-weight: 900;

    background: rgba(255, 255, 255, 0.15);
}


/* Texto dos botões */
.rodape-botao-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rodape-botao-texto strong {
    font-size: clamp(1rem, 1.7vw, 1.45rem);
    line-height: 1;

    font-weight: 900;
    text-transform: uppercase;

    color: #ffffff;
}

.rodape-botao-texto small {
    font-size: clamp(0.66rem, 1vw, 0.88rem);
    line-height: 1.1;

    font-weight: 700;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.82);
}


/* ============================================================
   BOTÃO WHATSAPP DO RODAPÉ
============================================================ */

.rodape-whatsapp {
    border: 1px solid rgba(0, 255, 100, 0.65);

    background:
        radial-gradient(circle at top left, rgba(80, 255, 120, 0.34), transparent 44%),
        linear-gradient(180deg, #15b832 0%, #047418 100%);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.38),
        0 0 24px rgba(0, 255, 100, 0.24),
        inset 0 0 18px rgba(255, 255, 255, 0.10);

    animation: rodapeWhatsappPulso 2.4s ease-in-out infinite;
}

.rodape-whatsapp .rodape-botao-icone {
    background: rgba(255, 255, 255, 0.20);
    color: #ffffff;
}


/* ============================================================
   BOTÃO SITE DO RODAPÉ
============================================================ */

.rodape-site {
    border: 1px solid rgba(0, 170, 255, 0.72);

    background:
        radial-gradient(circle at top left, rgba(0, 220, 255, 0.32), transparent 44%),
        linear-gradient(180deg, #0d8ddb 0%, #075091 100%);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.38),
        0 0 24px rgba(0, 170, 255, 0.22),
        inset 0 0 18px rgba(255, 255, 255, 0.10);
}

.rodape-site .rodape-botao-icone {
    background: rgba(255, 255, 255, 0.20);
    color: #ffffff;
}


/* ============================================================
   HOVER E CLIQUE DOS BOTÕES
============================================================ */

.rodape-botao:hover {
    transform: translateY(-4px) scale(1.02);
    filter: brightness(1.08);
}

.rodape-botao:active {
    transform: scale(0.96);
}


/* Pulso suave do botão WhatsApp final */
@keyframes rodapeWhatsappPulso {
    0% {
        box-shadow:
            0 18px 38px rgba(0, 0, 0, 0.38),
            0 0 18px rgba(0, 255, 100, 0.18),
            inset 0 0 18px rgba(255, 255, 255, 0.10);
    }

    50% {
        box-shadow:
            0 18px 38px rgba(0, 0, 0, 0.38),
            0 0 32px rgba(0, 255, 100, 0.42),
            inset 0 0 22px rgba(255, 255, 255, 0.14);
    }

    100% {
        box-shadow:
            0 18px 38px rgba(0, 0, 0, 0.38),
            0 0 18px rgba(0, 255, 100, 0.18),
            inset 0 0 18px rgba(255, 255, 255, 0.10);
    }
}


/* ============================================================
   20. RESPONSIVIDADE DO RODAPÉ FINAL
============================================================ */

@media (max-width: 980px) {

    /* Em tablet, os blocos ficam empilhados */
    .rodape-planos {
        grid-template-columns: 1fr;
        max-width: 620px;
        gap: 14px;
    }

    .rodape-aviso,
    .rodape-botao {
        min-height: 82px;
    }
}


@media (max-width: 480px) {

    .rodape-planos {
        margin-top: 22px;
    }

    .rodape-aviso {
        padding: 14px;
        border-radius: 18px;
    }

    .rodape-aviso-icone {
        width: 46px;
        height: 46px;
        min-width: 46px;
        font-size: 1.7rem;
    }

    .rodape-botao {
        min-height: 76px;
        padding: 12px 14px;
        border-radius: 18px;
    }

    .rodape-botao-icone {
        width: 46px;
        height: 46px;
        min-width: 46px;
        font-size: 1.65rem;
    }

    .rodape-botao-texto strong {
        font-size: 1rem;
    }

    .rodape-botao-texto small {
        font-size: 0.68rem;
    }
}










/* ============================================================
   21. AJUSTE DO RODAPÉ — KIT INSTALAÇÃO
   Transforma o aviso antigo em uma faixa comercial com imagem.

   Imagem usada:
   imagens/kit_equipamentos.png
============================================================ */


/* ============================================================
   FAIXA DO KIT INSTALAÇÃO
   No desktop:
   - imagem à esquerda
   - texto à direita
============================================================ */

.rodape-kit-instalacao {
    grid-column: 1 / -1;

    min-height: 118px;
    padding: 18px 24px;

    display: grid;
    grid-template-columns: 330px 1fr;
    align-items: center;
    gap: 24px;

    border-radius: 22px;
    border: 1px solid rgba(255, 210, 80, 0.75);

    background:
        linear-gradient(135deg, rgba(255, 191, 47, 0.95), rgba(178, 106, 0, 0.94)),
        radial-gradient(circle at top, rgba(255, 255, 255, 0.35), transparent 45%);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.42),
        0 0 24px rgba(255, 191, 47, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);

    overflow: hidden;
    position: relative;
}


/* ============================================================
   BRILHO ANIMADO NA FAIXA DOURADA
============================================================ */

.rodape-kit-instalacao::before {
    content: "";
    position: absolute;
    top: 0;
    left: -45%;

    width: 36%;
    height: 100%;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.30),
            transparent);

    transform: skewX(-20deg);
    animation: brilhoKitInstalacao 4.5s ease-in-out infinite;

    pointer-events: none;
}


/* ============================================================
   IMAGEM DO KIT
============================================================ */

.rodape-kit-imagem {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;
}

.rodape-kit-imagem img {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;

    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}


/* ============================================================
   TEXTO DO KIT
============================================================ */

.rodape-kit-texto {
    position: relative;
    z-index: 1;

    text-align: left;
}

.rodape-kit-texto strong {
    font-size: clamp(1.1rem, 2.2vw, 1.8rem);
    line-height: 1.08;

    font-weight: 900;
    text-transform: uppercase;

    color: #111111;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.rodape-kit-texto span {
    margin-top: 7px;

    font-size: clamp(0.82rem, 1.35vw, 1.04rem);
    line-height: 1.4;

    font-weight: 700;
    color: rgba(0, 0, 0, 0.84);
}


/* ============================================================
   ANIMAÇÃO DO BRILHO DA FAIXA
============================================================ */

@keyframes brilhoKitInstalacao {
    0% {
        left: -45%;
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    70% {
        left: 115%;
        opacity: 0;
    }

    100% {
        left: 115%;
        opacity: 0;
    }
}


/* ============================================================
   DIREITOS RESERVADOS
   Ano automático vem do PHP no index.php
============================================================ */

.rodape-direitos {
    width: 100%;
    max-width: 1180px;

    margin: 18px auto 0;
    padding: 18px 12px 6px;

    text-align: center;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rodape-direitos p {
    font-size: 0.82rem;
    line-height: 1.4;

    color: rgba(255, 255, 255, 0.58);
}

.rodape-direitos strong {
    color: #ffbf2f;
}


/* ============================================================
   RESPONSIVIDADE DA FAIXA KIT INSTALAÇÃO
   No celular:
   - título em cima
   - imagem no meio
   - texto embaixo
============================================================ */

@media (max-width: 768px) {

    .rodape-kit-instalacao {
        grid-template-columns: 1fr;
        padding: 18px 16px;
        gap: 12px;
        text-align: center;
    }

    /* No celular, o texto fica centralizado */
    .rodape-kit-texto {
        text-align: center;
        align-items: center;
    }

    /* No celular, a imagem fica no meio */
    .rodape-kit-imagem {
        justify-content: center;
    }

    .rodape-kit-imagem img {
        max-width: 260px;
    }
}


@media (max-width: 480px) {

    .rodape-kit-instalacao {
        border-radius: 18px;
        padding: 16px 14px;
    }

    .rodape-kit-imagem img {
        max-width: 230px;
    }

    .rodape-kit-texto strong {
        font-size: 1rem;
        line-height: 1.15;
    }

    .rodape-kit-texto span {
        font-size: 0.78rem;
        line-height: 1.4;
    }

    .rodape-direitos p {
        font-size: 0.76rem;
    }
}



/* ============================================================
   21. RODAPÉ FINAL — AJUSTE PREMIUM
   Faixa de instalação + botões laterais + tecnologias no centro
============================================================ */


/* ============================================================
   CONTAINER GERAL DO RODAPÉ
============================================================ */

.rodape-planos {
    width: 100%;
    max-width: 1180px;
    margin: 26px auto 0;

    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* ============================================================
   FAIXA KIT INSTALAÇÃO
   Desktop:
   - texto à esquerda
   - imagem à direita
============================================================ */

.rodape-kit-instalacao {
    width: 100%;
    min-height: 120px;
    padding: 18px 24px;

    display: grid;
    grid-template-columns: 1fr 320px;
    align-items: center;
    gap: 24px;

    border-radius: 22px;
    border: 1px solid rgba(255, 210, 80, 0.75);

    background:
        linear-gradient(135deg, rgba(255, 191, 47, 0.96), rgba(176, 104, 0, 0.94)),
        radial-gradient(circle at top, rgba(255, 255, 255, 0.35), transparent 45%);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.42),
        0 0 24px rgba(255, 191, 47, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);

    position: relative;
    overflow: hidden;
}


/* Brilho animado passando na faixa */
.rodape-kit-instalacao::before {
    content: "";
    position: absolute;
    top: 0;
    left: -45%;

    width: 36%;
    height: 100%;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.30),
            transparent);

    transform: skewX(-20deg);
    animation: brilhoKitInstalacao 4.5s ease-in-out infinite;

    pointer-events: none;
}


/* Texto da faixa */
.rodape-kit-texto {
    position: relative;
    z-index: 1;
    text-align: left;
}

.rodape-kit-texto strong {
    display: block;

    font-size: clamp(1.15rem, 2.2vw, 2rem);
    line-height: 1.08;

    font-weight: 900;
    text-transform: uppercase;

    color: #111111;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.30),
        0 0 10px rgba(255, 220, 120, 0.18);
}

.rodape-kit-texto span {
    display: block;
    margin-top: 8px;

    font-size: clamp(0.82rem, 1.35vw, 1.08rem);
    line-height: 1.42;

    font-weight: 800;
    color: rgba(0, 0, 0, 0.84);

    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}


/* Imagem do kit */
.rodape-kit-imagem {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;
}

.rodape-kit-imagem img {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;

    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}


/* Animação do brilho */
@keyframes brilhoKitInstalacao {
    0% {
        left: -45%;
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    70% {
        left: 115%;
        opacity: 0;
    }

    100% {
        left: 115%;
        opacity: 0;
    }
}


/* ============================================================
   ÁREA DOS BOTÕES + LOGOS
   WhatsApp | Tecnologias | Site
============================================================ */

.rodape-botoes-area {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    align-items: center;
    gap: 18px;
}


/* ============================================================
   BOTÕES DO RODAPÉ
============================================================ */

.rodape-botao {
    min-height: 86px;
    padding: 14px 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    text-decoration: none;

    border-radius: 20px;
    overflow: hidden;

    position: relative;

    transition:
        transform 0.22s ease,
        filter 0.22s ease,
        box-shadow 0.22s ease;
}

.rodape-botao-icone {
    width: 52px;
    height: 52px;
    min-width: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    font-size: 2rem;
    font-weight: 900;

    background: rgba(255, 255, 255, 0.16);
}

.rodape-botao-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rodape-botao-texto strong {
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    line-height: 1;

    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
}

.rodape-botao-texto small {
    font-size: clamp(0.66rem, 1vw, 0.9rem);
    line-height: 1.1;

    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.84);
}


/* Botão WhatsApp */
.rodape-whatsapp {
    justify-self: start;

    border: 1px solid rgba(0, 255, 100, 0.65);

    background:
        radial-gradient(circle at top left, rgba(80, 255, 120, 0.34), transparent 44%),
        linear-gradient(180deg, #15b832 0%, #047418 100%);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.38),
        0 0 24px rgba(0, 255, 100, 0.24),
        inset 0 0 18px rgba(255, 255, 255, 0.10);

    animation: rodapeWhatsappPulso 2.4s ease-in-out infinite;
}


/* Botão Site */
.rodape-site {
    justify-self: end;

    border: 1px solid rgba(0, 170, 255, 0.72);

    background:
        radial-gradient(circle at top left, rgba(0, 220, 255, 0.32), transparent 44%),
        linear-gradient(180deg, #0d8ddb 0%, #075091 100%);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.38),
        0 0 24px rgba(0, 170, 255, 0.22),
        inset 0 0 18px rgba(255, 255, 255, 0.10);
}


/* Hover e clique */
.rodape-botao:hover {
    transform: translateY(-4px) scale(1.02);
    filter: brightness(1.08);
}

.rodape-botao:active {
    transform: scale(0.96);
}


/* Pulso do botão WhatsApp */
@keyframes rodapeWhatsappPulso {
    0% {
        box-shadow:
            0 18px 38px rgba(0, 0, 0, 0.38),
            0 0 18px rgba(0, 255, 100, 0.18),
            inset 0 0 18px rgba(255, 255, 255, 0.10);
    }

    50% {
        box-shadow:
            0 18px 38px rgba(0, 0, 0, 0.38),
            0 0 32px rgba(0, 255, 100, 0.42),
            inset 0 0 22px rgba(255, 255, 255, 0.14);
    }

    100% {
        box-shadow:
            0 18px 38px rgba(0, 0, 0, 0.38),
            0 0 18px rgba(0, 255, 100, 0.18),
            inset 0 0 18px rgba(255, 255, 255, 0.10);
    }
}


/* ============================================================
   CENTRO — LOGOS DAS TECNOLOGIAS
   Organiza as tecnologias em 2 fileiras de 4 + 4

   Desktop:
   - 4 colunas
   - 2 linhas

   Celular:
   - mantém 4 colunas
   - 2 linhas
============================================================ */

.rodape-techs {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   GRADE DAS TECNOLOGIAS
   Aqui controlamos a quantidade de logos por linha.

   Para 4 por linha:
   grid-template-columns: repeat(4, 1fr);

   Para 3 por linha:
   grid-template-columns: repeat(3, 1fr);
============================================================ */

.rodape-techs-grid {
    display: grid;

    /* 4 logos por linha */
    grid-template-columns: repeat(4, 1fr);

    gap: 12px 14px;

    align-items: center;
    justify-items: center;
}


/* ============================================================
   CADA LOGO / CARD DE TECNOLOGIA
   Fundo dourado suave para destacar logos com texto escuro.

   Onde alterar:
   - background: muda o tom do dourado
   - box-shadow: controla brilho externo e interno
============================================================ */

.tech-item {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    /* Fundo dourado suave do escuro para o claro */
    /* background:
    radial-gradient(circle at center, rgba(255, 238, 190, 0.96) 0%, rgba(255, 220, 120, 0.90) 40%, rgba(210, 150, 35, 0.78) 72%, rgba(85, 48, 0, 0.86) 100%);
     */

    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.98) 0%, rgba(225, 230, 235, 0.94) 38%, rgba(170, 178, 188, 0.84) 70%, rgba(70, 76, 84, 0.88) 100%);
    border: 1px solid rgba(255, 227, 145, 0.50);

    box-shadow:
        0 0 12px rgba(255, 200, 0, 0.18),
        0 0 18px rgba(255, 140, 0, 0.12),
        inset 0 0 10px rgba(255, 255, 255, 0.14),
        inset 0 -6px 10px rgba(90, 45, 0, 0.18);

    animation:
        rgbTechGlow 4.5s linear infinite,
        techFloat 2.8s ease-in-out infinite;
}

/* ============================================================
   IMAGEM DENTRO DE CADA LOGO
   Leve contraste para melhorar a leitura sobre o dourado
============================================================ */

.tech-item img {
    max-width: 38px;
    max-height: 38px;
    width: auto;
    height: auto;
    display: block;

    filter:
        drop-shadow(0 1px 2px rgba(255, 255, 255, 0.15)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.18));
}


/* Brilho RGB */
@keyframes rgbTechGlow {
    0% {
        box-shadow:
            0 0 12px rgba(0, 255, 255, 0.20),
            0 0 18px rgba(255, 0, 200, 0.10),
            inset 0 0 8px rgba(255, 255, 255, 0.04);
    }

    25% {
        box-shadow:
            0 0 16px rgba(0, 255, 120, 0.24),
            0 0 20px rgba(255, 200, 0, 0.14),
            inset 0 0 8px rgba(255, 255, 255, 0.05);
    }

    50% {
        box-shadow:
            0 0 16px rgba(0, 170, 255, 0.26),
            0 0 22px rgba(170, 0, 255, 0.16),
            inset 0 0 8px rgba(255, 255, 255, 0.05);
    }

    75% {
        box-shadow:
            0 0 16px rgba(255, 80, 80, 0.22),
            0 0 22px rgba(255, 150, 0, 0.16),
            inset 0 0 8px rgba(255, 255, 255, 0.05);
    }

    100% {
        box-shadow:
            0 0 12px rgba(0, 255, 255, 0.20),
            0 0 18px rgba(255, 0, 200, 0.10),
            inset 0 0 8px rgba(255, 255, 255, 0.04);
    }
}


/* Movimento sobe e desce */
@keyframes techFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}


/* ============================================================
   DIREITOS RESERVADOS
============================================================ */

.rodape-direitos {
    width: 100%;
    max-width: 1180px;

    margin: 18px auto 0;
    padding: 18px 12px 6px;

    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rodape-direitos p {
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.58);
}

.rodape-direitos strong {
    color: #ffbf2f;
}


/* ============================================================
   RESPONSIVIDADE — TABLET E CELULAR
============================================================ */

@media (max-width: 900px) {

    /* Faixa laranja empilhada */
    .rodape-kit-instalacao {
        grid-template-columns: 1fr;
        padding: 18px 16px;
        gap: 14px;
        text-align: center;
    }

    /* No celular: texto em cima, imagem embaixo */
    .rodape-kit-texto {
        text-align: center;
        order: 1;
    }

    .rodape-kit-imagem {
        order: 2;
        justify-content: center;
    }

    .rodape-kit-imagem img {
        max-width: 250px;
    }

    /* Área de botões e logos empilhada */
    .rodape-botoes-area {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Ordem no celular:
       1) WhatsApp
       2) tecnologias
       3) site
    */
    .rodape-whatsapp {
        justify-self: center;
        order: 1;
        width: 100%;
        max-width: 420px;
    }

    .rodape-techs {
        order: 2;
    }

    .rodape-site {
        justify-self: center;
        order: 3;
        width: 100%;
        max-width: 420px;
    }
}


@media (max-width: 480px) {

    .rodape-kit-instalacao {
        border-radius: 18px;
        padding: 16px 14px;
    }

    .rodape-kit-imagem img {
        max-width: 220px;
    }

    .rodape-kit-texto strong {
        font-size: 1rem;
        line-height: 1.15;
    }

    .rodape-kit-texto span {
        font-size: 0.78rem;
        line-height: 1.4;
    }

    .rodape-botao {
        min-height: 76px;
        padding: 12px 14px;
        border-radius: 18px;
    }

    .rodape-botao-icone {
        width: 46px;
        height: 46px;
        min-width: 46px;
        font-size: 1.65rem;
    }

    .rodape-botao-texto strong {
        font-size: 1rem;
    }

    .rodape-botao-texto small {
        font-size: 0.68rem;
    }

    .rodape-techs-grid {
        gap: 10px 10px;
    }

    .tech-item {
        width: 58px;
        height: 58px;
        border-radius: 14px;
    }

    .tech-item img {
        max-width: 34px;
        max-height: 34px;
    }

    .rodape-direitos p {
        font-size: 0.76rem;
    }
}

/* ============================================================
   AJUSTE FINAL — TAMANHO DOS ÍCONES DOS BENEFÍCIOS
   Este bloco força o tamanho dos ícones PNG dentro do círculo.

   Onde alterar:
   - width/height do .beneficio-icone = tamanho do círculo
   - width/height do .beneficio-icone img = tamanho da imagem dentro
============================================================ */

.beneficios .beneficio-card .beneficio-icone {
    width: 88px;
    height: 88px;
    min-width: 88px;
    min-height: 88px;
}

.beneficios .beneficio-card .beneficio-icone img {
    width: 62px;
    height: 62px;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

/* ============================================================
   FAIXA — KIT INSTALAÇÃO
   Faixa dourada com selo, texto central e imagem dos produtos
============================================================ */

.faixa-kit-instalacao {
    width: 100%;
    margin: 18px 0 24px;
    padding: 16px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    border-radius: 24px;

    background:
        linear-gradient(135deg, #f0b126 0%, #d99616 45%, #c9850a 100%);

    border: 1px solid rgba(255, 225, 140, 0.55);

    box-shadow:
        0 0 20px rgba(255, 176, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}


/* ============================================================
   SELO DO KIT
============================================================ */

.faixa-kit-selo {
    flex: 0 0 auto;
}

.faixa-kit-selo img {
    width: 180px;
    max-width: 100%;
    height: auto;
    display: block;
}


/* ============================================================
   TEXTO DO KIT
============================================================ */

.faixa-kit-texto {
    flex: 1;
    text-align: center;
}

.faixa-kit-titulo {
    display: block;

    font-size: 2rem;
    font-weight: 900;
    line-height: 1.1;
    color: #111111;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18);
}

.faixa-kit-descricao {
    margin-top: 8px;

    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
    color: #1a1a1a;
}


/* ============================================================
   IMAGEM DOS PRODUTOS
============================================================ */

.faixa-kit-produtos {
    flex: 0 0 auto;
}

.faixa-kit-produtos img {
    width: 255px;
    max-width: 100%;
    height: auto;
    display: block;
}


/* ============================================================
   RESPONSIVIDADE — TABLET
============================================================ */

@media (max-width: 900px) {

    .faixa-kit-instalacao {
        gap: 14px;
        padding: 14px 16px;
    }

    .faixa-kit-selo img {
        width: 150px;
    }

    .faixa-kit-titulo {
        font-size: 1.55rem;
    }

    .faixa-kit-descricao {
        font-size: 0.98rem;
    }

    .faixa-kit-produtos img {
        width: 210px;
    }
}


/* ============================================================
   RESPONSIVIDADE — CELULAR
============================================================ */

@media (max-width: 768px) {

    .faixa-kit-instalacao {
        padding: 16px 14px;

        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .faixa-kit-selo img {
        width: 170px;
    }

    .faixa-kit-texto {
        width: 100%;
    }

    .faixa-kit-titulo {
        font-size: 1.45rem;
        line-height: 1.2;
    }

    .faixa-kit-descricao {
        margin-top: 8px;
        font-size: 0.95rem;
        line-height: 1.35;
    }

    .faixa-kit-produtos img {
        width: 210px;
    }
}


/* ============================================================
   RESPONSIVIDADE — CELULAR PEQUENO
============================================================ */

@media (max-width: 480px) {

    .faixa-kit-instalacao {
        border-radius: 20px;
        padding: 14px 12px;
    }

    .faixa-kit-selo img {
        width: 155px;
    }

    .faixa-kit-titulo {
        font-size: 1.25rem;
    }

    .faixa-kit-descricao {
        font-size: 0.88rem;
    }

    .faixa-kit-produtos img {
        width: 185px;
    }
}
/*=========================================================================   Pague com CARTÕES   ==========================*/

/* ============================================================
   FORMAS DE PAGAMENTOS
   Área com banners PIX e Cartão + texto final de parcelamento.

   Local:
   - Abaixo dos cards dos planos fidelidade
   - Acima da faixa Kit Instalação
============================================================ */

.formas-pagamento {
    width: 100%;
    max-width: 980px;

    margin: 28px auto 22px;
    padding: 22px 18px 18px;

    border-radius: 26px;

    background:
        linear-gradient(180deg, rgba(20, 20, 20, 0.97), rgba(8, 8, 8, 0.97));

    border: 1px solid rgba(255, 176, 0, 0.48);

    box-shadow:
        0 0 24px rgba(255, 176, 0, 0.14),
        0 16px 38px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}


/* ============================================================
   TÍTULO — FORMAS DE PAGAMENTOS
============================================================ */

.formas-pagamento-topo {
    text-align: center;
    margin-bottom: 18px;
}

.formas-pagamento-topo h2 {
    margin: 0;

    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 0.04em;

    color: #ffb300;

    text-shadow:
        0 0 12px rgba(255, 176, 0, 0.22),
        0 2px 4px rgba(0, 0, 0, 0.65);
}


/* ============================================================
   IMAGENS DE PAGAMENTO
   Desktop: 2 imagens lado a lado
============================================================ */

.formas-pagamento-imagens {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;

    align-items: center;
}




/* ============================================================
   CADA BANNER DE PAGAMENTO
   BANNER DE PAGAMENTO COM BORDA RGB
   Cria efeito de luz contínua em volta das imagens
============================================================ */

.pagamento-banner {
    position: relative;
    overflow: hidden;

    padding: 3px;
    border-radius: 10px;

    background:
        linear-gradient(
            120deg,
            #ff004c,
            #ffb300,
            #00eaff,
            #0066ff,
            #8a2cff,
            #ff004c
        );

    background-size: 400% 400%;

    box-shadow:
        0 0 18px rgba(255, 176, 0, 0.22),
        0 0 24px rgba(0, 200, 255, 0.12),
        0 12px 28px rgba(0, 0, 0, 0.35);

    animation: rgbPagamento 5s linear infinite;
}


/* ============================================================
   IMAGEM DENTRO DO BANNER
   Mantém a imagem encaixada dentro da borda RGB
============================================================ */

.pagamento-banner img {
    width: 100%;
    height: auto;
    display: block;

    border-radius: 7px;

    position: relative;
    z-index: 1;
}


/* ============================================================
   ANIMAÇÃO RGB DOS BANNERS DE PAGAMENTO
============================================================ */

@keyframes rgbPagamento {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* ============================================================
   TEXTO FINAL DO PARCELAMENTO
   Esse texto vem do painel administrativo.
============================================================ */

.formas-pagamento-rodape {
    margin-top: 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.formas-pagamento-icone {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 1rem;

    background:
        radial-gradient(circle, #ffd465 0%, #ffb300 70%, #f29400 100%);

    box-shadow:
        0 0 14px rgba(255, 176, 0, 0.28);
}

.formas-pagamento-rodape strong {
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-align: center;

    color: #ffbf2b;

    text-shadow:
        0 0 10px rgba(255, 176, 0, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.70);
}



/* ============================================================
   DESTAQUE DO NÚMERO + X DO PARCELAMENTO
   Exemplo: 3X, 6X, 10X

   Efeito:
   - Maior destaque visual
   - Brilho dourado/ branco
   - Movimento suave de vai e vem
============================================================ */

.numero-parcela-destaque {
    display: inline-block;

    /* Aumenta o 3X em relação ao restante do texto */
    font-size: 1.85em;
    font-weight: 900;
    line-height: 0.85;

    color: #ffffff;

    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.70),
        0 0 16px rgba(255, 191, 43, 0.65),
        0 0 28px rgba(255, 140, 0, 0.42),
        0 3px 5px rgba(0, 0, 0, 0.75);

    animation: parcelaVaiEVem 1.8s ease-in-out infinite;
}


/* ============================================================
   ANIMAÇÃO DO 3X / 6X
   Movimento suave para chamar atenção sem exagerar
============================================================ */

@keyframes parcelaVaiEVem {
    0% {
        transform: translateY(2px) scale(1);
    }

    50% {
        transform: translateY(-3px) scale(1.06);
    }

    100% {
        transform: translateY(2px) scale(1);
    }
}


/* ============================================================
   FORMAS DE PAGAMENTOS — CELULAR
   No celular:
   - uma imagem embaixo da outra
   - texto final abaixo das duas imagens
============================================================ */

@media (max-width: 768px) {

    .formas-pagamento {
        max-width: 92%;
        margin: 24px auto 20px;
        padding: 18px 14px 16px;

        border-radius: 22px;
    }

    .formas-pagamento-topo {
        margin-bottom: 14px;
    }

    .formas-pagamento-topo h2 {
        font-size: 1.35rem;
        line-height: 1.2;
    }

    .formas-pagamento-imagens {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .pagamento-banner {
        border-radius: 6px;
    }

    .formas-pagamento-rodape {
        margin-top: 14px;
        flex-direction: column;
        gap: 8px;
    }

    .formas-pagamento-rodape strong {
        font-size: 0.98rem;
        line-height: 1.28;
    }
}





/*=========================================================================   Pague com CARTÕES   ==========================*/

/* ============================================================
   6. RESPONSIVIDADE — CELULARES PEQUENOS
   Ajustes para telas até 480px
============================================================ */

@media (max-width: 480px) {

    /* ========================================================
       ALTURA DO TOPO EM CELULARES PEQUENOS
       Aumente se precisar de mais espaço para imagem/textos.
    ======================================================== */
    .hero-topo {
        min-height: 390px;
    }


    /* ========================================================
       CONTEÚDO GERAL EM CELULARES PEQUENOS
       Controla o espaçamento lateral e a posição geral.
       
       Para descer tudo junto:
       aumente o padding-top.
    ======================================================== */
    .hero-conteudo {
        padding-top: 92px;
        padding-left: 14px;
        padding-right: 14px;
    }


    /* ========================================================
       LOGO EM CELULARES PEQUENOS
       Ajuste o tamanho da logo aqui.
    ======================================================== */
    .hero-logo {
        width: min(210px, 78vw);
        margin-bottom: 10px;
    }


    /* ========================================================
       TÍTULO EM CELULARES PEQUENOS
       Para descer somente o título: TRANSFORME SUA TV
            EM UMA MÁQUINA DE VENDAS!
       aumente o margin-top.
       
       Para deixar menor ou maior:
       altere o clamp().
    ======================================================== */
    .hero-conteudo h1 {
        margin-top: 20px;
        font-size: clamp(1.1rem, 5.8vw, 1.65rem);
        opacity: 0.90;
    }


    /* ========================================================
       SLOGAN EM CELULARES PEQUENOS
       Para descer:  "COMUNIQUE • ENCANTE • VENDA MAIS" 
       aumente o margin-top.
    ======================================================== */
    .hero-slogan {
        margin-top: 24px;
        font-size: 0.78rem;
        /* Aumenta ou diminui o "COMUNIQUE • ENCANTE • VENDA MAIS" */
        letter-spacing: 1.2px;
    }
}


@media (max-width: 1024px) {

    /* ========================================================
       BENEFÍCIOS NO TABLET
       Mantém 3 colunas para formar 2 linhas completas.
    ======================================================== */
    .beneficios-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 900px;
    }
}


@media (max-width: 768px) {

    /* Reduz o espaçamento da seção no celular */
    .beneficios {
        padding: 38px 14px 28px;
    }

    /* Em celular, os cards ficam em 2 colunas */
    .beneficios-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .beneficio-card {
        min-height: 160px;
        padding: 18px 12px;
        border-radius: 18px;
    }

    /* ============================================================
   ÍCONES DOS BENEFÍCIOS NO CELULAR
============================================================ */

    .beneficio-icone {
        width: 64px;
        height: 64px;
    }

    .beneficio-icone img {
        width: 36px;
        height: 36px;
    }

    .beneficio-card h3 {
        font-size: 0.86rem;
    }

    .beneficio-card p {
        font-size: 0.76rem;
    }
}


@media (max-width: 420px) {

    /* Em celular bem pequeno, continua 2 colunas,
       mas mais compacto para não ficar muito alto */
    .beneficios-grid {
        gap: 10px;
    }

    .beneficio-card {
        min-height: 150px;
        padding: 16px 10px;
    }

    .beneficio-card h3 {
        font-size: 0.78rem;
    }

    .beneficio-card p {
        font-size: 0.71rem;
    }
}

/* ============================================================
   ÍCONES DOS BENEFÍCIOS EM CELULARES PEQUENOS
============================================================ */

.beneficio-icone {
    width: 58px;
    height: 58px;
    margin-bottom: 10px;
}

.beneficio-icone img {
    width: 32px;
    height: 32px;
}



/* ============================================================
   12. RESPONSIVIDADE DOS PLANOS FIDELIDADE
============================================================ */

@media (max-width: 1050px) {

    /* Tablet: mantém boa largura e pode quebrar se necessário */
    .cards-planos-grid {
        gap: 18px;
    }

    .card-conteudo {
        padding: 20px 16px 16px;
    }

    .card-selo {
        width: 66px;
        right: 16px;
    }

    .linha-preco {
        grid-template-columns: 1fr 108px;
    }
}


@media (max-width: 900px) {

    /* Em telas menores, os cards passam para uma coluna */
    .cards-planos-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    .card-plano {
        border-radius: 24px;
    }

    .card-logo-plano {
        width: 72%;
    }

    .card-inclusos {
        max-width: 78%;
    }

    .card-selo {
        width: 78px;
        top: 34%;
    }
}


@media (max-width: 480px) {

    .fidelidade-area {
        margin-top: 30px;
    }

    .fidelidade-titulo {
        gap: 8px;
        margin-bottom: 18px;
    }

    .fidelidade-titulo span {
        width: 58px;
    }

    .fidelidade-titulo h2 {
        font-size: 1.32rem;
    }

    .cards-planos-grid {
        max-width: 360px;
        gap: 18px;
    }

    .card-conteudo {
        padding: 18px 14px 14px;
    }

    .card-logo-plano {
        width: 78%;
        margin-bottom: 7px;
    }

    .card-subtitulo {
        font-size: 0.72rem;
        margin-bottom: 12px;
    }

    .card-inclusos {
        max-width: 76%;
    }

    .card-inclusos h3 {
        font-size: 0.72rem;
        margin-bottom: 7px;
    }

    .card-inclusos li {
        font-size: 0.68rem;
        margin-bottom: 6px;
        line-height: 1.22;
    }

    .card-selo {
        width: 62px;
        right: 14px;
        top: 34%;
    }

    .linha-preco {
        grid-template-columns: 1fr 96px;
        min-height: 34px;
    }

    .linha-preco span {
        padding: 0 9px;
        font-size: 0.62rem;
    }

    .linha-preco strong {
        padding: 0 7px;
        font-size: 0.68rem;
    }
}


/* ============================================================
   KIT INSTALAÇÃO — QUEBRA SOMENTE NO CELULAR
   Desktop: tudo na mesma linha
   Celular: taxa vai para linha de baixo
============================================================ */

/* Computador / telas maiores */
.kit-titulo {
    display: block;
    white-space: nowrap;
}

.kit-taxa-mobile {
    display: inline;
}


/* Somente celular */
@media (max-width: 480px) {

    .kit-titulo {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    .kit-taxa-mobile {
        display: block;
        margin-top: 3px;
    }
}