/* PREÇO FIXO NAS PÁGINAS DE PLANOS (17/09/2026) -- ver planos-fixos.js.
   A mesma entrada e saída da /planos-de-hospedagem: cada célula desce de
   trás do menu, uma a seguir à outra, e sobe ao sair. */
.pf-faixa { position: fixed; left: 0; right: 0; height: 0; z-index: 19; pointer-events: none; }
.pf-cel {
    position: absolute; top: 0; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 16px 11px; text-align: center;
    background: #fff; border: 1px solid #e3e7ec; border-top: 0; border-radius: 0 0 14px 14px;
    /* a borda de baixo tem de se ver bem por cima das listas do cartão */
    border-bottom-color: #cfd6de;
    box-shadow: 0 14px 26px -8px rgba(0, 0, 0, .38), 0 5px 10px -2px rgba(0, 0, 0, .16);
    font-family: Ubuntu, -apple-system, 'Segoe UI', Arial, sans-serif; color: #1f2835;
    transform-origin: 50% 0; scale: var(--pf-esc, 1); transform: translateY(-110%); opacity: 0; visibility: hidden;
    transition: transform .32s cubic-bezier(.55, 0, .8, .2), opacity .24s ease, visibility 0s linear .32s;
}
.pf-cel.pf-on {
    transform: translateY(0); opacity: 1; visibility: visible;
    transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, visibility 0s;
}
.pf-nome { display: block; max-width: 100%; font-size: 16px; line-height: 22px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-preco { display: inline-flex; align-items: center; gap: 3px; line-height: 1; }
.pf-valor { font-size: 26px; font-weight: 700; color: #d60037; letter-spacing: -.3px; }
.pf-lado { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.pf-cima { display: inline-flex; align-items: flex-start; gap: 3px; }
.pf-cent { font-size: 14px; font-weight: 700; color: #1f2835; line-height: 15px; }
.pf-moeda { font-size: 11px; font-weight: 700; color: #1f2835; line-height: 11px; }
/* O SÍMBOLO EM PRETO, como o de sufixo (`.pf-moeda`) já estava. Estava
   vermelho como o número e o dono pediu-o preto (21/09/2026). Nas células
   escuras da outra faixa continua branco, pela regra `.pf-cel.pf-escuro`
   mais abaixo — a faixa da comparação não tem variante escura. */
.pf-antes { align-self: flex-start; margin-top: 2px; font-size: 14px; font-weight: 700; color: #1f2835; line-height: 15px; }
.pf-cent:empty, .pf-moeda:empty, .pf-suf:empty, .pf-antes:empty { display: none; }
.pf-suf { font-size: 12.5px; color: #4a5563; font-weight: 400; line-height: 13px; }
.pf-cel.pf-popular { border-top: 3px solid #d60037; }
.pf-cel.pf-escuro { background: #1f2835; border-color: #1f2835; color: #fff;
    /* no cartão escuro a sombra preta não se vê: a borda e o brilho são brancos */
    border-bottom-color: rgba(255, 255, 255, .45);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .22), 0 8px 18px -4px rgba(255, 255, 255, .22), 0 14px 26px -8px rgba(0, 0, 0, .6); }
.pf-cel.pf-escuro .pf-valor, .pf-cel.pf-escuro .pf-antes, .pf-cel.pf-escuro .pf-cent, .pf-cel.pf-escuro .pf-moeda { color: #fff; }
.pf-cel.pf-escuro .pf-suf { color: #b9c6d3; }
.pf-cel.pf-escuro.pf-popular { border-top-color: #d60037; }
@media (max-width: 600px) {
    /* NOME EM CIMA, PREÇO POR BAIXO E AO CENTRO (dono, 21/09/2026). Estavam
       lado a lado e o preço encostado à direita. */
    .pf-cel { flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 9px 16px 10px; }
    .pf-cel .pf-preco { justify-content: center; }
    .pf-nome { font-size: 15px; }
    .pf-valor { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    /* mais curto, mas continua a entrar e a sair a deslizar */
    .pf-cel { transition: transform .24s ease-in, opacity .24s ease, visibility 0s linear .24s; }
    .pf-cel.pf-on { transition: transform .24s ease-out, opacity .2s ease, visibility 0s; }
}

/* A FAIXA DE BAIXO: o botão de contratar por cartão (21/09/2026). Espelho da
   de cima — entra de baixo, com a mesma escala e os mesmos atrasos. */
/* `transition: bottom` — é isto que faz a faixa DESCER com animação quando
   o visitante fecha a publicidade de baixo. A medida vem do JS. */
.pf-faixa-b { position: fixed; left: 0; right: 0; bottom: 0; height: 0; z-index: 19; pointer-events: none;
    transition: bottom .34s cubic-bezier(.2, .8, .2, 1); }
.pf-bcel {
    position: absolute; bottom: 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    padding: 11px 16px 12px;
    background: #fff; border: 1px solid #e3e7ec; border-bottom: 0; border-radius: 14px 14px 0 0;
    border-top-color: #cfd6de;
    box-shadow: 0 -26px 48px -10px rgba(0, 0, 0, .52), 0 -10px 20px -4px rgba(0, 0, 0, .26);
    transform-origin: 50% 100%; scale: var(--pf-esc, 1); transform: translateY(110%); opacity: 0; visibility: hidden;
    transition: transform .32s cubic-bezier(.55, 0, .8, .2), opacity .24s ease, visibility 0s linear .32s;
    pointer-events: auto;
}
.pf-bcel.pf-on {
    transform: translateY(0); opacity: 1; visibility: visible;
    transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, visibility 0s;
}
.pf-bt {
    display: inline-flex; align-items: center; justify-content: center; max-width: 100%;
    min-height: 40px; padding: 0 22px; border-radius: 999px;
    background: #d60037; color: #fff !important; font-size: 14px; font-weight: 700;
    letter-spacing: .3px; text-transform: uppercase; text-decoration: none !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: 0 6px 14px -6px rgba(214, 0, 55, .6);
}
.pf-bt:hover, .pf-bt:focus { background: #b30030; color: #fff !important; }
.pf-bcel.pf-popular { border-bottom: 3px solid #d60037; }
.pf-bcel.pf-escuro { background: #1f2835; border-color: #1f2835;
    /* no cartão escuro a sombra preta não se vê: a borda e o brilho são brancos */
    border-top-color: rgba(255, 255, 255, .45);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .22), 0 -8px 18px -4px rgba(255, 255, 255, .22), 0 -26px 48px -10px rgba(0, 0, 0, .6); }
.pf-bcel.pf-escuro.pf-popular { border-bottom-color: #d60037; }
@media (prefers-reduced-motion: reduce) {
    .pf-bcel { transition: transform .24s ease-in, opacity .24s ease, visibility 0s linear .24s; }
    .pf-bcel.pf-on { transition: transform .24s ease-out, opacity .2s ease, visibility 0s; }
}

/* «Veja todas as características» partia em duas linhas nos cartões de
   320px (o texto pede ~258px e o cartão dá 251px) e só cabia no destacado,
   que é mais largo. Uma linha em todos, com a seta colada ao texto. Só as
   páginas com esta tabela carregam este ficheiro. */
.pricing-table-v4__link { font-size: 15px; letter-spacing: .2px; }
.pricing-table-v4__link-text-show,
.pricing-table-v4__link-text-hide { justify-content: center; align-items: center; gap: 2px; white-space: nowrap; }

/* Cabeçalho fixo das tabelas do servidor dedicado -- ver planos-fixos.js.
   Mesma entrada e saída das células de preço. */
.pf-tab {
    position: fixed; z-index: 19; overflow: hidden; pointer-events: none; box-sizing: border-box;
    border-radius: 0 0 12px 12px;
    border-bottom: 1px solid #cfd6de;
    box-shadow: 0 14px 26px -8px rgba(0, 0, 0, .38), 0 5px 10px -2px rgba(0, 0, 0, .16);
    transform: translateY(-110%); opacity: 0; visibility: hidden;
    transition: transform .32s cubic-bezier(.55, 0, .8, .2), opacity .24s ease, visibility 0s linear .32s;
}
.pf-tab.pf-on {
    transform: translateY(0); opacity: 1; visibility: visible;
    transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, visibility 0s;
}
.pf-tab-fila { display: flex; will-change: transform; }
.pf-tab-cel { flex: 0 0 auto; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) {
    .pf-tab { transition: transform .24s ease-in, opacity .24s ease, visibility 0s linear .24s; }
    .pf-tab.pf-on { transition: transform .24s ease-out, opacity .2s ease, visibility 0s; }
}

/* Nomes dos plugins/aplicações nos blocos (#vpsoperatingsystems .box):
   «W3 Total Cache» e «Contact Form 7» partiam em duas linhas (o título
   tem 110px e pedem ~115px) e esses blocos ficavam mais altos. Uma linha,
   usando parte da margem interior do bloco. */
#vpsoperatingsystems .box .info h4 { white-space: nowrap; margin-left: -15px; margin-right: -15px; }

/* Tabela de diferenças da hospedagem WordPress -- ver planos-fixos.js.
   Em cima: nome e preço por coluna. Em baixo: o botão de contratar. */
.pf-cmp {
    position: fixed; z-index: 19; overflow: hidden; box-sizing: border-box; pointer-events: none;
    /* desce/sobe com a publicidade de baixo, como a faixa dos cartões */
    transition: bottom .34s cubic-bezier(.2, .8, .2, 1);
    background: #fff; opacity: 0; visibility: hidden;
    font-family: Ubuntu, -apple-system, 'Segoe UI', Arial, sans-serif; color: #1f2835;
}
.pf-cmp.pf-on { opacity: 1; visibility: visible; }
.pf-cmp-cima {
    border-radius: 0 0 12px 12px; border: 1px solid #e3e7ec; border-top: 0; border-bottom-color: #cfd6de;
    /* sombra reforçada por ordem do dono (21/09/2026) */
    box-shadow: 0 26px 48px -10px rgba(0, 0, 0, .58), 0 10px 20px -4px rgba(0, 0, 0, .3);
    transform: translateY(-110%);
    transition: transform .32s cubic-bezier(.55, 0, .8, .2), opacity .24s ease, visibility 0s linear .32s;
}
.pf-cmp-baixo {
    border-radius: 12px 12px 0 0; border: 1px solid #e3e7ec; border-bottom: 0; border-top-color: #cfd6de;
    box-shadow: 0 -26px 48px -10px rgba(0, 0, 0, .52), 0 -10px 20px -4px rgba(0, 0, 0, .26);
    transform: translateY(110%);
    transition: transform .32s cubic-bezier(.55, 0, .8, .2), opacity .24s ease, visibility 0s linear .32s;
}
.pf-cmp.pf-on {
    transform: translateY(0); pointer-events: auto;
    transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, visibility 0s;
}
.pf-cmp-cima.pf-on { pointer-events: none; }
.pf-cmp-fila { display: flex; will-change: transform; }
.pf-cmp-cel {
    flex: 0 0 auto; box-sizing: border-box; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 9px 8px 10px; text-align: center;
}
.pf-cmp-cima .pf-cmp-cel + .pf-cmp-cel, .pf-cmp-baixo .pf-cmp-cel + .pf-cmp-cel { border-left: 1px solid #eef1f4; }
.pf-cmp-rot { background: #00abc8; }
.pf-cmp .pf-nome { font-size: 14px; line-height: 20px; text-transform: uppercase; letter-spacing: .3px; }
.pf-cmp .pf-valor { font-size: 22px; }
.pf-cmp-bt {
    display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 22px;
    border-radius: 999px; background: #d60037; color: #fff !important; font-size: 14px; font-weight: 700;
    letter-spacing: .3px; text-transform: uppercase; text-decoration: none !important; white-space: nowrap;
    box-shadow: 0 6px 14px -6px rgba(214, 0, 55, .6);
    transition: background-color .2s ease, transform .2s ease;
}
.pf-cmp-bt:hover, .pf-cmp-bt:focus-visible { background: #b1002d; transform: translateY(-1px); }
.pf-cmp-bt:focus-visible { outline: 3px solid #1f2835; outline-offset: 2px; }
@media (max-width: 600px) {
    .pf-cmp-cel { padding: 7px 4px 8px; }
    .pf-cmp .pf-nome { font-size: 12px; line-height: 16px; }
    .pf-cmp .pf-valor { font-size: 18px; }
    .pf-cmp-bt { min-height: 36px; padding: 0 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .pf-cmp-cima, .pf-cmp-baixo { transition: transform .24s ease-in, opacity .24s ease, visibility 0s linear .24s; }
    .pf-cmp.pf-on { transition: transform .24s ease-out, opacity .2s ease, visibility 0s; }
}

/* =====================================================================
   A TABELA DE PLANOS DENTRO DA LINHA DO MENU — 21/09/2026.

   Dono: «os planos saíram». E saíam mesmo: o tema dá a esta tabela um
   contentor de 1290px, quando o menu e o resto do site têm 1140. Medido a
   1920px: os cartões iam de 315 a 1605 e o menu de 405 a 1515 — 75px a mais
   de cada lado. A regra do dono é que a linha do menu é o limite.

   NÃO CHEGA ENCOLHER. A 1140 os cartões passam de 313px para 275 e o texto
   começa a quebrar: «Number of Sites Unlimited» e «NVME Storage 10GB SSD»
   partiam-se em duas linhas, e a altura subia de 655px para 767. Devolve-se
   o espaço pela margem interna de cada cartão — 30px eram folga a mais.
   MEDIDO com 18px: alturas 655/655/655/675, exactamente as de antes, e o
   mesmo número de linhas partidas (4, as que já havia).
   ===================================================================== */
.pricing-table-4-section-wrapper { max-width: 1140px; }
.pricing-table-v4__column { padding-left: 18px; padding-right: 18px; }