/* =====================================================================
   Telas de compra (escolher plano → dados → Pix).
   Usa as cores e o traço da página inicial (home.css).
   ===================================================================== */

[hidden] { display: none !important; }

/* ------------------------------------------------------------- Trilha */
.c-trilha {
    border-bottom: 2px solid var(--traco);
    background: var(--papel-2);
    overflow-x: auto;
}

.c-trilha .h-cont { display: flex; gap: 10px; padding-block: 16px; }

.c-etapa {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
    min-width: 190px;
    padding: 11px 15px;
    border: 2px solid var(--traco);
    border-radius: 14px;
    background: var(--papel);
    opacity: .55;
}

.c-etapa.atual { opacity: 1; background: var(--verde-claro); box-shadow: 4px 4px 0 var(--traco); }
.c-etapa.feita { opacity: 1; }

.c-bolinha {
    width: 30px; height: 30px; flex-shrink: 0;
    border: 2px solid var(--traco);
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 900; font-size: 14px;
    background: var(--papel-2);
}

.c-etapa.atual .c-bolinha { background: var(--verde); color: #fff; border-color: var(--verde-escuro); }
.c-etapa.feita .c-bolinha { background: var(--verde-claro); color: var(--verde-escuro); }
.c-etapa-texto strong { display: block; font-size: 14px; line-height: 1.2; }
.c-etapa-texto small { display: block; font-size: 11.5px; color: var(--tinta-2); margin-top: 2px; }

/* -------------------------------------------------------------- Corpo */
.c-corpo { padding-block: clamp(34px, 5vw, 60px) clamp(50px, 7vw, 90px); }
.c-cabeca { max-width: 720px; margin-bottom: 34px; }
.c-cabeca.centro { margin-inline: auto; text-align: center; }
.c-cabeca .h-titulo { font-size: clamp(27px, 3.6vw, 40px); }

.c-recado {
    border: 2px solid var(--traco);
    border-radius: 14px;
    padding: 15px 18px;
    font-size: 14.5px;
    font-weight: 650;
    margin-bottom: 24px;
    box-shadow: 3px 3px 0 var(--traco);
}

.c-recado.ok { background: var(--verde-claro); color: var(--verde-escuro); }
.c-recado.erro { background: var(--laranja-claro); color: #8a3208; }
.c-recado a { text-decoration: underline; font-weight: 800; }

/* ------------------------------------------------------------- Ciclo */
.c-ciclo { display: flex; gap: 10px; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; }

.c-ciclo a {
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 11px 22px;
    border: 2px solid var(--traco);
    border-radius: 999px;
    background: var(--papel);
    font-weight: 800;
    font-size: 14.5px;
}

.c-ciclo a.atual { background: var(--verde); color: #fff; box-shadow: 4px 4px 0 var(--traco); }
.c-ciclo a small { font-size: 11.5px; font-weight: 600; opacity: .78; }

/* ------------------------------------------------------------ Planos */
.c-planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 18px;
    align-items: stretch;
}

@media (min-width: 1180px) {
    .c-planos { grid-template-columns: repeat(5, 1fr); }
}

.c-plano {
    position: relative;
    border: 2px solid var(--traco);
    border-radius: 20px;
    background: var(--papel);
    box-shadow: var(--sombra);
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    transition: transform .18s, box-shadow .18s;
}

.c-plano:hover { transform: translateY(-5px); box-shadow: var(--sombra-forte); }

.c-plano.escolhido {
    background: var(--verde-claro);
    border-width: 3px;
    box-shadow: 8px 8px 0 var(--verde);
}

.c-fita {
    position: absolute; top: -14px; left: 50%; translate: -50% 0;
    background: var(--verde); color: #fff;
    border: 2px solid var(--traco);
    border-radius: 999px;
    padding: 5px 15px;
    font-size: 12px; font-weight: 800; white-space: nowrap;
}

.c-plano h2 { font-size: 20px; margin: 0 0 5px; letter-spacing: -.02em; }
.c-plano-desc { font-size: 13px; color: var(--tinta-2); margin: 0 0 16px; min-height: 38px; line-height: 1.5; }

.c-preco { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.c-preco strong { font-size: 31px; font-weight: 850; letter-spacing: -.035em; white-space: nowrap; }
.c-preco span { font-size: 12.5px; color: var(--tinta-2); }

.c-limites {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-bottom: 14px;
    border-bottom: 1.5px dashed var(--tinta-3);
    margin-bottom: 14px;
}

.c-limites span {
    font-size: 11.5px; font-weight: 700;
    background: var(--papel-2);
    border: 1px solid var(--tinta-3);
    border-radius: 999px;
    padding: 4px 10px;
}

.c-funcoes { flex: 1; margin-bottom: 18px; }

.c-funcoes strong {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinta-3);
    margin: 12px 0 7px;
}

.c-funcoes strong:first-child { margin-top: 0; }
.c-funcoes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

.c-funcoes li {
    font-size: 13px;
    color: var(--tinta-2);
    padding-left: 20px;
    position: relative;
    line-height: 1.45;
}

.c-funcoes li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--verde);
    font-weight: 900;
}

