/* =========================================================================
   REFINAMENTO VISUAL — Rádio Tools
   Carregada por último, DEPOIS do tema. É de propósito uma camada separada:
   o style.css é o tema Digimax de prateleira, e mexer nele quebraria páginas
   sem aviso. Aqui só se ajusta o que aparece na tela do cliente.
   ========================================================================= */

:root {
    --rt-roxo: #7c4fe0;
    --rt-roxo-escuro: #5b32b8;
    --rt-tinta: #171a21;
    --rt-corpo: #4a5568;
    --rt-suave: #8a94a6;
    --rt-linha: #e8eaf0;
    --rt-fundo: #f7f8fb;
}

/* ---- Tipografia -------------------------------------------------------
   Títulos apertados e escuros, texto com respiro. É o que mais separa um
   site caro de um barato, e não custa nada. */
body {
    color: var(--rt-corpo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--rt-tinta);
    letter-spacing: -0.022em;
}

.section-heading h2 {
    font-weight: 700;
    line-height: 1.18;
}

.section-heading p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--rt-suave);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

p { line-height: 1.72; }

/* o tema deixa vários títulos em caixa alta forçada, o que grita mais do
   que comunica; caixa alta fica só nos rótulos pequenos */
.about-content h2,
.goal-content h2,
.content-inner h2 { text-transform: none; }

/* ---- Superfícies ------------------------------------------------------
   Sombra difusa e borda de 1px em vez de sombra dura: a peça parece
   apoiada na página em vez de colada. */
.single-service,
.single-price-plan,
.card,
.single-team,
.single-testimonial {
    border: 1px solid var(--rt-linha);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(23, 26, 33, .04), 0 8px 24px rgba(23, 26, 33, .05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.single-service:hover,
.single-price-plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(23, 26, 33, .05), 0 18px 44px rgba(23, 26, 33, .10);
    border-color: #d9ddea;
}

.bg-grey { background-color: var(--rt-fundo) !important; }

.single-service h3 { font-size: 21px; }
.single-service p  { color: var(--rt-suave); font-size: 15.5px; }

/* ---- Botões -----------------------------------------------------------
   Alvo maior, cantos arredondados e um leve levantar no hover. */
.btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 13px 30px;
    /* 44px é o mínimo confortável para o dedo; o tema deixava em 41 */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-bordered.active,
.btn-bordered:hover {
    box-shadow: 0 10px 24px rgba(124, 79, 224, .28);
}

/* respeita quem pediu menos animação no sistema */
@media (prefers-reduced-motion: reduce) {
    .btn, .single-service, .single-price-plan { transition: none; }
    .btn:hover, .single-service:hover, .single-price-plan:hover { transform: none; }
}

/* ---- Plano Único ------------------------------------------------------ */
.plan-unico {
    background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
    border: 1px solid #e3dcfa;
    box-shadow: 0 2px 6px rgba(23, 26, 33, .05), 0 24px 60px rgba(91, 50, 184, .12);
}

.plan-kicker {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--rt-roxo-escuro);
    background: #f0ebff;
    border-radius: 999px;
    padding: 6px 14px;
}

.plan-unico .plan-title h3 { font-size: 34px; font-weight: 700; }
.plan-unico .plan-title p  { color: var(--rt-suave); font-size: 16.5px; }

.plan-group {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--rt-suave);
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--rt-linha);
}

/* o tema centraliza a lista do plano; com duas colunas de itens, alinhar à
   esquerda é o que deixa o olho descer a lista */
.plan-unico .plan-features { list-style: none; padding: 0; margin: 0; }

.plan-unico .plan-features li {
    position: relative;
    padding: 7px 0 7px 28px;
    font-size: 15.5px;
    color: var(--rt-corpo);
    text-align: left;
}

.plan-unico .plan-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #eee7ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b32b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/11px no-repeat;
}

.plan-tag {
    display: inline-block;
    margin-left: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #12161f;
    background: #f0b429;
    border-radius: 999px;
    padding: 2px 8px;
    vertical-align: middle;
}

.plan-note { font-size: 13.5px; color: var(--rt-suave); }

/* isca de robô no formulário: fora da tela, mas sem display:none — robô
   esperto ignora campo escondido por display */
.cf-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Tarja de cookies -------------------------------------------------- */
.rt-cookies {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    max-width: 880px;
    margin: 0 auto;
    padding: 16px 20px;
    background: #12161f;
    color: #d7dfea;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .3);
    font-size: 14.5px;
    line-height: 1.55;
}
.rt-cookies p { margin: 0; flex: 1 1 320px; }
.rt-cookies a { color: #f0b429; text-decoration: underline; }
.rt-cookies-btns { display: flex; gap: 10px; flex: 0 0 auto; }
.rt-cookies button {
    border: 0; border-radius: 999px; padding: 11px 22px; min-height: 44px;
    font-weight: 600; font-size: 14px; cursor: pointer;
}
.rt-c-nao { background: transparent; color: #8fa3bf; border: 1px solid #33415a !important; }
.rt-c-nao:hover { color: #d7dfea; }
.rt-c-sim { background: #7c4fe0; color: #fff; }
.rt-c-sim:hover { background: #6b3fd0; }
@media (max-width: 575.98px) {
    .rt-cookies { left: 10px; right: 10px; bottom: 10px; padding: 14px; }
    .rt-cookies-btns { width: 100%; }
    .rt-cookies button { flex: 1; }
}

/* ---- Cabeçalho --------------------------------------------------------
   O nav tem data-aos="zoom-out", que parte de scale(1.2) e deveria voltar a
   1 quando entra na tela. A classe aos-animate chega, mas o transform fica
   preso em 1.2: o cabeçalho inteiro renderizava 20% maior que o previsto,
   com a logo desproporcional e o "Fale Conosco" cortado na direita (o
   container media 1368px dentro de uma janela de 1280). Fixar em none
   devolve o tamanho certo — a animação já não acontecia mesmo. */
nav.navbar[data-aos] {
    transform: none !important;
    opacity: 1 !important;
}

.navbar-nav .nav-link { font-weight: 500; }

/* No celular o botão "Fale Conosco" do topo ficava cortado e ainda saía uns
   8px para fora da tela (defeito do tema, não da faixa nova). Some abaixo de
   992px: o menu do hamburguer e o formulário no rodapé cobrem o contato. */
@media (max-width: 991.98px) {
    .navbar-nav.action { display: none !important; }
}

.breadcrumb-area .breadcrumb-content h2 { letter-spacing: .01em; }

/* imagem nunca estoura o container, em nenhuma página */
img { max-width: 100%; height: auto; }

/* foco visível para quem navega pelo teclado — o tema removia sem repor */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(124, 79, 224, .45);
    outline-offset: 2px;
}