/* Post Types Velloznet - Catálogo de planos (shortcode [planos_catalogo]) */

.plan-catalog {
    --pc-purple: #621851;
    --pc-plum: #4D123F;
    --pc-violet: #A136EB;
    --pc-orange: #EC731C;
    font-family: "Poppins", system-ui, sans-serif;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(20px, 2.6vw, 36px);
    align-items: start;
    margin: clamp(24px, 3vw, 40px) 0 0;
}

@media (max-width: 900px) {
    .plan-catalog {
        grid-template-columns: 1fr;
    }
}

/* ---------- Aside (busca + filtros) ---------- */
.plan-catalog__aside {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 96px;
}

@media (max-width: 900px) {
    .plan-catalog__aside {
        position: static;
    }
}

.plan-catalog__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-catalog__label {
    font: 700 11px/1 "Poppins", sans-serif;
    letter-spacing: 0.14em;
    color: #999;
}

.plan-catalog__search {
    position: relative;
    display: flex;
    margin: 0;
}

.plan-catalog__search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: #a98fa0;
}

.plan-catalog__search input {
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    border: 1px solid #e7dce3;
    background: #fff;
    padding: 0 14px 0 40px;
    font: 500 14px/1 "Poppins", sans-serif;
    color: #171717;
}

.plan-catalog__search input:focus {
    border-color: var(--pc-violet);
    outline: none;
}

.plan-catalog__filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Agrupamento Residencial / Empresarial dos filtros de categoria. */
.plan-catalog__filter-group + .plan-catalog__filter-group {
    margin-top: 18px;
}

.plan-catalog__filter-group-label {
    display: block;
    margin-bottom: 9px;
    font: 700 10px/1 "Poppins", sans-serif;
    letter-spacing: 0.14em;
    color: var(--pc-violet, #621851);
    text-transform: uppercase;
}

.plan-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    min-height: 52px;
    padding: 12px 16px;
    border-radius: 14px;
    cursor: pointer;
    font: 700 13px/1.25 "Poppins", sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid #ece4e9;
    background: #fff;
    color: var(--pc-plum);
    transition: all 0.2s;
}

.plan-filter:hover {
    border-color: #d9c7d6;
}

.plan-filter__dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--pc-orange);
}

.plan-filter.is-active {
    background: var(--pc-purple);
    border-color: var(--pc-purple);
    color: #fff;
}

/* ---------- Filtro em select (telas pequenas) ---------- */
.plan-catalog__select {
    position: relative;
    display: none;
}

.plan-catalog__select select {
    width: 100%;
    min-height: 52px;
    padding: 0 44px 0 16px;
    border: 1px solid #ece4e9;
    border-radius: 14px;
    background: #fff;
    color: var(--pc-plum);
    font: 700 13px/1.25 "Poppins", sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.plan-catalog__select select:focus {
    border-color: var(--pc-violet);
    outline: none;
}

.plan-catalog__select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--pc-purple);
    border-bottom: 2px solid var(--pc-purple);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

/* Até 900px o aside empilha: mostra só o select e esconde os botões. */
@media (max-width: 900px) {
    .plan-catalog__select {
        display: block;
    }

    .plan-catalog__filters,
    .plan-catalog__filter-group-label {
        display: none;
    }

    .plan-catalog__filter-group + .plan-catalog__filter-group {
        margin-top: 0;
    }

    .plan-catalog__aside {
        gap: 16px;
    }

    .plan-catalog__grid {
        padding-top: 4px;
    }
}

/* Espaço para os dois campos lado a lado em tablets. */
@media (min-width: 620px) and (max-width: 900px) {
    .plan-catalog__aside {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
        gap: 16px 18px;
    }
}

/* ---------- Grid ---------- */
.plan-catalog__main {
    min-width: 0;
}

.plan-catalog__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(16px, 1.8vw, 22px);
    align-items: stretch;
    padding-top: 14px;
}

@media (max-width: 620px) {
    .plan-catalog__grid {
        grid-template-columns: 1fr;
    }
}

.plan-catalog__grid.is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Estado vazio (ocupa as duas colunas) */
.plan-catalog__empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: clamp(32px, 4vw, 56px) 24px;
    border: 1px dashed #e7dce3;
    border-radius: 22px;
    background: #fcfafc;
}

.plan-catalog__empty-title {
    margin: 0;
    font: 700 clamp(17px, 1.8vw, 20px)/1.3 "Poppins", sans-serif;
    color: var(--pc-plum);
}

.plan-catalog__empty-text {
    margin: 0;
    max-width: 44ch;
    font: 400 14px/1.55 "Poppins", sans-serif;
    color: #777;
}

/* ---------- Grid dos planos de um Serviço (single-servicos.php) ---------- */
.ptvn-servico-planos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(16px, 1.8vw, 22px);
    align-items: stretch;
}

