/* 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; }
.pf-antes { align-self: flex-start; margin-top: 2px; font-size: 14px; font-weight: 700; color: #d60037; 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) {
    .pf-cel { flex-direction: row; justify-content: space-between; gap: 10px; padding: 9px 16px; }
    .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; }
}

/* «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;
    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;
    box-shadow: 0 14px 26px -8px rgba(0, 0, 0, .38), 0 5px 10px -2px rgba(0, 0, 0, .16);
    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 -14px 26px -8px rgba(0, 0, 0, .3), 0 -5px 10px -2px rgba(0, 0, 0, .12);
    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; }
}