/*
 * Página pública do plano — /plano/{idfamilia}-{slug}.
 * Carregada DEPOIS do blog.css (a página reaproveita a casca do blog) e usa os
 * mesmos tokens --blg-*. Desenho aprovado no mock de 30/10/2026; plano em
 * docs/planos/plano-divulgacao-planos-catalogo-link-publico.md.
 *
 * ⚠️ O botão laranja daqui usa texto MARINHO, não branco: branco sobre o laranja
 * #fa7d00 dá contraste 2,6:1 (reprova o AA); marinho dá ~6,5:1. O botão do
 * header continua o da casca do blog.
 */

.pp-body { overflow-x: hidden; }

.pp-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.pp-faixa {
    background: #001e2c;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pp-faixa > .pp-wrap { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 20px; }

.pp-eyebrow {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blg-teal);
}
.pp-eyebrow-laranja { color: var(--blg-laranja); }

.pp-titulo {
    margin: 0;
    font-family: var(--blg-fonte-titulo);
    font-weight: 700;
    font-size: clamp(30px, 4.6vw, 50px);
    line-height: 1.12;
    color: #fff;
}
.pp-titulo-md {
    margin: 0;
    font-family: var(--blg-fonte-titulo);
    font-weight: 700;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    color: #fff;
}
.pp-titulo-secao {
    margin: 0;
    font-family: var(--blg-fonte-titulo);
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.2;
    color: #fff;
}
.pp-lead { margin: 0; font-size: 18px; line-height: 1.6; max-width: 620px; color: rgba(255, 255, 255, 0.8); }
/* Descrição própria do plano (o descritivo do Catálogo), logo abaixo do lead. */
.pp-sobre {
    margin: 0;
    max-width: 620px;
    padding-left: 14px;
    border-left: 3px solid var(--palette-teal, #00b5a7);
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}
.pp-sobre-rotulo { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--palette-teal, #00b5a7); }
.pp-texto { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }
.pp-sub { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.pp-nota { margin: 0; font-size: 13px; line-height: 1.5; color: var(--blg-muted); }

/* ── Botões ─────────────────────────────────────────────────────────────── */
.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
    box-sizing: border-box;
    transition: transform .15s ease, filter .15s ease;
}
.pp-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.blg-body a.pp-btn-laranja, .pp-btn-laranja { background: var(--blg-laranja); color: #002333; }
.blg-body a.pp-btn-laranja:hover { color: #002333; }
.blg-body a.pp-btn-contorno, .pp-btn-contorno {
    min-height: 48px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid var(--blg-teal);
    color: var(--blg-teal-strong);
    background: transparent;
}
.blg-body a.pp-btn-contorno:hover { color: #fff; border-color: #fff; }
.blg-body a.pp-btn-teal, .pp-btn-teal { background: var(--blg-teal); color: #002333; }
.blg-body a.pp-btn-teal:hover { color: #002333; }
.blg-body a.pp-btn-fantasma, .pp-btn-fantasma {
    min-height: 48px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
}
.blg-body a.pp-btn-fantasma:hover { color: #fff; border-color: #fff; }
.pp-btn:focus-visible { outline: 2px solid var(--blg-teal-strong); outline-offset: 3px; }
.blg-body a.pp-link-forte, .pp-link-forte {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 8px;
    color: var(--blg-teal);
    font-weight: 600;
    font-size: 16px;
}

/* ── Herói ──────────────────────────────────────────────────────────────── */
.pp-heroi {
    padding-top: 48px;
    padding-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}
.pp-heroi-texto { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pp-caminho { font-size: 14px; color: var(--blg-muted); }
.blg-body .pp-caminho a { color: var(--blg-muted); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chip { padding: 6px 12px; border-radius: 999px; background: var(--blg-card-deep); font-size: 14px; }
.pp-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; }

.pp-resumo {
    flex: 1 1 340px;
    min-width: 0;
    background: var(--blg-card);
    border: 1px solid var(--blg-border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}
.pp-resumo-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pp-numero { display: flex; flex-direction: column; gap: 4px; }
.pp-numero strong { font-family: var(--blg-fonte-titulo); font-size: 34px; line-height: 1.1; color: #fff; }
.pp-numero span { font-size: 14px; color: rgba(255, 255, 255, 0.65); }
.pp-numero-laranja strong { color: var(--blg-laranja); }
.blg-body a.pp-resumo-expresso, .pp-resumo-expresso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(250, 125, 0, 0.12);
    border: 1px solid rgba(250, 125, 0, 0.45);
    color: #fff;
}
.pp-resumo-expresso > span { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.pp-resumo-expresso-rotulo { font-size: 13px; font-weight: 600; color: var(--blg-laranja); }
.pp-resumo-expresso svg { color: var(--blg-laranja); flex: 0 0 auto; }

/* ── Herói: aviso e lista "o plano inclui" (v2, 31/10/2026) ─────────────── */
.pp-aviso {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--blg-teal-soft);
    border: 1px solid var(--blg-teal-border);
    font-size: 15px;
    color: #fff;
}
.pp-inclui {
    list-style: none;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--blg-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
}
.pp-inclui li { display: flex; gap: 10px; align-items: flex-start; }
.pp-inclui svg { flex: none; margin-top: 4px; color: var(--blg-teal); }
.blg-body .pp-inclui a { color: rgba(255, 255, 255, 0.85); text-decoration: underline; text-decoration-color: rgba(250, 125, 0, 0.6); text-underline-offset: 3px; }
.blg-body .pp-inclui a:hover { color: #fff; }

/* ── Seções ─────────────────────────────────────────────────────────────── */
.pp-secao { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 20px; }
#como-funciona, #materias, #expresso, #perguntas { scroll-margin-top: calc(var(--blg-header-h) + 12px); }

/* ── Como funciona: 4 passos + calendário completo sob demanda ──────────── */
.pp-ciclo {
    background: var(--blg-card);
    border: 1px solid var(--blg-border);
    border-radius: 16px;
    padding: 26px 22px;
}
.pp-passos-ciclo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    position: relative;
}
.pp-passos-ciclo::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 14px;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
}
.pp-passos-ciclo li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 0 8px;
    min-width: 0;
}
.pp-passos-ciclo li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-passos-ciclo strong { color: #fff; font-size: 16px; }
.pp-passos-ciclo li > div > span { color: var(--blg-muted); font-size: 14px; line-height: 1.4; }
.pp-bola {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #002333;
    flex: none;
}
.pp-bola-teoria { background: #fff; }
.pp-bola-qt { background: var(--blg-laranja); }
.pp-bola-rv { background: var(--blg-teal); }
.pp-bola-mais { background: var(--blg-teal-strong); }

.pp-abre { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--blg-border); display: flex; flex-direction: column; gap: 14px; }
.pp-abre > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    color: var(--blg-teal-strong);
    font-weight: 600;
    font-size: 15px;
}
.pp-abre > summary::-webkit-details-marker { display: none; }
.pp-abre > summary::before {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--blg-teal);
    font-size: 15px;
    line-height: 1;
}
.pp-abre[open] > summary::before { content: "\2212"; }
.pp-abre > summary:focus-visible { outline: 2px solid var(--blg-teal-strong); outline-offset: 3px; border-radius: 6px; }
/* Sequência que QUEBRA linha em vez de régua absoluta: com intervalos curtos
   (1 e 7 dias) os rótulos de uma régua em escala se sobreporiam. */
.pp-calendario { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pp-abre .pp-nota { margin-top: 14px; }
.pp-calendario li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid var(--blg-teal);
    min-width: 132px;
}
.pp-calendario strong { color: #fff; font-size: 15px; }
.pp-calendario span { color: var(--blg-muted); font-size: 13px; }
.pp-calendario li.pp-cal-teoria { border-left-color: #fff; }
.pp-calendario li.pp-cal-qt { border-left-color: var(--blg-laranja); }

/* ── Matérias: lista numerada; cada uma abre os assuntos ────────────────── */
.pp-legenda { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--blg-muted); }
.pp-legenda span { display: inline-flex; align-items: center; gap: 8px; }
.pp-legenda-cor { width: 10px; height: 10px; border-radius: 50%; background: var(--blg-teal); display: inline-block; }
.pp-ordem { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 880px; }
.pp-ordem > li > details { border: 1px solid var(--blg-border); border-radius: 12px; background: var(--blg-card); }
.pp-ordem > li.pp-agora > details { border-color: var(--blg-teal-border); background: rgba(0, 184, 166, 0.1); }
.pp-ordem summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto 18px;
    gap: 12px;
    align-items: center;
    padding: 13px 16px;
}
.pp-ordem summary::-webkit-details-marker { display: none; }
.pp-ordem summary:focus-visible { outline: 2px solid var(--blg-teal-strong); outline-offset: 2px; border-radius: 12px; }
.pp-ordem-n { font-weight: 700; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.45); text-align: right; }
.pp-agora .pp-ordem-n { color: var(--blg-teal-strong); }
.pp-ordem-nome { color: #fff; font-weight: 600; min-width: 0; }
.pp-ordem-qtd { font-size: 14px; color: var(--blg-muted); white-space: nowrap; }
.pp-seta { width: 18px; height: 18px; color: var(--blg-muted); transition: transform .15s ease; }
.pp-ordem details[open] .pp-seta { transform: rotate(180deg); }
.pp-ordem ul { list-style: none; margin: 0; padding: 0 16px 16px 56px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; }
.pp-ordem ul li { display: flex; gap: 10px; align-items: baseline; }
.pp-ordem ul li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }

/* ── Simulado e redação ─────────────────────────────────────────────────── */
.pp-periodicas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pp-periodica { background: var(--blg-card); border: 1px solid var(--blg-border); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.pp-periodica h3 { margin: 0; font-size: 17px; color: #fff; }
.pp-periodica p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }

/* ── Cronograma Expresso ────────────────────────────────────────────────── */
.pp-expresso {
    background: var(--blg-card-deep);
    border: 1px solid rgba(250, 125, 0, 0.35);
    border-radius: 20px;
    padding: 36px 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}
.pp-expresso-texto { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pp-selo {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--blg-laranja);
    color: #002333;
    font-size: 13px;
    font-weight: 700;
}
.pp-preco { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pp-preco strong { font-family: var(--blg-fonte-titulo); font-size: 30px; color: #fff; }
.pp-preco span { font-size: 15px; color: var(--blg-muted); }
.pp-comparacao { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pp-comparacao-linha { display: flex; flex-direction: column; gap: 8px; }
.pp-comparacao-rotulo { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, 0.8); }
.pp-comparacao-rotulo strong { color: #fff; white-space: nowrap; }
.pp-comparacao-trilha { height: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.pp-comparacao-barra { height: 16px; border-radius: 8px; }
.pp-comparacao-completo { width: 100%; background: rgba(0, 184, 166, 0.65); }
.pp-comparacao-expresso { background: var(--blg-laranja); }

/* ── Novo por aqui: números da landing ──────────────────────────────────── */
.pp-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.pp-stats li { border-top: 2px solid var(--blg-teal); padding-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.pp-stats strong { font-family: var(--blg-fonte-titulo); font-size: 28px; color: #fff; line-height: 1.15; }
.pp-stats span { font-size: 15px; color: var(--blg-muted); }

/* ── Perguntas ──────────────────────────────────────────────────────────── */
.pp-faq { display: flex; flex-direction: column; gap: 8px; max-width: 880px; }
.pp-faq details { border: 1px solid var(--blg-border); border-radius: 12px; background: var(--blg-card); }
.pp-faq summary { cursor: pointer; padding: 15px 18px; color: #fff; font-weight: 600; font-size: 16px; }
.pp-faq summary:focus-visible { outline: 2px solid var(--blg-teal-strong); outline-offset: 2px; border-radius: 12px; }
.pp-faq p { margin: 0; padding: 0 18px 16px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); }

/* ── Fecho ──────────────────────────────────────────────────────────────── */
.pp-final { padding-top: 24px; padding-bottom: 56px; }
.pp-final-caixa {
    background: var(--blg-card-deep);
    border-radius: 20px;
    padding: 40px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.pp-final-caixa > div:first-child { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pp-final-caixa .pp-acoes { margin-top: 0; }

/* ── Indisponível ───────────────────────────────────────────────────────── */
.pp-indisponivel { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 32px; }
.pp-indisponivel-topo { max-width: 680px; display: flex; flex-direction: column; gap: 14px; }
.pp-similares { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.blg-body a.pp-similar, .pp-similar {
    background: var(--blg-card);
    border: 1px solid var(--blg-border);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--blg-texto);
}
.blg-body a.pp-similar:hover { border-color: var(--blg-teal-border); color: var(--blg-texto); }
.pp-similar strong { font-family: var(--blg-fonte-titulo); font-size: 19px; line-height: 1.3; color: #fff; }
.pp-similar-numeros { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.pp-similar-expresso { font-size: 13px; color: var(--blg-laranja); }
.pp-similar-ver { margin-top: 4px; font-weight: 600; color: var(--blg-teal); }
.pp-indisponivel-rodape { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.7); }

@media (max-width: 860px) {
    .pp-expresso { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
    /* Passos do "Como funciona" viram coluna, com a linha na vertical. */
    .pp-passos-ciclo { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .pp-passos-ciclo::before { left: 14px; right: auto; top: 15px; bottom: 15px; width: 2px; height: auto; }
    .pp-passos-ciclo li { flex-direction: row; text-align: left; align-items: flex-start; gap: 14px; padding: 0; }
    .pp-calendario li { min-width: 0; flex: 1 1 calc(50% - 5px); }
    /* No celular a descrição desce para depois dos botões: com ela no meio, o
       "Clonar" saía da primeira tela em 390×844 (quem chega pelo anúncio). */
    .pp-heroi-texto .pp-sobre { order: 1; }
}
@media (max-width: 560px) {
    .pp-heroi { padding-top: 28px; gap: 28px; }
    .pp-resumo { padding: 20px; }
    .pp-numero strong { font-size: 28px; }
    .pp-acoes .pp-btn { width: 100%; }
    .pp-final-caixa .pp-acoes { width: 100%; }
    .pp-expresso { padding: 28px 20px; }
    .pp-ciclo { padding: 22px 18px; }
    .pp-ordem summary { grid-template-columns: 22px minmax(0, 1fr) 18px; padding: 12px 14px; }
    .pp-ordem-qtd { grid-column: 2; grid-row: 2; }
    .pp-ordem .pp-seta { grid-column: 3; grid-row: 1; }
    .pp-ordem ul { padding-left: 14px; }
    .pp-comparacao-rotulo { flex-direction: column; gap: 2px; }
}