.c-funcoes .c-extra li::before { color: var(--laranja); }
.c-plano .h-btn { width: 100%; }

.c-nota {
    margin: 30px auto 0;
    max-width: 780px;
    text-align: center;
    font-size: 13.5px;
    color: var(--tinta-2);
    line-height: 1.65;
    border: 2px dashed var(--tinta-3);
    border-radius: 16px;
    padding: 18px 22px;
}

/* --------------------------------------------------- Dados + resumo */
.c-duas { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(24px, 3vw, 40px); align-items: start; }

.c-form {
    border: 2px solid var(--traco);
    border-radius: 20px;
    background: var(--papel);
    box-shadow: var(--sombra);
    padding: 26px;
}

.c-form h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--tinta-3);
    margin: 0 0 14px;
    padding-bottom: 9px;
    border-bottom: 1.5px dashed var(--tinta-3);
}

.c-form h3:not(:first-child) { margin-top: 26px; }
.c-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.c-form label { display: block; margin-bottom: 14px; }
.c-form label span { display: block; font-size: 12.5px; font-weight: 750; color: var(--tinta-2); margin-bottom: 6px; }

.c-form input, .c-form select {
    width: 100%;
    padding: 13px 14px;
    border: 2px solid var(--traco);
    border-radius: 12px;
    background: var(--papel-2);
    font-family: inherit;
    font-size: 14.5px;
    color: var(--tinta);
    transition: background .15s, box-shadow .15s;
}

