/* -------------------------------------------

Rolagem por seção e animações extras (js/secoes.js).

Arquivo à parte de propósito: o style.css é compilado do scss/ pelo Prepros,
e uma mudança feita só nele some na próxima compilação.

------------------------------------------- */

:root {
    --sec-verde: rgba(13, 255, 0, 1);
}

/* A rolagem é conduzida pelo script; o navegador não deve suavizar por cima. */
html {
    scroll-behavior: auto;
}

/* títulos palavra por palavra */
.sec-palavra {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    /* folga para descendentes (g, p, ç) não serem cortados pela máscara */
    padding-bottom: .12em;
    margin-bottom: -.12em;
}

.sec-palavra-in {
    display: inline-block;
    will-change: transform;
}

/* planos: cartões em HTML no mesmo desenho das antigas imagens (fundo preto,
   gigas grandes, pílula de contorno verde, preço). Tamanhos em cqi: seguem a
   largura da coluna, então o cartão se mantém proporcional em qualquer tela. */
#planos .mil-team-list .col-sm-6 {
    container-type: inline-size;
}

/* A coluna de planos anda para a esquerda para a parte de baixo do mapa do
   banner não passar por cima do cartão de 30GB (medido: 74 px de sobreposição
   com a tela de 1920 px). Abaixo de 992 px o mapa some e nada muda. */
@media screen and (min-width: 992px) {
    #planos .mil-team-list {
        margin-left: -110px;
        margin-right: 110px;
    }

    /* A seção inteira cabe numa tela, para a rolagem parar uma vez só nela
       (pedido do usuário). A coluna da direita mede 60 px do rótulo + 3,67 x a
       largura do cartão; a largura sai da altura da tela, com 210 px de folga
       para o cabeçalho e as margens. 30 px = recuo lateral da coluna. */
    #planos .mil-team-list .col-sm-6 {
        flex: 0 0 min(50%, calc((100vh - 210px) * .272 + 30px));
        max-width: min(50%, calc((100vh - 210px) * .272 + 30px));
    }
}

.sec-plano {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4cqi;
    padding: 5cqi 5cqi 5.5cqi;
    border-radius: 7cqi;
    background-color: #000;
    color: #fff;
    text-align: center;
    line-height: 1;
    text-decoration: none;
    transition: translate .4s cubic-bezier(0, 0, .3642, 1);
}

.sec-plano:hover,
.sec-plano:focus-visible {
    color: #fff;
    translate: 0 -6px;
}

.sec-plano:focus-visible {
    outline: 3px solid var(--sec-verde);
    outline-offset: 3px;
}

/* 3D ao passar o mouse (js/secoes.js): camadas em profundidades diferentes */
.sec-plano-3d {
    position: relative;
    transform-style: preserve-3d;
}

.sec-plano-3d:hover,
.sec-plano-3d:focus-visible {
    translate: none; /* o 3D substitui o levantar simples */
}

.sec-plano-3d .sec-plano-gb {
    transform: translateZ(40px);
}

.sec-plano-3d .sec-plano-pilula {
    transform: translateZ(25px);
}

.sec-plano-3d .sec-plano-preco {
    transform: translateZ(50px);
}

.sec-plano-3d .sec-plano-extra {
    transform: translateZ(15px);
}

/* brilho que segue o mouse */
.sec-plano-3d::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--sec-mx, 50%) var(--sec-my, 50%), rgba(13, 255, 0, .22), rgba(13, 255, 0, 0) 55%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}

.sec-plano-3d:hover::after {
    opacity: 1;
}

.sec-plano-gb {
    font-size: 25cqi;
    font-weight: 800;
    letter-spacing: -.02em;
}

.sec-plano-pilula {
    display: flex;
    align-items: center;
    gap: 3cqi;
    margin: 3.5cqi 0 3cqi;
    padding: 2.5cqi 5cqi;
    border: max(2px, .8cqi) solid var(--sec-verde);
    border-radius: 6cqi;
    font-size: max(10px, 4.6cqi);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
}