/* Card de plano de serviço (reaproveita .pcard) */
.pcard--servico .pcard__name {
    text-transform: none;
    font-size: 16px;
    letter-spacing: 0.02em;
}

.pcard__desc {
    font: 400 14px/1.6 "Poppins", sans-serif;
    color: #444;
}

.pcard__desc > *:first-child {
    margin-top: 0;
}

.pcard__desc > *:last-child {
    margin-bottom: 0;
}

.pcard__desc p {
    margin: 0 0 8px;
}

.pcard__desc ul,
.pcard__desc ol {
    margin: 0 0 8px;
    padding-left: 18px;
}

.pcard__desc li {
    margin: 0 0 4px;
}

.pcard__desc a {
    color: var(--pc-violet);
    text-decoration: underline;
}

.pcard__desc strong {
    color: #171717;
}

/* ---------- Card ---------- */
.pcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid #ece4e9;
    border-radius: 22px;
    padding: 24px 20px 20px;
    box-shadow: 0 6px 22px rgba(23, 23, 23, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.pcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(77, 18, 63, 0.14);
}

/* Corpo do card (embrulha todo o conteúdo abaixo da imagem) */
.pcard__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------- Card com imagem destacada (.pcard--media) ---------- */
.pcard--media {
    padding: 0;
    overflow: hidden;
}

/* Proporção da arte cadastrada como imagem do plano (700x450). */
.pcard__media {
    position: relative;
    aspect-ratio: 14 / 9;
    min-height: 150px;
    overflow: hidden;
    background: var(--pc-plum);
}

.pcard__media .pcard__img,
.pcard__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Véu escuro para dar legibilidade ao texto sobreposto */
.pcard__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28, 8, 23, 0.7) 0%, rgba(28, 8, 23, 0.34) 52%, rgba(28, 8, 23, 0.06) 100%);
    pointer-events: none;
}

/*
 * Nome e velocidade alinhados à direita: as artes dos planos deixam a pessoa
 * na metade esquerda e o espaço livre na direita (pedido do cliente, set/2026).
 */
.pcard__media-head {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 20px;
    right: 20px;
    text-align: right;
}

.pcard--media .pcard__media-head .pcard__name {
    text-align: right;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.pcard--media .pcard__media-head .pcard__speed {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.pcard--media .pcard__media-head .pcard__mega {
    font-size: clamp(32px, 3.6vw, 42px);
    color: #fff;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.38);
}

.pcard--media .pcard__media-head .pcard__unit {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}

/* O corpo sobe sobre a imagem, com o canto superior esquerdo arredondado */
.pcard--media .pcard__body {
    position: relative;
    z-index: 3;
    margin-top: -30px;
    padding: 24px 20px 20px;
    background: #fff;
    border-radius: 30px 0 0 0;
}

.pcard__name {
    margin: 0;
    text-align: center;
    font: 700 13px/1 "Poppins", sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pc-purple);
}

.pcard__speed {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
}

.pcard__mega {
    font: 800 clamp(42px, 5vw, 56px)/0.9 "Poppins", sans-serif;
    color: var(--pc-orange);
}

.pcard__unit {
    font: 700 17px/1 "Poppins", sans-serif;
    color: var(--pc-purple);
}

.pcard__rule {
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(236, 115, 28, 0), var(--pc-orange), rgba(236, 115, 28, 0));
    margin: 16px 0 18px;
}

.pcard__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.pcard__features li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pcard__check {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #fcefe3;
    color: var(--pc-orange);
    font: 800 12px/26px "Poppins", sans-serif;
    text-align: center;
}

.pcard__feature-text {
    font: 500 14px/1.3 "Poppins", sans-serif;
    color: #444;
}

.pcard__section-label {
    margin: 18px 0 8px;
    font: 600 11px/1 "Poppins", sans-serif;
    letter-spacing: 0.1em;
    color: #999;
}

.pcard__badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.pcard__badge {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 9px;
    border-radius: 9px;
    background: #f7f1fa;
    border: 1px solid #eadcf1;
    font: 700 10px/1.2 "Poppins", sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pc-purple);
}

.pcard__badge-dot {
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--pc-violet);
}

.pcard__badges-more {
    position: relative;
    display: inline-block;
    margin: 8px 0 0;
    outline: none;
}

.pcard__badges-more-label {
    font: 700 11px/1.2 "Poppins", sans-serif;
    letter-spacing: 0.02em;
    color: var(--pc-violet);
    cursor: help;
    border-bottom: 1px dashed currentColor;
}

.pcard__badges-more-pop {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: max-content;
    max-width: 240px;
    padding: 10px 12px;
    background: #1d2327;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    pointer-events: none;
}

.pcard__badges-more-pop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 14px;
    border: 6px solid transparent;
    border-top-color: #1d2327;
}