.c-form input:focus, .c-form select:focus { outline: none; background: #fff; box-shadow: 3px 3px 0 var(--verde); }
.c-dica { font-size: 12.5px; color: var(--tinta-2); line-height: 1.55; margin: 0 0 4px; }

.c-pix-aviso {
    display: flex; gap: 14px; align-items: center;
    background: var(--verde-claro);
    border: 2px solid var(--verde);
    border-radius: 14px;
    padding: 15px 17px;
    margin-bottom: 16px;
}

.c-pix-aviso span { font-size: 30px; }
.c-pix-aviso strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.c-pix-aviso div { font-size: 13px; color: var(--tinta-2); line-height: 1.5; }

.c-regras {
    background: var(--laranja-claro);
    border: 2px solid var(--laranja);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.c-regras strong { display: block; font-size: 14px; margin-bottom: 9px; color: #8a3208; }
.c-regras ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
.c-regras li { font-size: 13.5px; line-height: 1.5; color: #7a3410; }

.c-aceite {
    display: flex !important;
    gap: 12px;
    align-items: flex-start;
    background: var(--papel-2);
    border: 2px solid var(--traco);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px !important;
    cursor: pointer;
}

.c-aceite input { width: auto !important; margin-top: 2px; }
.c-aceite strong { display: block; font-size: 14px; }
.c-aceite small { display: block; font-size: 12.5px; color: var(--tinta-2); margin-top: 2px; }

/* ------------------------------------------------------------ Resumo */
.c-resumo { position: sticky; top: 96px; display: grid; gap: 16px; }

.c-resumo-caixa {
    border: 2px solid var(--traco);
    border-radius: 20px;
    background: var(--tinta);
    color: var(--papel);
    box-shadow: var(--sombra);
    padding: 24px;
}

.c-resumo-titulo {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #9b9287;
    margin-bottom: 10px;
}

.c-resumo-caixa h3 { font-size: 21px; margin: 0 0 5px; letter-spacing: -.02em; }
.c-resumo-caixa > p { font-size: 13px; color: #b3aba0; margin: 0 0 16px; line-height: 1.5; }

.c-resumo-valor { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.c-resumo-valor strong { font-size: 33px; font-weight: 850; letter-spacing: -.035em; color: #6ee7b7; }
.c-resumo-valor span { font-size: 13px; color: #b3aba0; }

.c-trocar { display: inline-block; margin-top: 8px; font-size: 12.5px; color: #7dd3fc; text-decoration: underline; }

.c-resumo-lista { margin-top: 20px; padding-top: 18px; border-top: 1.5px dashed rgba(255,255,255,.22); }

.c-resumo-lista strong {
    display: block; font-size: 11px; text-transform: uppercase;
    letter-spacing: .1em; color: #9b9287; margin-bottom: 10px;
}

.c-resumo-lista ul { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 7px; }

.c-resumo-lista li {
    font-size: 13px; color: #cfc7bb; padding-left: 19px; position: relative; line-height: 1.45;
}

.c-resumo-lista li::before { content: "✔"; position: absolute; left: 0; color: #6ee7b7; font-weight: 900; }
.c-resumo-limites { display: flex; flex-wrap: wrap; gap: 6px; }

.c-resumo-limites span {
    font-size: 11px; font-weight: 700;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    padding: 4px 10px;
    color: #cfc7bb;
}

.c-garantia {
    display: flex; gap: 13px; align-items: flex-start;
    border: 2px dashed var(--tinta-3);
    border-radius: 16px;
    padding: 15px 17px;
}

.c-garantia span { font-size: 22px; }
.c-garantia strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.c-garantia div { font-size: 12.5px; color: var(--tinta-2); line-height: 1.5; }

/* --------------------------------------------------------- Pagamento */
.c-pagamento { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(24px, 3vw, 38px); align-items: start; }

.c-pix-caixa {
    border: 2px solid var(--traco);
    border-radius: 22px;
    background: var(--papel);
    box-shadow: var(--sombra-forte);
    padding: 28px;
    text-align: center;
}

.c-pix-caixa.pago { background: var(--verde-claro); border-color: var(--verde); }
.c-qr { display: inline-block; background: #fff; padding: 14px; border: 2px solid var(--traco); border-radius: 18px; }
.c-qr img { width: 230px; height: 230px; image-rendering: pixelated; display: block; }
.c-qr-ajuda { font-size: 13.5px; color: var(--tinta-2); margin: 14px 0 16px; line-height: 1.55; }

.c-copia {
    background: var(--papel-2);
    border: 2px dashed var(--tinta-3);
    border-radius: 13px;
    padding: 13px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    word-break: break-all;
    text-align: left;
    max-height: 96px;
    overflow-y: auto;
    color: var(--tinta-2);
    margin-bottom: 14px;
}

.c-esperando {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 16px; padding: 12px;
    background: var(--papel-2);
    border-radius: 12px;
    font-size: 13px;
    color: var(--tinta-2);
}

.c-girando {
    width: 15px; height: 15px;
    border: 2px solid var(--tinta-3);
    border-top-color: var(--verde);
    border-radius: 50%;
    animation: c-gira .9s linear infinite;
}

@keyframes c-gira { to { transform: rotate(360deg); } }

.c-confirmado span { font-size: 54px; display: block; margin-bottom: 10px; }
.c-confirmado strong { display: block; font-size: 22px; margin-bottom: 6px; }
.c-confirmado p { font-size: 14.5px; color: var(--tinta-2); margin: 0 0 20px; }

.c-resumo-pagamento {
    border: 2px solid var(--traco);
    border-radius: 20px;
    background: var(--papel);
    box-shadow: var(--sombra);
    padding: 24px;
}

.c-resumo-pagamento h3 { font-size: 18px; margin: 0 0 16px; letter-spacing: -.02em; }

.c-linha-valor {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 10px 0;
    border-bottom: 1.5px dashed var(--tinta-3);
    font-size: 14px;
}

.c-linha-valor span { color: var(--tinta-2); }
.c-linha-valor.atraso strong { color: var(--laranja); }
.c-linha-valor.total { border-bottom: none; padding-top: 14px; font-size: 16px; }
.c-linha-valor.total strong { font-size: 26px; font-weight: 850; letter-spacing: -.03em; color: var(--verde); }

.c-enquanto, .c-lembrete {
    margin-top: 18px;
    padding: 15px 17px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.55;
}

.c-enquanto { background: var(--papel-2); border: 2px solid var(--traco); }
.c-enquanto strong { display: block; font-size: 14px; margin-bottom: 5px; }
.c-enquanto p { margin: 0 0 12px; color: var(--tinta-2); }

.c-lembrete { background: var(--laranja-claro); border: 2px solid var(--laranja); color: #7a3410; }
.c-lembrete strong { display: block; font-size: 13.5px; margin-bottom: 7px; color: #8a3208; }
.c-lembrete ul { margin: 0; padding-left: 17px; display: grid; gap: 5px; }

.c-copiado {
    position: fixed;
    left: 50%; bottom: 26px; translate: -50% 0;
    z-index: 120;
    background: var(--tinta);
    color: var(--papel);
    border-radius: 999px;
    padding: 13px 24px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(0,0,0,.3);
    animation: c-sobe .25s cubic-bezier(.2,.9,.3,1);
}

@keyframes c-sobe { from { opacity: 0; translate: -50% 14px; } to { opacity: 1; translate: -50% 0; } }

/* ------------------------------------------------------- Responsivo */
@media (max-width: 980px) {
    .c-duas, .c-pagamento { grid-template-columns: 1fr; }
    .c-resumo { position: static; }
}

@media (max-width: 640px) {
    .c-linha { grid-template-columns: 1fr; }
    .c-trilha .h-cont { gap: 8px; }
    .c-etapa { min-width: 150px; padding: 9px 12px; }
    .c-etapa-texto small { display: none; }
    .c-form, .c-pix-caixa, .c-resumo-pagamento, .c-resumo-caixa { padding: 20px; }
    .c-qr img { width: 190px; height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
    .c-plano:hover { transform: none; }
    .c-girando, .c-copiado { animation: none; }
}