/* Loja de cursos online da Safe R&S (25/09/2026).
   Carregado depois do style.css do site, só nas páginas da loja. As cores
   vêm das variáveis do manual da marca (--marca-*), ligadas pelo
   [data-marca="saferes"] do <main>. Mobile first. */

.loja [hidden], .loja-hero [hidden] { display: none !important; }

/* ------------------------------------------------------------------ Hero */
.loja-hero { padding-block: clamp(2rem, 1.2rem + 3vw, 4rem); }
/* Auditoria 28/09/2026 (velocidade, gargalo 1): a estampa do hero vem de um
   tile de 380 px SÓ DA LOJA (pattern-sst-380.webp, 67 KB). A do site tem 760 px
   e 170 KB, mas o style.css já a desenha com mask-size 380px — e numa máscara só
   o alfa conta. O site (/saferes/, home) continua com a estampa de 760 px.
   mask-image é UMA propriedade: o gradiente repete o do style.css, senão some.
   O carimbo ?v= (marcador V:nome-do-arquivo) é trocado por saferes_loja._assets no build. */
.hero--marca.loja-hero::after {
  -webkit-mask-image: url("../img/saferes-loja/pattern-sst-380.webp?v=bf428a18"), linear-gradient(105deg, transparent 0%, #000 45%, #000 100%);
  mask-image: url("../img/saferes-loja/pattern-sst-380.webp?v=bf428a18"), linear-gradient(105deg, transparent 0%, #000 45%, #000 100%);
}
.loja-hero__grade { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: center; }
.loja-hero--com-figura .loja-hero__grade { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .loja-hero--com-figura .loja-hero__grade { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
}
.loja-hero__texto { min-width: 0; }
.loja-hero__logo { width: min(100%, 11.5rem); height: auto; margin-bottom: 1.1rem; }
.loja-hero .olho { color: var(--marca-teal-escuro); }
.loja-hero h1 {
  font-family: "Heebo", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3rem);
  color: var(--marca-roxo); margin-bottom: .5em; max-width: 22ch;
}
.loja-hero__lead { font-size: var(--f-lead); color: #3d4152; max-width: 54ch; margin-bottom: 1.4rem; }
.loja-selos { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.6rem; }
.loja-selos li {
  margin: 0; padding: .38rem .8rem; border-radius: var(--r-pill);
  background: #fff; border: 1px solid rgba(74, 63, 134, .18);
  font-size: var(--f-xs); font-weight: 700; color: var(--marca-roxo);
}
.loja-selos li:last-child { background: var(--marca-roxo); border-color: var(--marca-roxo); color: #fff; }
.loja-hero__figura { position: relative; margin: 0; justify-self: center; width: min(100%, 20rem); }
.loja-hero__figura::before {
  content: ""; position: absolute; inset: 14% 2% 4%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(12, 157, 148, .22), rgba(74, 63, 134, .10) 60%, transparent 72%);
}
.loja-hero__figura img { position: relative; z-index: 1; width: 100%; height: auto; }
.loja-hero__selo {
  position: absolute; z-index: 2; left: -4%; bottom: 10%;
  display: flex; align-items: center; gap: .55rem; max-width: 13rem;
  padding: .6rem .8rem; border-radius: var(--r); background: #fff;
  box-shadow: 0 10px 26px rgba(28, 29, 32, .14); font-size: var(--f-xs); line-height: 1.3; color: #3d4152;
}
.loja-hero__selo svg { width: 1.6rem; height: 1.6rem; flex: none; padding: .3rem; border-radius: 50%;
  background: var(--marca-teal); color: #fff; }
.loja-hero__selo b { display: block; color: var(--marca-roxo); }
@media (max-width: 899px) {
  /* No celular a personagem fica pequena, ao lado do selo do certificado,
     para os cursos não ficarem a duas telas de distância. */
  .loja-hero__figura { width: 100%; justify-self: stretch; display: flex; align-items: center; gap: 1rem; }
  .loja-hero__figura::before { inset: auto; left: -.5rem; top: 12%; width: 8.5rem; height: 8.5rem; }
  .loja-hero__figura img { width: 7.5rem; flex: none; }
  .loja-hero__selo { position: static; flex: 1 1 auto; max-width: 15rem; }
}

/* --------------------------------------------------------- Como funciona */
.loja-como .sec__cabeca { margin-bottom: 1.6rem; }
.loja-passos { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset: none; }
.loja-passos li {
  margin: 0; padding: 1.25rem 1.2rem; border-radius: var(--r);
  background: #fff; border: 1px solid var(--linha); box-shadow: var(--sombra-sm);
}
.loja-passos__n {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; margin-bottom: .7rem;
  border-radius: 50%; background: rgba(74, 63, 134, .1); color: var(--marca-roxo);
  font-family: "Heebo", system-ui, sans-serif; font-weight: 700;
}
.loja-passos h3 { font-size: 1.12rem; margin-bottom: .35em; }
.loja-passos p { font-size: var(--f-sm); color: var(--tinta-70); margin: 0; }
@media (max-width: 639px) {
  .loja-passos { gap: .6rem; }
  .loja-passos li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; padding: .9rem 1rem; }
  .loja-passos__n { grid-row: span 2; margin: 0; }
  .loja-passos h3 { font-size: 1.02rem; margin-bottom: .15em; }
}

/* --------------------------------------------------------------- Filtro */
.loja-filtro { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
.loja-filtro legend { padding: 0; margin-bottom: .6rem; font-size: var(--f-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-50); }
.loja-filtro__opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.loja-filtro input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.loja-filtro label {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: .5rem 1rem;
  border: 2px solid rgba(74, 63, 134, .22); border-radius: var(--r-pill); background: #fff;
  font-size: var(--f-sm); font-weight: 700; color: var(--marca-roxo); cursor: pointer; user-select: none;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.loja-filtro label:hover { border-color: var(--marca-roxo); }
@media (max-width: 639px) {
  .loja-filtro label { min-height: 2.3rem; padding: .35rem .8rem; font-size: var(--f-xs); }
}
.loja-filtro input:checked + label { background: var(--marca-roxo); border-color: var(--marca-roxo); color: #fff; }
.loja-filtro input:focus-visible + label { outline: 3px solid var(--marca-teal); outline-offset: 2px; }
/* Filtro sem JS: a opção marcada esconde as outras trilhas. */
.loja-filtro:has(#lf-todos:checked) ~ .loja-trilhas .loja-trilha:not([data-trilha="todos"]),
.loja-filtro:has(#lf-publico:checked) ~ .loja-trilhas .loja-trilha:not([data-trilha="publico"]),
.loja-filtro:has(#lf-lideres:checked) ~ .loja-trilhas .loja-trilha:not([data-trilha="lideres"]) { display: none; }

/* --------------------------------------------------------------- Cursos */
.loja-trilhas { display: grid; gap: clamp(2rem, 1.4rem + 2vw, 3rem); }
.loja-trilha__cabeca { margin-bottom: 1rem; max-width: 68ch; }
.loja-trilha__cabeca h3 { margin-bottom: .25em; }
.loja-trilha__cabeca p { margin: 0; color: var(--tinta-70); font-size: var(--f-sm); }
.loja-trilha__conta { display: inline-block; margin-left: .3rem; font-weight: 700; color: var(--marca-teal-escuro); }
.loja-cursos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
/* Trilha de 4 cursos: uma fileira só na tela larga, em vez de 3 + 1. */
@media (min-width: 1140px) { .loja-cursos[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.curso {
  display: flex; flex-direction: column; gap: .7rem; min-width: 0;
  padding: 1.3rem 1.25rem 1.25rem; border-radius: var(--r);
  background: #fff; border: 1px solid var(--linha); box-shadow: var(--sombra-sm);
  transition: border-color var(--t), box-shadow var(--t);
}
.curso:hover { border-color: var(--marca-teal); box-shadow: var(--sombra); }
.curso:target { border-color: var(--marca-roxo); box-shadow: 0 0 0 3px rgba(74, 63, 134, .18); }
.curso__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.curso__cod {
  padding: .2rem .6rem; border-radius: var(--r-pill); background: rgba(74, 63, 134, .1);
  color: var(--marca-roxo); font-size: var(--f-xs); font-weight: 700; letter-spacing: .06em;
}
.curso__carga { font-size: var(--f-xs); font-weight: 700; color: var(--marca-teal-escuro); }
.curso__titulo {
  margin: 0; font-family: "Heebo", "Segoe UI", system-ui, sans-serif;
  font-size: 1.18rem; line-height: 1.25; color: var(--marca-roxo);
}
.curso p { margin: 0; font-size: var(--f-sm); color: var(--tinta-70); overflow-wrap: anywhere; }
.curso p b { color: var(--tinta); }
.curso__aulas { border-top: 1px solid var(--linha); padding-top: .6rem; }
.curso__aulas summary {
  cursor: pointer; list-style: none; font-size: var(--f-sm); font-weight: 700; color: var(--marca-teal-escuro);
  display: flex; align-items: center; gap: .4rem; min-height: 2rem;
}
.curso__aulas summary::-webkit-details-marker { display: none; }
.curso__aulas summary::after { content: "+"; font-size: 1.15rem; line-height: 1; }
.curso__aulas[open] summary::after { content: "−"; }
.curso__aulas ol { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .55rem; }
.curso__aulas li { margin: 0; font-size: var(--f-sm); color: var(--tinta-70); }
.curso__aulas li b { display: block; color: var(--marca-roxo); }
.curso__aulas li span { display: block; font-size: var(--f-xs); line-height: 1.5; }
.curso__material { display: flex; gap: .55rem; align-items: flex-start; padding: .7rem .8rem;
  border-radius: var(--r-sm); background: var(--marca-papel); }
.curso__material svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .15rem; color: var(--marca-teal-escuro); }
.curso__rodape {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem;
}
.curso .curso__preco { display: flex; flex-direction: column; line-height: 1.1; color: var(--marca-roxo); }
.curso__preco span { font-family: "Heebo", system-ui, sans-serif; font-size: 1.45rem; font-weight: 700; }
.curso__preco small { font-size: var(--f-xs); color: var(--tinta-50); margin-top: .15rem; }
.curso__btn { flex: 1 1 auto; max-width: 100%; }
@media (min-width: 420px) { .curso__btn { flex: 0 1 auto; } }
/* Com a compra ligada, dois caminhos por curso ("para mim" e "para minha
   equipe"): ocupam a largura do cartão e empilham quando não cabem lado a lado. */
.curso__acoes { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; max-width: 100%; }
.curso__acoes .curso__btn { white-space: normal; text-align: center; justify-content: center; }
.loja[data-loja-estado="online"] .curso__acoes { flex: 1 1 100%; }
.loja[data-loja-estado="online"] .curso__acoes .curso__btn { flex: 1 1 12rem; }
.loja-nota { margin: 1.6rem 0 0; font-size: var(--f-sm); color: var(--tinta-50); }

/* ------------------------------------------------------ Por dentro da aula */
.loja-quadros { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.loja-quadro { margin: 0; border-radius: var(--r); overflow: hidden; background: #fff;
  border: 1px solid var(--linha); box-shadow: var(--sombra-sm); }
.loja-quadro img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.loja-quadro figcaption { padding: .9rem 1rem 1.05rem; font-size: var(--f-sm); color: var(--tinta-70); }
.loja-quadro figcaption b { display: block; margin-bottom: .2rem; font-family: "Heebo", system-ui, sans-serif;
  font-size: 1.05rem; color: var(--marca-roxo); }
.loja-recebe { margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); padding: 1.4rem 1.3rem; border-radius: var(--r);
  background: var(--marca-papel); }
.loja-recebe h3 { font-size: 1.2rem; margin-bottom: .9rem; }
.loja-recebe ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.loja-recebe li { margin: 0; display: flex; gap: .55rem; align-items: flex-start; font-size: var(--f-sm); color: var(--tinta); }
.loja-recebe svg, .loja-resumo__lista svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .1rem;
  padding: .18rem; border-radius: 50%; background: var(--marca-teal); color: #fff; }

/* ----------------------------------------------------- Empresa / catálogo */
.loja-empresa__caixa {
  display: grid; gap: 1.6rem; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--linha); box-shadow: var(--sombra-sm);
}
@media (min-width: 900px) { .loja-empresa__caixa { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; } }
.loja-empresa__caixa h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.loja-empresa__caixa p { color: var(--tinta-70); }
.loja-empresa__caixa .acoes { margin-top: 1.2rem; }
.loja-empresa__caixa .btn { white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; }
.loja-empresa__pdf { padding: 1.3rem; border-radius: var(--r); background: var(--marca-papel); }
.loja-empresa__pdf p { margin-bottom: 1rem; }
.loja-empresa__pdf p b { display: block; color: var(--marca-roxo); font-size: 1.05rem; }
.loja-empresa__pdf p span { font-size: var(--f-sm); }
.loja-aluno { margin: 1.6rem 0 0; font-size: var(--f-sm); color: var(--tinta-70); }
[data-marca="saferes"] .loja .faq summary { color: var(--marca-roxo); }
[data-marca="saferes"] .faq details[open] { border-color: var(--marca-teal); }
[data-marca="saferes"] .faq details[open] summary::after { background: var(--marca-teal-escuro); }

/* Botões longos não podem estourar a largura do celular. */
.loja .btn { max-width: 100%; }
@media (max-width: 420px) {
  .loja .btn { white-space: normal; text-align: center; line-height: 1.25; }
}

/* ================================================================ Checkout */
.loja-checkout { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: start; }
@media (min-width: 960px) { .loja-checkout { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); } }
.loja-checkout__principal { min-width: 0; }
.loja-checkout-sec { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }

.loja-aviso {
  padding: 1.3rem 1.3rem 1.4rem; border-radius: var(--r); margin-bottom: 1.2rem;
  background: var(--marca-papel); border: 1px solid rgba(74, 63, 134, .18);
}
.loja-aviso p { color: var(--tinta); }
.loja-aviso .acoes { margin-top: 1rem; }

.loja-form { display: grid; gap: 1.2rem; }
.loja-form__erro-geral {
  margin: 0; padding: .8rem 1rem; border-radius: var(--r-sm);
  background: #FDECEC; border: 1px solid #F3B7B7; color: #8A1F1F; font-weight: 700; font-size: var(--f-sm);
}
.loja-bloco {
  margin: 0; min-width: 0; padding: 1.3rem 1.2rem 1.4rem; border-radius: var(--r);
  background: #fff; border: 1px solid var(--linha); box-shadow: var(--sombra-sm);
}
.loja-bloco legend {
  display: flex; align-items: center; gap: .6rem; padding: 0 .3rem; margin-left: -.3rem;
  font-family: "Heebo", system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--marca-roxo);
}
.loja-bloco legend span {
  display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--marca-roxo); color: #fff; font-size: .95rem;
}
.loja-bloco__nota { margin: .9rem 0; font-size: var(--f-sm); color: var(--tinta-70); }
.loja-campos { display: grid; gap: .9rem 1rem; margin-top: .9rem; }
@media (min-width: 640px) { .loja-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.loja-campos--participante { margin-top: .4rem; }
@media (min-width: 640px) { .loja-campos--participante .campo:first-child { grid-column: 1 / -1; } }

.campo { min-width: 0; }
.campo label { display: block; }
.campo__rotulo { display: block; margin-bottom: .3rem; font-size: var(--f-sm); font-weight: 700; color: var(--tinta); }
.loja input[type="text"], .loja input[type="email"], .loja input[type="tel"], .loja input[type="number"] {
  width: 100%; min-height: 2.9rem; padding: .6rem .8rem; border-radius: var(--r-sm);
  border: 1.5px solid #C9CFDA; background: #fff; color: var(--tinta);
  font: inherit; font-size: 1rem; line-height: 1.3;
  transition: border-color var(--t), box-shadow var(--t);
}
.loja input:focus { outline: none; border-color: var(--marca-roxo); box-shadow: 0 0 0 3px rgba(74, 63, 134, .18); }
.loja input[readonly] { background: var(--marca-papel); color: var(--tinta-70); }
.campo--erro input { border-color: #C0392B; }
.campo--erro input:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .18); }
.campo__ajuda { display: block; margin-top: .3rem; font-size: var(--f-xs); color: var(--tinta-50); }
.campo__erro { margin: .3rem 0 0; font-size: var(--f-xs); font-weight: 700; color: #B03A2E; }
.campo__erro:empty { display: none; }

/* Checkout "para mim": aviso com o caminho da equipe quando o documento é CNPJ. */
.loja-equipe-aviso {
  margin-top: 1rem; padding: 1rem 1.1rem 1.1rem; border-radius: var(--r-sm);
  background: var(--marca-papel); border: 1px solid rgba(74, 63, 134, .25);
}
.loja-equipe-aviso p { margin: 0; font-size: var(--f-sm); color: var(--tinta); }
.loja-equipe-aviso p + p { margin-top: .8rem; }
.loja-equipe-aviso .btn { max-width: 100%; white-space: normal; text-align: center; }

.loja-check { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1rem; cursor: pointer; }
.loja-check input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; accent-color: var(--marca-roxo); }
.loja-check span { font-size: var(--f-sm); color: var(--tinta); }
.loja-check small { display: block; font-size: var(--f-xs); color: var(--tinta-50); }
.campo--aceite .loja-check { margin-top: .6rem; }

.loja-participantes { display: grid; gap: .9rem; }
.participante { margin: 0; min-width: 0; padding: 1rem 1rem 1.1rem; border-radius: var(--r-sm);
  border: 1px dashed #C9CFDA; background: #FBFBFE; }
.participante legend { padding: 0 .3rem; font-weight: 700; color: var(--marca-roxo); font-size: var(--f-sm); }
.participante legend small { font-weight: 400; color: var(--marca-teal-escuro); }
.participante--espelho { border-style: solid; border-color: rgba(12, 157, 148, .45); }

.loja-isca { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.loja-form__enviar { width: 100%; margin-top: 1.2rem; font-size: 1rem; padding-block: 1.05em; }
.loja-form__enviar:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.loja-form__rodape { margin: .8rem 0 0; font-size: var(--f-xs); color: var(--tinta-50); }

.loja-sucesso {
  padding: 1.5rem 1.3rem; border-radius: var(--r); background: #fff;
  border: 2px solid var(--marca-teal); box-shadow: var(--sombra);
}
.loja-sucesso:focus { outline: none; }
.loja-sucesso h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); }
.loja-sucesso__link { font-size: var(--f-sm); overflow-wrap: anywhere; padding: .7rem .8rem;
  border-radius: var(--r-sm); background: var(--marca-papel); }

.loja-resumo {
  position: relative; padding: 1.4rem 1.3rem; border-radius: var(--r);
  background: #fff; border: 1px solid var(--linha); box-shadow: var(--sombra-sm);
}
@media (min-width: 960px) { .loja-resumo { position: sticky; top: calc(var(--nav-h) + 1rem); } }
@media (max-width: 959px) {
  .loja-resumo { order: -1; }
  /* Sem compra online, o aviso (e o WhatsApp) vem antes do resumo. */
  .loja-checkout-sec:is([data-loja-estado="compra_offline"], [data-loja-estado="falha_api"],
    [data-loja-estado="indisponivel"], [data-loja-estado="sem_curso"]) .loja-resumo { order: 0; }
}
.loja-resumo .olho { margin-bottom: .5rem; }
.loja-resumo__cod { margin: 0 0 .2rem; font-size: var(--f-xs); font-weight: 700; letter-spacing: .08em; color: var(--marca-teal-escuro); }
.loja-resumo__titulo { font-size: 1.25rem; line-height: 1.25; margin-bottom: .3em; }
.loja-resumo__info { font-size: var(--f-sm); color: var(--tinta-70); margin-bottom: 1rem; }
.loja-resumo__valores { margin: 0; display: grid; gap: .45rem; padding: .9rem 0; border-block: 1px solid var(--linha); }
.loja-resumo__valores div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--f-sm); }
.loja-resumo__valores dt { color: var(--tinta-70); }
.loja-resumo__valores dd { margin: 0; font-weight: 700; color: var(--tinta); text-align: right; }
.loja-resumo__total dt, .loja-resumo__total dd { font-size: 1.1rem; color: var(--marca-roxo); }
.loja-resumo__total dd { font-family: "Heebo", system-ui, sans-serif; font-size: 1.35rem; }
.loja-resumo__lista { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; }
.loja-resumo__lista li { margin: 0; display: flex; gap: .5rem; font-size: var(--f-xs); color: var(--tinta-70); }
.loja-resumo__ajuda { margin: 0; font-size: var(--f-sm); color: var(--tinta-70); }

/* ================================================================== Pedido */
.loja-pedido-sec { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.loja-pedido { display: grid; gap: 1.2rem; }
.loja-status {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem 1.3rem; border-radius: var(--r);
  background: #fff; border: 2px solid var(--linha); box-shadow: var(--sombra-sm);
}
.loja-status__ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; margin-top: .1rem;
  background: var(--marca-papel); position: relative; }
.loja-status__ico::after { content: ""; position: absolute; inset: .75rem; border-radius: 50%; background: #9aa1b2; }
.loja-status__corpo { min-width: 0; }
.loja-status h2 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); margin-bottom: .3em; }
.loja-status p { color: var(--tinta-70); margin-bottom: 0; }
.loja-status .acoes:not(:empty) { margin-top: 1rem; }
.loja-status[data-tipo="espera"] { border-color: rgba(74, 63, 134, .35); }
.loja-status[data-tipo="espera"] .loja-status__ico::after { background: var(--marca-roxo); }
.loja-status[data-tipo="processando"] { border-color: rgba(12, 157, 148, .45); }
.loja-status[data-tipo="processando"] .loja-status__ico::after,
.loja-pedido-sec[data-loja-estado="carregando"] .loja-status__ico::after {
  inset: .45rem; background: none; border: 3px solid rgba(12, 157, 148, .25); border-top-color: var(--marca-teal);
  animation: loja-gira 1s linear infinite;
}
.loja-status[data-tipo="ok"] { border-color: var(--marca-teal); background: #F2FBFA; }
.loja-status[data-tipo="ok"] .loja-status__ico { background: var(--marca-teal); }
.loja-status[data-tipo="ok"] .loja-status__ico::after {
  inset: .7rem .8rem .95rem; border-radius: 0; background: none;
  border: solid #fff; border-width: 0 0 3px 3px; transform: rotate(-45deg);
}
.loja-status[data-tipo="alerta"] { border-color: #E3B04B; background: #FFF9EC; }
.loja-status[data-tipo="alerta"] .loja-status__ico::after { background: #D08A00; }
@keyframes loja-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loja-status__ico::after { animation: none !important; } }

.loja-pedido__dados {
  margin: 0; display: grid; gap: .8rem 1.4rem; padding: 1.2rem 1.3rem; border-radius: var(--r);
  background: var(--marca-papel); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
@media (min-width: 640px) { .loja-pedido__dados div:nth-child(2) { grid-column: span 2; } }
.loja-pedido__dados dt { font-size: var(--f-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-50); }
.loja-pedido__dados dd { margin: .15rem 0 0; font-weight: 700; color: var(--marca-roxo); overflow-wrap: anywhere; }
.loja-pedido__participantes h3 { font-size: 1.15rem; }
.loja-pedido__participantes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.loja-pedido__participantes li {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .75rem .9rem; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--linha);
}
.loja-pedido__participantes li > div { min-width: 0; }
.loja-pedido__nome { display: block; font-weight: 700; color: var(--tinta); overflow-wrap: anywhere; }
.loja-pedido__participantes small { display: block; color: var(--tinta-50); overflow-wrap: anywhere; }
.loja-pedido__nota { margin: .6rem 0 0; font-size: var(--f-xs); color: var(--tinta-50); }
.loja-chip { padding: .25rem .65rem; border-radius: var(--r-pill); font-size: var(--f-xs); font-weight: 700; white-space: nowrap; }
.loja-chip--ok { background: rgba(12, 157, 148, .14); color: var(--marca-teal-escuro); }
.loja-chip--espera { background: rgba(74, 63, 134, .1); color: var(--marca-roxo); }
.loja-pedido__atualiza { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0;
  font-size: var(--f-xs); color: var(--tinta-50); }
.loja-pedido__btn { padding: .6em 1.2em; }
.loja-pedido__ajuda { padding: 1.2rem 1.3rem; border-radius: var(--r); border: 1px solid var(--linha); }
.loja-pedido__ajuda p { font-size: var(--f-sm); color: var(--tinta-70); }
.loja-pedido__ajuda .acoes { margin-top: .9rem; }

/* ================================================================== Termos */
.loja-termos { font-size: var(--f-base); }
.loja-termos h2 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); margin-top: 1.8em; }
.loja-termos p, .loja-termos li { color: var(--tinta-70); }
.loja-termos__versao { font-size: var(--f-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--marca-teal-escuro) !important; }
.loja-termos__volta { margin-top: 2rem; }

/* ============================================================ Área do aluno */
.loja-aluno-caixa { text-align: center; padding: clamp(1.6rem, 1rem + 3vw, 3rem) 1.3rem; border-radius: var(--r-lg);
  background: var(--marca-papel); }
.loja-aluno-caixa__logo { width: min(100%, 12rem); height: auto; margin: 0 auto 1.2rem; }
.loja-aluno-caixa h1 { font-family: "Heebo", system-ui, sans-serif; color: var(--marca-roxo); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); }
.loja-aluno-caixa p { color: var(--tinta-70); }
.loja-aluno-caixa .btn { margin-top: .4rem; }
.loja-aluno-caixa__nota { font-size: var(--f-sm); margin-top: 1rem; }

/* ======================================================= Cupom (28/09/2026) */
.loja-cupom { margin-top: .2rem; }
.loja-cupom .campo__rotulo small { font-weight: 400; color: var(--tinta-50); }
.loja-cupom__linha { display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap; }
.loja-cupom__linha input { flex: 1 1 11rem; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
.loja-cupom__botao { flex: none; min-height: 2.9rem; }
.loja-cupom__ok { margin: .45rem 0 0; font-size: var(--f-sm); font-weight: 700; color: #0B7A3E; }
.loja-resumo__desconto dt, .loja-resumo__desconto dd { color: #0B7A3E !important; }
.loja-resumo__desconto dt span { font-weight: 700; letter-spacing: .03em; }

/* ================================================ Auditoria 28/09/2026 */
/* Gargalo 4: o style.css do site declara a Heebo SEM ?v= e o host não manda
   Cache-Control para .woff2 (só ETag) — todo retorno revalida, e trocar a fonte
   sem renomear deixaria a velha no cache. Aqui a mesma família é declarada de
   novo, com carimbo: @font-face posterior com os MESMOS descritores vence, e só
   ela é baixada (provado no Chrome: nenhuma requisição ao caminho sem ?v=).
   O .htaccess não vale neste host — o carimbo é o que dá para fazer daqui. */
@font-face {
  font-family: "Heebo";
  src: url("../fonts/heebo-regular.woff2?v=cc8555ac") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Heebo";
  src: url("../fonts/heebo-bold.woff2?v=00d3ceef") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* C-12: no celular o WhatsApp flutuante cobria o total do pedido (checkout) e
   o fim das linhas dos Termos. Nessas duas páginas ele some abaixo de 640 px —
   as duas já têm o WhatsApp do comercial no próprio conteúdo. A classe entra no
   <body> por saferes_loja._montar(flutuante=False). */
@media (max-width: 640px) { .loja-corpo--sem-zap-flutuante .zap-flut { display: none; } }

/* C-11: os blocos revelados ao rolar (.revela, main.js) já ficam visíveis sem JS
   e com prefers-reduced-motion. Na impressão não há rolagem: tudo visível. */
@media print { [data-marca="saferes"] .revela { opacity: 1; transform: none; } }