/* Loja IMT Academy — o campo "Tem cupom?" e o preço com cupom (08/10/2026)
 * Vive no form#form-compra (fundo escuro, .compra) das landings da loja e da
 * Agência, e herda o resto da página: o rótulo e o campo usam as regras
 * .form label / .form input[type=text] de cada página; a cor de destaque é
 * --acento-escuro da base (lp.css), senão o --lime da Agência, senão o lime da
 * marca. Celular primeiro: campo e botão empilhados até 359px, lado a lado
 * daí em diante. Alvos de toque ≥ 44px. Nenhum style="", nada escondido
 * esperando JS (o botão "Aplicar" nasce com hidden, pelo HTML: sem JS ele
 * não faria nada, e o campo vai no POST do formulário). */
.cupom { --cp-cor: var(--acento-escuro, var(--lime, #D8FF00)); min-width: 0; }
.cupom__abre {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
  font: 600 .9rem/1.2 var(--f, Montserrat, system-ui, sans-serif); letter-spacing: 0; text-transform: none; color: #BFC5B9;
  text-decoration: underline; text-decoration-color: rgba(191,197,185,.5); text-underline-offset: .22em; }
.cupom__abre::-webkit-details-marker { display: none; }
.cupom__abre::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s; }
.cupom[open] > .cupom__abre::after { transform: rotate(225deg); margin-top: 3px; }
.cupom__abre:hover { color: #E8EBE4; }
.cupom__abre:focus-visible { outline: 3px solid var(--cp-cor); outline-offset: 2px; border-radius: 6px; }
.cupom__corpo { display: grid; gap: 7px; padding-top: 4px; min-width: 0; }
.cupom__linha { display: grid; grid-template-columns: 1fr; gap: 8px; min-width: 0; }
@media (min-width: 360px) { .cupom__linha { grid-template-columns: minmax(0, 1fr) auto; } }
/* sem o "Aplicar" (escondido: sem JS, ou com o cupom aplicado) a linha tem UMA coluna: sem os 8 px do
   vão, o campo fica da largura dos outros (revisão de 09/10/2026). A classe vem do cupom.js; o :has()
   cobre a página sem JS (regra à parte: navegador sem :has() descarta só ela) */
.cupom__linha.cupom__linha--so { grid-template-columns: minmax(0, 1fr); }
.cupom__linha:has(> .cupom__aplicar[hidden]) { grid-template-columns: minmax(0, 1fr); }
.form .cupom__campo { min-width: 0; width: 100%; min-height: 44px; text-transform: uppercase; letter-spacing: .06em; }
.form .cupom__campo[readonly] { border-color: var(--cp-cor); }
.form .cupom__campo[aria-invalid="true"] { border-color: #FC5860; }
.cupom__aplicar, .cupom__remover { -webkit-appearance: none; appearance: none; cursor: pointer; font-family: var(--f, Montserrat, system-ui, sans-serif); }
.cupom__aplicar {
  min-height: 56px; min-width: 44px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--cp-cor); background: transparent; color: var(--cp-cor);
  font-size: .92rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: background .2s, color .2s; }
.cupom__aplicar[hidden] { display: none; }
.cupom__aplicar:hover { background: rgba(255,255,255,.06); }
.cupom__aplicar:focus-visible { outline: 3px solid var(--cp-cor); outline-offset: 2px; }
.cupom__aplicar[disabled] { opacity: .7; cursor: wait; }
.cupom__estado, .cupom__nota { margin: 0; font: 500 .84rem/1.45 var(--f, Montserrat, system-ui, sans-serif); letter-spacing: 0; text-transform: none; color: #A9B0A3; }
/* #A9B0A3: ≥ 4,5:1 também sobre o painel verde da Imersão (o #8E9588 dava 4,0:1 ali) */
.cupom__estado--ok { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; color: var(--cp-cor); font-weight: 700; }
.cupom__estado--erro { color: #FFB3B7; }
.cupom__dica { flex-basis: 100%; color: #E8EBE4; font-weight: 500; }
.cupom__remover {
  min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: #BFC5B9; font-size: .84rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: .2em; }
.cupom__remover:hover { color: #fff; }
.cupom__remover:focus-visible { outline: 3px solid var(--cp-cor); outline-offset: 2px; border-radius: 6px; }

/* ── o preço com o cupom aplicado (o cupom.js põe .com-cupom em cada [data-cupom-bloco]) ── */
/* O "novo" nasce vazio e escondido; a chapa da página (display: inline-block) não pode vencer o hidden. */
[data-cupom="novo"][hidden] { display: none !important; }
/* o riscado de ancoragem ("de R$ 827") some com o cupom; no Motion a linha "de … por" é o próprio bloco */
.com-cupom [data-cupom="de"], [data-cupom="de"].com-cupom { display: none !important; }
.com-cupom [data-cupom="cheio"] { text-decoration: line-through; text-decoration-thickness: .09em; opacity: .58; }
/* entre o cheio e o novo há um espaço no HTML (ponto de quebra: no celular estreito, o "novo" desce de linha em vez de alargar a caixa) */
data[data-cupom="novo"], b[data-cupom="novo"] { font-weight: 800; color: var(--branco, #fff); }
/* o "R$" não se separa do número: no rádio do Pix da Agência (a 390 px) o novo quebrava em "R$ / 248,50"
   (revisão de 09/10/2026). Entre o cheio e o novo continua o espaço que quebra */
.com-cupom data[data-cupom="cheio"], .com-cupom b[data-cupom="cheio"], data[data-cupom="novo"], b[data-cupom="novo"] { white-space: nowrap; }
/* o preço grande: o cheio vira uma linha pequena e riscada; o novo fica com o visual da página.
   O risco é UM fio por cima do valor inteiro (revisão de 09/10/2026): com text-decoration, o "R$" em
   <small> (mentoria do produto digital) e os centavos em <small> (Cinegrafista) ganhavam um risco
   próprio, em outra altura, que parecia um sublinhado */
.com-cupom .preco__valor[data-cupom="cheio"] {
  background: none !important; box-shadow: none; padding: 0; color: inherit;
  font-size: clamp(1.15rem, 3.6vw, 1.5rem); letter-spacing: -.01em;
  display: inline-block; position: relative; text-decoration: none; }
.com-cupom .preco__valor[data-cupom="cheio"]::after {
  content: ""; position: absolute; left: -.08em; right: -.08em; top: 54%; height: max(.09em, 2px);
  border-radius: 1px; background: currentColor; pointer-events: none; }
.com-cupom .preco__valor[data-cupom="cheio"] .preco__cent { font-size: .6em; vertical-align: .5em; }
.barra .com-cupom [data-cupom="cheio"], .barra.com-cupom [data-cupom="cheio"] { font-size: .75em; font-weight: 600; }
/* barra fixa com o cupom, no celular (Cinegrafista a 320 px: 5 linhas, 18% da tela): o "(total …)"
   sai; o "ou 12× de …" fica (o total completo continua no formulário) */
@media (max-width: 399px) { .barra .com-cupom [data-parcelas="total-par"], .barra.com-cupom [data-parcelas="total-par"] { display: none; } }
.upsell.cupom-sem-oferta { opacity: .55; cursor: not-allowed; }
/* "sem cupom:" / "com cupom:" para o leitor de tela (o riscado é só visual); o cupom.js põe e tira */
.cupom-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.cupom-oferta-nota { display: block; color: #FFD9A8; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .cupom__abre::after, .cupom__aplicar { transition: none; } }