.sec-plano-ilimitado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2cqi;
}

.sec-plano-icones {
    display: flex;
    gap: 1.6cqi;
    font-size: 7cqi;
}

.sec-plano-mais {
    font-size: 9cqi;
}

.sec-plano-acumula {
    text-align: left;
}

.sec-plano-preco {
    display: flex;
    align-items: flex-start;
    font-size: 19cqi;
    font-weight: 800;
    letter-spacing: -.02em;
}

.sec-plano-preco small {
    margin: .12em .06em 0 0;
    font-size: .42em;
}

.sec-plano-extra {
    margin-top: 2.5cqi;
    color: rgba(255, 255, 255, .72);
    font-size: max(10px, 4.6cqi);
    font-weight: 500;
}

/* Nada de informação que só aparece com o mouse em cima (pedido do usuário,
   2026-09-30): no celular não existe hover, e no computador ninguém adivinha. */

/* vantagens: descrição sempre visível, texto inteiro */
.mil-service-card-sm p {
    opacity: 1;
    transform: none;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

/* restos do acento laranja do template: o site é verde */
.mil-service-card-sm:before {
    background-color: var(--sec-verde);
}

.mil-social-icons li a:hover {
    color: var(--sec-verde);
}

/* vantagens: linha que corre e cartões que acendem */
#vantagens .mil-services-grid {
    position: relative;
}

.sec-linha {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--sec-verde);
    transform-origin: 0 50%;
    transform: scaleX(0);
    pointer-events: none;
    z-index: 2;
}


/* rodapé */
footer .mil-social-icons a {
    display: inline-block;
    transition: translate .3s cubic-bezier(0, 0, .3642, 1), color .3s;
}

footer .mil-social-icons a:hover {
    translate: 0 -3px;
    color: var(--sec-verde);
}

@media (prefers-reduced-motion: reduce) {
    .sec-plano,
    footer .mil-social-icons a {
        transition: none;
    }

    .sec-plano:hover,
    .sec-plano:focus-visible,
    footer .mil-social-icons a:hover {
        translate: none;
    }
}

/* bolinha que seguia o mouse: desligada a pedido do usuário (2026-09-30) */
.mil-ball {
    display: none !important;
}

/* mapa do Brasil animado (js/mapa.js) */
/* left/top vêm do js/mapa.js: exatamente sobre a imagem */
.mil-circle-text .sec-mapa {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

/* trecho do mapa abaixo do banner, sobre a seção branca, em preto */
.sec-mapa-baixo {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 1;
}

.sec-mapa-baixo img,
.sec-mapa-baixo canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.sec-mapa-baixo img {
    filter: brightness(0);
}

/* Anel de texto "Conheça a tecnologia Mult" que girava em volta do botão com
   seta (os dois saíram a pedido do usuário). Fica invisível, mas ocupando o lugar:
   tirá-lo do HTML muda a posição do mapa, que voltaria a encostar nos planos. */
.mil-circle-text .mil-ct-svg {
    visibility: hidden;
}

/* a onda da abertura revela o mapa a partir do centro */
.mil-circle-text img.sec-mapa-base,
.sec-mapa-baixo img.sec-mapa-base {
    --sec-raio: 0px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 calc(var(--sec-raio) - 60px), transparent var(--sec-raio));
    mask-image: radial-gradient(circle at 50% 50%, #000 calc(var(--sec-raio) - 60px), transparent var(--sec-raio));
}

.mil-circle-text img.sec-mapa-base.sec-mapa-pronto,
.sec-mapa-baixo img.sec-mapa-base.sec-mapa-pronto {
    -webkit-mask-image: none;
    mask-image: none;
}

/* crédito do rodapé no mesmo verde do link ativo "Home" */
.sec-devops {
    color: rgb(47, 255, 0);
}