.pcard__badges-more:hover .pcard__badges-more-pop,
.pcard__badges-more:focus-within .pcard__badges-more-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pcard__badges-more-pop ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pcard__badges-more-pop li {
    position: relative;
    padding-left: 14px;
    font: 400 12px/1.4 "Poppins", sans-serif;
    color: #fff;
}

.pcard__badges-more-pop li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--pc-violet);
}

.pcard__apps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pcard__app {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 700 11px/1 "Poppins", sans-serif;
    letter-spacing: 0.05em;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f5f1f4;
    color: var(--pc-purple);
}

/*
 * Logo do app: imagem destacada do post "apps" vinculado ao termo (ou a
 * imagem do próprio termo). Três por linha; o logo se ajusta dentro do
 * quadro sem cortar (object-fit: contain), já que os logos têm proporções
 * bem diferentes entre si.
 */
.pcard__app--logo {
    flex: 0 0 calc((100% - 12px) / 3);
    height: 46px;
    padding: 6px 8px;
    justify-content: center;
    background: #fff;
    border: 1px solid #ece6ea;
    box-sizing: border-box;
}

.pcard__app-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Selo "Informações adicionais" + tooltip (classes mantêm o nome antigo "clausulas") */
.pcard__clausulas {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    outline: none;
}

.pcard__clausulas-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: help;
    color: #9aa0a6;
    font: 600 11px/1.2 "Poppins", sans-serif;
    letter-spacing: 0.02em;
}

.pcard__clausulas-icon {
    display: block;
    flex: 0 0 auto;
    color: #9aa0a6;
}

.pcard__clausulas-text {
    color: #6b7280;
}

.pcard__clausulas-pop {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: max-content;
    max-width: 240px;
    padding: 10px 12px;
    background: #1d2327;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    pointer-events: none;
}

.pcard__clausulas-pop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 14px;
    border: 6px solid transparent;
    border-top-color: #1d2327;
}

.pcard__clausulas:hover .pcard__clausulas-pop,
.pcard__clausulas:focus-within .pcard__clausulas-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pcard__clausulas-pop ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pcard__clausulas-pop li {
    position: relative;
    padding-left: 14px;
    font: 400 12px/1.5 "Poppins", sans-serif;
    color: #fff;
}

.pcard__clausulas-pop li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--pc-orange);
}

/* Rodapé do card */
.pcard__foot {
    margin-top: auto;
    padding-top: 20px;
}

.pcard__price {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.pcard__currency {
    font: 700 15px/1 "Poppins", sans-serif;
    color: #666;
    margin-top: 8px;
}

.pcard__amount {
    font: 800 clamp(30px, 3.6vw, 38px)/1 "Poppins", sans-serif;
    color: var(--pc-orange);
}

.pcard__period {
    font: 600 13px/1 "Poppins", sans-serif;
    color: #666;
    margin-top: 11px;
}

.pcard__cta {
    margin-top: 14px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--pc-orange);
    color: #fff;
    font: 700 14px/1 "Poppins", sans-serif;
    letter-spacing: 0.08em;
    text-decoration: none;
}

.pcard__cta:hover {
    background: #d9620f;
    color: #fff;
}

.pcard__fineprint {
    margin: 10px 0 0;
    text-align: center;
    font: 400 11px/1.3 "Poppins", sans-serif;
    color: #999;
}

/* ---------- Rodapé "visualizar mais" ---------- */
.plan-catalog__more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: clamp(28px, 3vw, 44px);
}

.plan-catalog__more-btn {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 34px;
    border-radius: 999px;
    border: 1.5px solid var(--pc-purple);
    background: #fff;
    color: var(--pc-purple);
    font: 700 14px/1 "Poppins", sans-serif;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: all 0.2s;
}

.plan-catalog__more-btn:hover {
    background: var(--pc-purple);
    color: #fff;
}

.plan-catalog__more-note {
    margin: 0;
    font: 400 13px/1.45 "Poppins", sans-serif;
    color: #999;
    text-align: center;
}

/* ---------- Paginação (archive-planos.php) ---------- */
.plan-catalog__pagination {
    display: flex;
    justify-content: center;
    margin-top: clamp(28px, 3vw, 44px);
}

.plan-catalog__pagination .page-numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.plan-catalog__pagination .page-numbers li {
    margin: 0;
}

.plan-catalog__pagination a.page-numbers,
.plan-catalog__pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #e7dce3;
    background: #fff;
    color: var(--pc-purple);
    font: 700 14px/1 "Poppins", sans-serif;
    text-decoration: none;
    transition: all 0.2s;
}

.plan-catalog__pagination a.page-numbers:hover {
    background: #f7f1fa;
    border-color: var(--pc-violet);
}

.plan-catalog__pagination .page-numbers .current {
    background: var(--pc-purple);
    border-color: var(--pc-purple);
    color: #fff;
}

.plan-catalog__pagination .page-numbers .dots {
    border: 0;
    background: transparent;
    color: #999;
}