/* =====================================================================
   Loja online da Prymape (catálogo, trilhas, matrícula e confirmação)
   Usa os tokens de cor do style.css (:root)
   ===================================================================== */

.loja-previa{background:#FFF4CC;color:#5A4300;font-size:.92rem;padding:10px 0;border-bottom:1px solid #F1D98A}

/* ---------- Topo do catálogo ---------- */
.loja-topo h1{font-size:clamp(1.9rem,4.4vw,2.9rem);color:#fff;max-width:780px;margin-bottom:.35em}
.loja-topo .rotulo{color:var(--amarelo)}
.loja-topo-txt{max-width:680px;font-size:1.08rem;color:rgba(255,255,255,.88)}
.loja-chips{list-style:none;margin:20px 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.loja-chips li{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:6px 14px;font-weight:700;font-size:.9rem}
.loja-chips .ico{width:16px;height:16px;color:var(--amarelo)}
.loja-ctas{max-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.loja-ctas{grid-template-columns:1fr}}

/* ---------- Como funciona ---------- */
.cf-online{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:cf}
.cfo{background:#fff;border:1.5px solid var(--linha);border-radius:var(--raio);padding:22px 20px}
.secao-azul .cfo{border-color:transparent;box-shadow:var(--sombra)}
.cfo span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--laranja);color:#fff;font-weight:900;margin-bottom:10px}
.cfo h3{font-size:1.1rem;margin-bottom:.25em}
.cfo p{margin:0;color:var(--cinza);font-size:.95rem;line-height:1.5}
@media (max-width:900px){.cf-online{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cf-online{grid-template-columns:1fr}}

/* ---------- Trilhas ---------- */
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.tr-card{--tr:var(--azul-2);display:flex;flex-direction:column;background:#fff;border-radius:18px;padding:24px;box-shadow:var(--sombra);border-top:6px solid var(--tr)}
.tr-azul{--tr:var(--azul-2)}.tr-verde{--tr:#1E8E5A}.tr-vermelho{--tr:var(--vermelho)}.tr-roxo{--tr:#5B3FA8}.tr-rosa{--tr:#C2307A}.tr-laranja{--tr:var(--laranja)}.tr-escuro{--tr:var(--azul-escuro)}
.tr-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.tr-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--tr) 12%,#fff);color:var(--tr)}
.tr-ico .ico{width:24px;height:24px}
.tr-selo{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.3px;color:var(--laranja-marca);background:var(--laranja-claro);border-radius:99px;padding:4px 10px}
.tr-selo .ico{width:14px;height:14px}
.tr-card h3{font-size:1.25rem;margin-bottom:.35em}
.tr-card h3 a{color:inherit}
.tr-card > p{color:var(--cinza);font-size:.96rem;line-height:1.5;margin:0 0 12px}
.tr-cursos{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px;font-size:.95rem}
.tr-cursos li{display:flex;gap:8px;align-items:flex-start}
.tr-cursos .ico{width:18px;height:18px;color:var(--tr);flex:none;margin-top:3px}
.tr-meta{font-size:.85rem;color:var(--cinza);margin:0 0 14px}
.tr-preco{margin-top:auto;padding-top:14px;border-top:1px dashed var(--linha);display:grid;gap:2px}
.tr-preco s{font-size:.85rem;color:var(--cinza)}
.tr-preco strong{font-size:1.7rem;color:var(--azul);line-height:1.1}
.tr-preco small{font-size:.85rem;color:var(--cinza)}
.tr-acoes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.tr-acoes .btn{padding:12px 10px;font-size:.88rem}
.btn-contorno{background:#fff;color:var(--azul);border-color:var(--azul-claro-2)}
.btn-contorno:hover{border-color:var(--azul-2);color:var(--azul-2)}

/* ---------- Catálogo (cards com preço e botão) ---------- */
.om-card-online{position:relative;padding-right:14px}
.om-card-online .tec-txt{flex:1;min-width:0}
.om-card-online .tec-meta b{color:var(--azul);font-weight:900}
.om-link{color:inherit}
.om-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.om-comprar{position:relative;z-index:1;flex:none;align-self:center;font-weight:900;font-size:.78rem;text-transform:uppercase;letter-spacing:.3px;color:#fff;background:var(--laranja);border-radius:8px;padding:9px 12px;transition:background .2s}
.om-comprar:hover{background:var(--laranja-escuro);color:#fff}
@media (max-width:420px){.om-comprar{padding:8px 9px;font-size:.72rem}}

/* ---------- Caixa online na página do curso ---------- */
.caixa-online{margin:20px 0;padding:18px;border-radius:14px;background:var(--azul-claro);border:1.5px solid var(--azul-claro-2)}
.co-rotulo{display:flex;align-items:center;gap:6px;font-weight:900;color:var(--azul);margin:0 0 6px;font-size:.95rem}
.co-rotulo .ico{width:18px;height:18px;color:var(--azul-2)}
.co-preco{margin:0 0 10px;display:grid}
.co-preco strong{font-size:1.6rem;color:var(--azul);line-height:1.15}
.co-preco small{color:var(--cinza);font-size:.85rem}
.co-lista{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:4px;font-size:.92rem}
.co-lista li{display:flex;gap:6px;align-items:flex-start}
.co-lista .ico{width:16px;height:16px;color:#1E8E5A;flex:none;margin-top:4px}
.co-trilha{margin:12px 0 0;font-size:.88rem;color:var(--cinza)}

/* ---------- Botão online no cartão do técnico ---------- */
.tpc-online{margin-top:10px;white-space:normal}
.tpc-formas{margin:6px 0 0;font-size:.82rem;color:var(--cinza)}

/* ---------- Selo de pagamento ---------- */
.selo-pagto{display:flex;align-items:flex-start;gap:12px;margin-top:22px;padding:14px 16px;border-radius:12px;background:#F4F8FC;border:1px solid var(--linha);text-align:left}
.sp-cadeado{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:#1E8E5A;flex:none;border:1px solid var(--linha)}
.sp-txt{display:grid;gap:2px}
.sp-txt strong{color:var(--azul);font-size:.95rem}
.sp-txt small{color:var(--cinza);font-size:.84rem;line-height:1.45}
.sp-indicacao{margin:10px 0 0;font-size:.8rem;color:var(--cinza);text-align:left}
.sp-indicacao a{color:var(--azul-2);text-decoration:underline}

.secao-cinza{background:#F6F8FB}
.loja-faq{max-width:860px}

/* ---------- Página da trilha ---------- */
.tr-oferta{background:#fff;color:var(--texto);border-radius:20px;padding:26px;box-shadow:var(--sombra-forte);border-top:6px solid var(--laranja);text-align:center}
.tro-rotulo{font-weight:900;color:var(--azul);margin:0 0 6px}
.tro-de{margin:0;color:var(--cinza);font-size:.95rem}
.tro-valor{margin:0;font-size:2.4rem;font-weight:900;color:var(--azul);line-height:1.1}
.tro-formas{margin:4px 0 16px;color:var(--cinza);font-size:.9rem}
.tr-oferta ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;text-align:left;font-size:.94rem}
.tr-oferta li{display:flex;gap:8px;align-items:flex-start}
.tr-oferta .ico{width:18px;height:18px;color:#1E8E5A;flex:none;margin-top:3px}
.trilha-cursos{display:grid;gap:14px;max-width:880px}
.tc-item{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:14px;border:1.5px solid var(--linha);background:#fff}
.tc-num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--azul);color:#fff;font-weight:900;flex:none}
.tc-item h3{font-size:1.12rem;margin:0 0 2px}
.tc-item h3 a{color:inherit}
.tc-meta{margin:0 0 4px;font-size:.86rem;font-weight:700;color:var(--azul-2)}
.tc-item p:last-child{margin:0;color:var(--cinza);font-size:.95rem;line-height:1.5}
.tc-para-tit{margin-top:40px}

/* ---------- Matrícula (formulário) ---------- */
.mat-secao{background:#F6F8FB;padding-top:34px}
.migalhas-escura,.migalhas-escura a{color:var(--cinza)}
.migalhas-escura a{text-decoration:underline}
.mat-titulo{font-size:clamp(1.7rem,3.6vw,2.3rem);margin:10px 0 .2em}
.mat-sub{color:var(--cinza);margin:0 0 26px}
.mat-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
@media (max-width:960px){.mat-grid{grid-template-columns:1fr}.mat-resumo{order:-1}}
.mat-form{display:grid;gap:18px}
.mat-form fieldset{margin:0;border:0;background:#fff;border-radius:16px;padding:22px 22px 6px;box-shadow:var(--sombra);display:grid;grid-template-columns:1fr 1fr;column-gap:16px;min-width:0}
.mat-form legend{float:left;width:100%;grid-column:1/-1;display:flex;align-items:center;gap:10px;font-weight:900;color:var(--azul);font-size:1.1rem;margin-bottom:14px;padding:0}
.mat-form legend span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--laranja);color:#fff;font-size:.95rem}
.mat-form label{margin-bottom:16px;min-width:0}
.mat-form label small{font-weight:400;color:var(--cinza)}
.mat-form .mat-cheio,.mat-form .mat-dica,.mat-form .mat-aceite,.mat-form .btn,.mat-form fieldset > .mat-erro{grid-column:1/-1}
.mat-form input[type=text],.mat-form input[type=email],.mat-form input[type=tel],.mat-form input[type=date],.mat-form select{display:block;width:100%;margin-top:6px;padding:12px 13px;border-radius:8px;border:1.5px solid var(--linha);font:inherit;font-weight:400;color:var(--texto);background:#fff;min-height:48px}
.mat-form input:focus,.mat-form select:focus{outline:none;border-color:var(--azul-2);box-shadow:0 0 0 4px rgba(20,111,164,.14)}
.mat-form [aria-invalid=true]{border-color:#C62828;background:#FFF7F7}
.mat-erro{display:block;margin-top:5px;color:#B71C1C;font-size:.84rem;font-weight:700}
.mat-alerta{background:#FDECEA;color:#8E1B12;border:1px solid #F5C2BC;border-radius:12px;padding:12px 16px;font-weight:700}
.mat-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mat-dica{margin:-4px 0 16px;color:var(--cinza);font-size:.92rem}
.mat-centro{text-align:center;margin:10px 0 16px}
.mat-aceite{display:flex !important;gap:10px;align-items:flex-start;font-weight:400 !important;color:var(--texto) !important}
.mat-aceite input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--laranja)}
.mat-aceite a{color:var(--azul-2);text-decoration:underline}
.mat-form .btn[disabled]{opacity:.7;cursor:wait}
@media (max-width:600px){.mat-form fieldset{grid-template-columns:1fr;padding:18px 16px 4px}}

.mat-resumo{position:sticky;top:110px}
@media (max-width:960px){.mat-resumo{position:static}}
.mr-cartao{background:#fff;border-radius:18px;padding:22px;box-shadow:var(--sombra-forte);border-top:6px solid var(--laranja)}
.mr-rotulo{margin:0 0 4px;font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.4px;color:var(--laranja-marca)}
.mr-cartao h2{font-size:1.3rem;margin:0 0 4px}
.mr-detalhe{margin:0 0 12px;color:var(--cinza);font-size:.9rem}
.mr-cursos{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px;font-size:.92rem}
.mr-cursos li{display:flex;gap:6px;align-items:flex-start}
.mr-cursos .ico{width:16px;height:16px;color:var(--azul-2);flex:none;margin-top:4px}
.mr-preco{display:grid;padding:14px 0;border-top:1px dashed var(--linha);border-bottom:1px dashed var(--linha)}
.mr-vezes{font-weight:900;color:var(--laranja-marca)}
.mr-preco strong{font-size:2rem;color:var(--azul);line-height:1.1}
.mr-preco small{color:var(--cinza);font-size:.85rem}
.mr-garantias{list-style:none;margin:14px 0 10px;padding:0;display:grid;gap:6px;font-size:.92rem}
.mr-garantias li{display:flex;gap:6px;align-items:flex-start}
.mr-garantias .ico{width:16px;height:16px;color:#1E8E5A;flex:none;margin-top:4px}
.mr-ver{font-size:.88rem;color:var(--azul-2);text-decoration:underline}
.mr-ajuda{text-align:center;font-size:.9rem;color:var(--cinza);margin:14px 0 0}
.mr-ajuda a{color:var(--azul-2);text-decoration:underline}

/* ---------- Confirmação ---------- */
.mat-status{background:#F6F8FB}
.mat-status-in{max-width:720px;text-align:center;background:#fff;border-radius:22px;padding:40px 32px;box-shadow:var(--sombra)}
@media (max-width:600px){.mat-status-in{padding:30px 18px}}
.st-icone{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;margin-bottom:14px}
.st-icone .ico{width:36px;height:36px}
.st-ok{background:#E3F5EB;color:#1E8E5A}
.st-espera{background:var(--laranja-claro);color:var(--laranja-marca)}
.mat-status h1{font-size:clamp(1.6rem,3.6vw,2.2rem)}
.st-lead{font-size:1.06rem;color:var(--texto);max-width:580px;margin:0 auto 22px}
.st-acesso{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 22px;text-align:left}
.st-acesso p{margin:0;background:var(--azul-claro);border-radius:12px;padding:12px 14px;display:grid;min-width:0}
.st-acesso small{color:var(--cinza);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.st-acesso strong{color:var(--azul);font-size:1.02rem;overflow-wrap:anywhere}
@media (max-width:600px){.st-acesso{grid-template-columns:1fr}}
.st-obs{color:var(--cinza);font-size:.9rem;margin:14px 0 0}
.st-carregando{display:flex;justify-content:center;gap:8px;margin:10px 0 6px}
.st-carregando span{width:12px;height:12px;border-radius:50%;background:var(--azul-2);animation:st-pulo 1s infinite ease-in-out}
.st-carregando span:nth-child(2){animation-delay:.15s}.st-carregando span:nth-child(3){animation-delay:.3s}
@keyframes st-pulo{0%,80%,100%{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.st-carregando span{animation:none}}
.st-passos{text-align:left;max-width:560px;margin:0 auto 22px;padding-left:22px;display:grid;gap:8px}
.st-resumo{margin:30px auto 0;max-width:560px;text-align:left;border-top:1px solid var(--linha);padding-top:16px;display:grid;gap:8px}
.st-resumo div{display:flex;justify-content:space-between;gap:16px;font-size:.94rem}
.st-resumo dt{color:var(--cinza)}
.st-resumo dd{margin:0;font-weight:700;color:var(--azul);text-align:right}
.st-resumo a{color:var(--azul-2);text-decoration:underline}

/* ---------- Texto legal ---------- */
.texto-legal{max-width:860px}
.texto-legal h2{font-size:1.25rem;margin-top:1.6em}
.texto-legal a{color:var(--azul-2);text-decoration:underline}