/* DramaKI — um mesmo percurso, da escolha do plano à assinatura. */
.shop-flow {
  width: 100%; max-width: 1200px; min-width: 0; margin-inline: auto;
  padding: clamp(28px, 5vw, 72px) clamp(16px, 4vw, 48px) 24px;
  color: var(--g-text); overflow-wrap: anywhere; color-scheme: dark;
}
.g-has-header .view:has(> .shop-flow) { padding-bottom: 0; }
.shop-flow :is(h1,h2,p) { margin: 0; }
.shop-flow h1 { font-size: clamp(30px, 4.5vw, 54px); line-height: 1.1; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }
.shop-flow h2 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; letter-spacing: -.025em; }
.shop-flow p { line-height: 1.65; }
.shop-flow p + p { margin-top: 12px; }
.shop-flow .caption { font-size: 13px; line-height: 1.65; color: var(--g-text-muted); }
.shop-heading { position: relative; margin-bottom: 32px; padding-top: 24px; }
.shop-heading::before { content: ''; position: absolute; top: 0; left: 0; width: 48px; height: 4px; border-radius: 4px; background: var(--g-brand-text); }
.shop-heading > p { margin-top: 16px; color: var(--g-text-muted); }
.shop-heading strong { color: var(--g-text); }
.shop-flow a:not(.g-btn), .shop-cancelar a, .shop-legal a { color: var(--g-brand-text); text-underline-offset: 4px; }
.shop-flow a:not(.g-btn) { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; }
.shop-flow .g-btn, .shop-cancelar .g-btn {
  min-height: 52px; height: auto; max-width: 100%; padding: 12px 20px;
  border-radius: 14px; white-space: normal; line-height: 1.5; text-align: center; gap: 6px;
}
.shop-flow .g-btn--primary {
  --g-btn-bg: var(--g-brand); --g-btn-fg: var(--g-on-brand); --g-btn-border: var(--g-brand);
  --g-btn-hover: color-mix(in srgb, var(--g-brand) 85%, var(--g-brand-text));
  background: var(--g-brand); color: var(--g-on-brand);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--g-brand) 20%, transparent);
}
.shop-flow .g-btn--secondary { --g-btn-bg: transparent; --g-btn-border: var(--g-border); background: transparent; box-shadow: none; }
.shop-flow .g-btn--ghost { color: var(--g-text-muted); box-shadow: none; }
.shop-flow :focus-visible, .shop-cancelar :focus-visible { outline: 3px solid var(--g-focus); outline-offset: 4px; }
.shop-flow .g-input, .shop-cancelar .g-input { width: 100%; min-width: 0; min-height: 52px; font-size: 16px; border-radius: 12px; background: var(--g-bg); }
.shop-flow .g-field { min-width: 0; }
.shop-money, .shop-plano__desde strong, .shop-oferta__preco strong, [data-plano-preco], [data-preco-meio], [data-cadastro-total], #checkout-total, #fatura-total {
  white-space: nowrap; font-variant-numeric: tabular-nums; overflow-wrap: normal;
}
.shop-flow .form-message { margin-block: 16px; }
[hidden] { display: none !important; }

/* Oferta e planos: o preço ocupa o primeiro plano. */
.shop-planos__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.shop-planos__topo h1 { max-width: 750px; }
.shop-planos__topo .shop-planos__login { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; font-size: 14px; }
.shop-planos__login .g-btn { min-width: 104px; }
.shop-planos__situacao { flex-basis: 100%; }
.shop-planos__lista, .shop-oferta__planos { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px 16px; margin: 0; padding: 0; list-style: none; }
.shop-plano, .shop-oferta__plano {
  position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0;
  gap: 16px; padding: 28px 22px 22px; border: 1px solid var(--g-border); border-radius: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--g-brand-soft) 25%, var(--g-surface)), var(--g-surface) 65%);
}
.shop-plano.is-destaque, .shop-oferta__plano.is-destaque {
  border-color: var(--g-brand-text);
  background: linear-gradient(155deg, var(--g-brand-soft), var(--g-surface) 85%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--g-brand) 70%, transparent), 0 16px 48px color-mix(in srgb, var(--g-brand) 10%, transparent);
}
.shop-badge { display: inline-flex; align-items: center; align-self: flex-start; min-height: 28px; padding: 4px 12px; border-radius: 999px; background: var(--g-brand); color: var(--g-on-brand); font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: .02em; }
.shop-plano > .shop-badge, .shop-oferta__plano > .shop-badge:not(.shop-badge--off) { position: absolute; top: -14px; left: 22px; }
.shop-badge--off { background: var(--g-brand-soft); color: var(--g-brand-text); border: 1px solid var(--g-brand); }
.shop-flow .shop-plano__nome, .shop-oferta__plano h2 { font-size: 20px; }
.shop-flow .shop-plano__descricao { color: var(--g-text-muted); font-size: 14px; }
.shop-flow .shop-plano__de { margin: 0 0 -12px; font-size: 14px; color: var(--g-text-muted); }
.shop-flow .shop-plano__desde, .shop-flow .shop-oferta__preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; line-height: 1.2; }
.shop-plano__desde-rotulo { flex-basis: 100%; color: var(--g-text-muted); font-size: 12px; }
.shop-plano__desde strong, .shop-oferta__preco strong { font-size: clamp(32px, 3.1vw, 42px); font-weight: 800; letter-spacing: -.055em; }
.is-destaque :is(.shop-plano__desde strong, .shop-oferta__preco strong) { color: var(--g-brand-text); }
.shop-plano__desde > span:last-child, .shop-oferta__preco > span { flex-basis: 100%; color: var(--g-text-muted); font-size: 13px; line-height: 1.6; }
.shop-oferta__preco s { color: var(--g-text-muted); font-size: 13px; }
.shop-plano .shop-plano__legal, .shop-oferta__plano .shop-plano__legal { margin: 0; font-size: 12px; }
.shop-oferta__selos { display: grid; gap: 10px; list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--g-border); }
.shop-oferta__selos li { display: flex; align-items: baseline; gap: 9px; font-size: 13px; line-height: 1.5; }
.shop-oferta__selos li::before { content: '✓'; color: var(--g-success); font-weight: 700; }
.shop-plano .shop-plano__cta, .shop-oferta__plano > .g-btn { width: 100%; margin-top: auto; }
.shop-plano:not(.is-destaque) .shop-plano__cta, .shop-oferta__plano:not(.is-destaque) > .g-btn {
  --g-btn-fg: var(--g-brand-text); --g-btn-hover: var(--g-brand-soft);
  background: var(--g-brand-soft); color: var(--g-brand-text); border-color: color-mix(in srgb, var(--g-brand) 65%, var(--g-border)); box-shadow: none;
}
.shop-planos__lista + .caption { margin-top: 20px; }
.shop-faq { max-width: 760px; margin: clamp(40px, 6vw, 72px) auto 0; }
.shop-faq h2 { margin-bottom: 16px; }
.shop-faq details { border-bottom: 1px solid var(--g-border); }
.shop-faq summary { cursor: pointer; min-height: 60px; padding: 18px 28px 18px 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
.shop-faq details p { padding: 0 24px 20px 0; color: var(--g-text-muted); font-size: 14px; }
.shop-faq > .caption { margin-top: 20px; }
.shop-em-breve { padding: 32px 24px; border: 1px solid var(--g-border); border-radius: 24px; background: var(--g-surface); }
.shop-em-breve .g-btn { margin-top: 24px; }
.shop-oferta { max-width: 1200px; }
.shop-oferta__topo { max-width: 760px; }
.shop-oferta__topo > .caption { margin: 0 0 12px; }
.shop-oferta__topo .shop-oferta__continua { font-size: 17px; }
.shop-oferta__topo .shop-oferta__entrar { font-size: 14px; }
.shop-oferta__planos + .caption { margin-top: 20px; }
.shop-oferta__eps { display: flex; gap: 8px; overflow-x: auto; margin-top: 20px; padding: 4px 4px 12px; }
.shop-oferta__eps a { flex: 0 0 48px; justify-content: center; min-width: 48px; min-height: 48px; border: 1px solid var(--g-border); border-radius: 12px; text-decoration: none; }
.shop-oferta__eps a[aria-current=step] { background: var(--g-brand); color: var(--g-on-brand); border-color: var(--g-brand); }
.shop-oferta__eps a[data-bloqueado]:not([aria-current]) { color: var(--g-text-muted); }

/* Cadastro: quatro decisões sequenciais, sem coluna lateral concorrente. */
.shop-cadastro { max-width: 800px; }
.shop-form { display: grid; gap: 28px; }
.shop-form__grupo { min-width: 0; margin: 0; padding: 20px 16px 16px; border: 1px solid var(--g-border); border-radius: 20px; background: var(--g-surface); }
.shop-form__grupo legend { max-width: 100%; padding: 0 8px; font-size: 16px; line-height: 1.6; font-weight: 700; }
.shop-step { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 5px; border: 1px solid var(--g-brand); border-radius: 50%; background: var(--g-brand-soft); color: var(--g-brand-text); font-size: 12px; vertical-align: middle; }
.shop-opcao { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; margin: 0; padding: 16px; border: 1px solid var(--g-border); border-radius: 14px; background: var(--g-bg); cursor: pointer; line-height: 1.5; }
.shop-opcao + .shop-opcao { margin-top: 12px; }
.shop-opcao:has(input:checked) { border-color: var(--g-brand-text); background: var(--g-brand-soft); box-shadow: inset 3px 0 0 var(--g-brand-text); }
.shop-opcao:has(input:focus-visible), .shop-check:has(input:focus-visible) { outline: 3px solid var(--g-focus); outline-offset: 4px; }
.shop-opcao input, .shop-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--g-brand); }
.shop-opcao__plano { display: grid; gap: 8px; min-width: 0; flex: 1; }
.shop-opcao__titulo { font-weight: 700; font-size: 15px; }
.shop-opcao__titulo > span { display: block; font-size: 12px; color: var(--g-text-muted); font-weight: 400; }
.shop-opcao__precos { font-size: 12px; color: var(--g-text-muted); }
.shop-opcao__precos > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.shop-opcao__precos strong { font-size: 24px; font-weight: 800; letter-spacing: -.04em; color: var(--g-text); }
.shop-opcao:has(:checked) .shop-opcao__precos strong { color: var(--g-brand-text); }
#cadastro-meios { display: block; }
.shop-meios { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.shop-meio { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; min-height: 96px; margin: 0; padding: 16px 18px; }
.shop-meio + .shop-meio { margin-top: 0; }
.shop-meio input { margin: 0; }
.shop-meio__corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.shop-meio__corpo > * { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.shop-meio__nome { font-size: 15px; font-weight: 700; color: var(--g-text); }
.shop-meio__preco { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -.04em; line-height: 1.15; color: var(--g-text); }
.shop-meio__dica { font-size: 12px; line-height: 1.4; color: var(--g-text-muted); }
.shop-meio:has(input:checked) { border-color: var(--g-brand-text); background: linear-gradient(160deg, var(--g-brand-soft), var(--g-surface) 70%); box-shadow: inset 0 0 0 1px var(--g-brand-text); }
.shop-meio:has(input:checked) .shop-meio__preco { color: var(--g-brand-text); }
@media (min-width: 600px) { .shop-meios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shop-dados .g-field { margin-block: 16px 4px; }
.shop-check { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 0; cursor: pointer; line-height: 1.65; font-size: 13px; color: var(--g-text-muted); }
.shop-check > span { min-width: 0; }
.shop-check input { margin-top: 0; }
.shop-check__documentos { margin: 0 0 12px 32px; min-width: 0; }
.shop-check__links { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.shop-check__links > li { min-width: 0; max-width: 100%; }
.shop-flow .shop-check__links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; max-width: 100%; padding: 8px; border-radius: 8px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#cadastro-recorrencia-caixa { color: var(--g-text); border-bottom: 1px solid var(--g-border); margin-bottom: 8px; padding-bottom: 20px; }
.shop-review { background: linear-gradient(160deg, var(--g-brand-soft), var(--g-surface) 60%); }
.shop-submit { border-top: 1px solid var(--g-border); padding-top: 20px; margin-top: 8px; }
.shop-submit > .g-btn { width: 100%; }
#cadastro-enviar .g-btn__label { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
#cadastro-enviar [data-cadastro-total] { display: inline; margin-left: 6px; font-size: 15px; font-weight: 700; }
.shop-submit > .caption { margin-top: 12px; }
.shop-submit .login-status:empty { display: none; }
.shop-form > .shop-form__login { text-align: center; }

/* Pagamento: inclui o HTML que checkout.js insere após o header. */
.shop-checkout, .shop-fatura { max-width: 760px; }
.shop-reference { display: block; margin-top: 12px; font-size: 13px; font-weight: 500; letter-spacing: .06em; line-height: 1.6; color: var(--g-text-muted); }
.shop-checkout > section, #fatura-pagamento, .shop-fatura > .shop-checkout__instrucoes {
  margin-block: 24px; padding: clamp(20px, 4vw, 36px); border: 1px solid var(--g-border); border-radius: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--g-brand-soft) 30%, var(--g-surface)), var(--g-surface) 65%);
}
:is(#checkout-hospedado,#checkout-instrucoes,#fatura-pagamento) > p:first-child { color: var(--g-text-muted); font-size: 14px; }
:is(#checkout-hospedado,#checkout-instrucoes,#fatura-pagamento) > p:first-child > strong { white-space: nowrap; display: block; margin-block: 4px 12px; font-size: clamp(32px, 5vw, 48px); line-height: 1.2; font-weight: 800; letter-spacing: -.045em; color: var(--g-text); }
#checkout-qr, #fatura-qr { display: block; width: min(100%, 280px); height: auto; padding: 12px; margin: 28px auto; border-radius: 16px; background: var(--g-neutral-0); }
:is(#checkout-pix,#checkout-linha,#fatura-pix,#fatura-linha) { width: 100%; margin-block: 8px 12px; font-family: var(--g-font-mono); resize: vertical; }
:is(.shop-checkout,.shop-fatura) .g-field { margin-block: 20px; }
#checkout-hospedado > .g-btn, #fatura-ir { width: 100%; margin-block: 24px 12px; }
:is(#checkout-instrucoes,#fatura-pagamento) [data-copiar] { width: 100%; --g-btn-hover: var(--g-brand-soft); color: var(--g-brand-text); border-color: var(--g-brand); background: var(--g-brand-soft); }
#checkout-instrucoes > .caption, #checkout-hospedado > .caption { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--g-border); }
.shop-checkout > #checkout-meios { margin-top: 28px; padding: 24px 0 0; border: 0; border-top: 1px solid var(--g-border); border-radius: 0; background: none; }
#checkout-meios h2 { font-size: 16px; }
#checkout-meios ul, #fatura-meios { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; padding: 0; list-style: none; }
:is(#checkout-meios,#fatura-meios) li { min-width: 0; flex: 1 1 200px; }
:is(#checkout-meios,#fatura-meios) .g-btn { display: flex; flex-wrap: wrap; width: 100%; font-size: 13px; }
.shop-checkout > .shop-checkout__pago { text-align: center; padding-block: 40px; border-color: color-mix(in srgb, var(--g-success) 60%, var(--g-border)); background: linear-gradient(160deg, color-mix(in srgb, var(--g-success) 12%, var(--g-surface)), var(--g-surface)); }
.shop-checkout__pago::before { content: '✓'; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 24px; border: 1px solid var(--g-success); border-radius: 50%; color: var(--g-success); background: color-mix(in srgb, var(--g-success) 8%, transparent); font-size: 30px; }
.shop-checkout__pago h2 { color: var(--g-success); }
.shop-checkout__pago .g-btn { margin-top: 28px; width: 100%; }
.form-message.shop-message--success { border-color: var(--g-success); background: color-mix(in srgb, var(--g-success) 10%, var(--g-surface)); color: var(--g-success); }
#checkout-encerrada .g-btn { margin-top: 24px; }

/* Conta: assinatura em primeiro plano, manutenção em segundo. */
.shop-conta { max-width: 1000px; }
.shop-conta > section { padding: 24px; margin-block: 20px; border: 1px solid var(--g-border); border-radius: 22px; background: var(--g-surface); }
.shop-conta section > h2 { margin-bottom: 20px; font-size: 20px; }
.shop-conta #conta-assinatura { background: linear-gradient(130deg, var(--g-brand-soft), var(--g-surface) 80%); border-color: color-mix(in srgb, var(--g-brand) 60%, var(--g-border)); }
.shop-conta__plano { color: var(--g-text-muted); }
.shop-conta__plano > strong { display: block; margin-block: 6px; color: var(--g-text); font-size: clamp(26px, 4vw, 36px); font-weight: 800; letter-spacing: -.04em; line-height: 1.3; }
#conta-estado { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid var(--g-border); border-radius: 999px; font-size: 12px; line-height: 1.5; color: var(--g-text-muted); }
#conta-estado[data-estado=ativa] { color: var(--g-success); background: color-mix(in srgb, var(--g-success) 8%, transparent); border-color: color-mix(in srgb, var(--g-success) 35%, var(--g-border)); }
#conta-estado:is([data-estado=vencida],[data-estado=pendente],[data-estado=carencia]) { color: var(--g-warning); background: color-mix(in srgb, var(--g-warning) 8%, transparent); border-color: color-mix(in srgb, var(--g-warning) 35%, var(--g-border)); }
.shop-conta .shop-conta__vence { margin-top: 24px; font-size: 14px; color: var(--g-text-muted); }
#conta-vence { display: block; color: var(--g-text); font-size: 18px; }
.shop-conta__cartao { color: var(--g-text-muted); font-size: 14px; }
#conta-recorrencia { color: var(--g-text); }
.shop-conta form { margin-top: 16px; }
.shop-conta .shop-faixa { border-color: var(--g-warning); }
.shop-conta #conta-cancelar { margin-block: 0; padding: 0; border: 0; background: none; }
#conta-faturas ul { list-style: none; margin: 0; padding: 0; }
#conta-faturas li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; padding-block: 12px; border-bottom: 1px solid var(--g-border); font-size: 14px; }
#conta-faturas li a { flex: 1 1 100%; }
#conta-faturas li .shop-money { font-size: 18px; font-weight: 700; }
.shop-invoice-state { color: var(--g-text-muted); font-size: 12px; }
#conta-faturas > p { margin-top: 16px; }
.shop-conta > .caption { margin-top: 24px; }
.shop-table { max-width: 100%; overflow-x: auto; border: 1px solid var(--g-border); border-radius: 20px; background: var(--g-surface); }
#faturas-tabela { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
#faturas-tabela th, #faturas-tabela td { padding: 16px 20px; border-bottom: 1px solid var(--g-border); }
#faturas-tabela th { font-size: 12px; font-weight: 500; color: var(--g-text-muted); background: color-mix(in srgb, var(--g-brand-soft) 35%, var(--g-surface)); }
#faturas-tabela td { min-width: 120px; }
#faturas-tabela td.shop-money { font-size: 18px; font-weight: 700; }
#faturas-tabela tr:last-child td { border-bottom: 0; }
#faturas-tabela td:last-child { min-width: 160px; }
.shop-faturas > p:last-child, .shop-fatura > p:last-child { margin-top: 24px; font-size: 14px; }
#fatura-recibo { display: grid; grid-template-columns: minmax(0,1fr); margin: 24px 0; padding: 24px; border: 1px solid color-mix(in srgb, var(--g-success) 45%, var(--g-border)); border-top: 3px solid var(--g-success); border-radius: 20px; background: var(--g-surface); }
#fatura-recibo dt { padding-top: 16px; color: var(--g-text-muted); font-size: 13px; }
#fatura-recibo dt:first-child { padding-top: 0; }
#fatura-recibo dd { margin: 0; padding: 6px 0 16px; border-bottom: 1px solid var(--g-border); font-size: 15px; font-weight: 600; }
#fatura-recibo dd:last-child { padding-bottom: 0; border: 0; }
.shop-fatura:has(#fatura-recibo) .shop-heading::before { background: var(--g-success); }

/* Renovação e cancelamento usam os mesmos controles do cadastro. */
.shop-renovar { max-width: 640px; }
.shop-renovar > p { color: var(--g-text-muted); }
.shop-renovar form:not([method=dialog]) { margin-block: 24px; padding: 24px; border: 1px solid var(--g-border); border-radius: 24px; background: var(--g-surface); }
.shop-renovar .g-field + .g-field { margin-top: 20px; }
.shop-renovar form > .g-btn { width: 100%; margin-top: 24px; }
.shop-renovar .login-status:empty { display: none; }
.shop-cancelar { width: min(520px, calc(100% - 32px)); padding: 24px; border-radius: 24px; color-scheme: dark; }
.shop-cancelar[open] { max-height: calc(100dvh - 32px); overflow-y: auto; }
.shop-cancelar__topo { padding-bottom: 20px; border-bottom: 1px solid var(--g-border); }
.shop-cancelar__topo form { margin: 0 0 16px; }
.shop-cancelar__topo h2 { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -.025em; }
.shop-cancelar p { color: var(--g-text-muted); font-size: 14px; line-height: 1.7; margin: 20px 0; }
.shop-cancelar .g-field { margin-block: 20px; }
#conta-cancelar-enviar { width: 100%; }

@media (min-width: 600px) {
  .shop-planos__lista, .shop-oferta__planos { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shop-form__grupo { padding: 24px; }
  .shop-form__grupo legend { font-size: 18px; }
  .shop-opcao__plano { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; }
  .shop-opcao__precos > span { display: grid; justify-items: end; gap: 0; }
  .shop-dados { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .shop-dados .g-field { margin-block: 0; }
  .shop-dados :is(#cadastro-documento, .shop-dados__largo) { grid-column: 1 / -1; }
  #fatura-recibo { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding: 32px; }
  #fatura-recibo dt, #fatura-recibo dd { padding: 18px 0; border-bottom: 1px solid var(--g-border); }
  #fatura-recibo dd { text-align: right; }
  #fatura-recibo dt:first-child { padding-top: 18px; }
  #fatura-recibo dt:last-of-type, #fatura-recibo dd:last-child { border: 0; padding-bottom: 0; }
  #conta-faturas li a { flex: 1; }
}
/* A largura total da viewport inclui o segundo segmento e o vinco. */
@media (horizontal-viewport-segments: 2) {
  .shop-meios { grid-template-columns: minmax(0, 1fr); }
  .shop-opcao__plano { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .shop-opcao__precos > span { display: flex; flex-wrap: wrap; gap: 4px 10px; }
  .shop-cadastro .shop-dados { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .shop-conta { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 24px; align-items: start; }
  .shop-conta > * { grid-column: 1/-1; min-width: 0; }
  .shop-conta > .shop-heading { margin-bottom: 8px; }
  .shop-conta > section, .shop-conta > .caption { margin-block: 0; }
  .shop-conta > #conta-assinatura { grid-column: 1; }
  .shop-conta > #conta-pagamento { grid-column: 2; }
}
@media (min-width: 1100px) {
  .shop-planos__lista, .shop-oferta__planos { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .shop-planos__lista:has(> :last-child:nth-child(3)), .shop-oferta__planos:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .shop-planos__lista:has(> :last-child:nth-child(2)), .shop-oferta__planos:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shop-planos__lista:has(> :only-child), .shop-oferta__planos:has(> :only-child) { grid-template-columns: minmax(0,520px); }
  .shop-plano, .shop-oferta__plano { padding-inline: 20px; }
}
@media (max-width: 599px) {
  .shop-flow .g-btn { width: 100%; }
  .shop-planos__topo .shop-planos__login { width: 100%; }
  .shop-planos__login .g-btn { width: auto; margin-left: auto; }
  .shop-planos__topo h1 { font-size: 36px; }
  .shop-conta > section, .shop-renovar form:not([method=dialog]) { padding: 20px; }
  .shop-flow :is(#checkout-instrucoes,#fatura-pagamento) { padding: 20px 16px; }
}

/* Páginas legais e de estado que também carregam esta folha. */
.g-doc { width: 100%; max-width: 800px; margin-inline: auto; padding: clamp(20px,4vw,64px) clamp(16px,3vw,40px); overflow-wrap: anywhere; }
.shop-legal { font-size: 16px; line-height: 1.85; }
.shop-legal h1 { line-height: 1.2; }
.shop-legal :is(h2,h3) { line-height: 1.4; margin-top: 40px; }
.shop-legal :is(p,ul,ol) { margin-block: 20px; }
.shop-legal :is(ul,ol) { padding-left: 24px; }
.shop-legal .g-legal__data { font-size: 13px; color: var(--g-text-muted); }
.shop-status { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }
.shop-status main { width: min(100%,520px); padding: clamp(24px,5vw,48px); border: 1px solid var(--g-border); border-radius: var(--g-radius-xl); background: var(--g-surface); overflow-wrap: anywhere; }
.shop-status h1 { font-size: clamp(28px,5vw,36px); line-height: 1.2; margin-block: 24px 16px; }
.shop-status p { margin-block: 16px; color: var(--g-text-muted); }
.shop-status .g-btn { margin-top: 16px; }
@media print {
  body:has(#fatura-recibo) { background: var(--g-neutral-0); color: var(--g-neutral-1000); }
  body:has(#fatura-recibo) :is(#cabecalho,#dock,#rodape,.shell-notices,#toasts,.shop-cookies,.shop-fatura>p:last-child) { display: none !important; }
  #fatura-recibo { border: 1px solid var(--g-neutral-500); background: var(--g-neutral-0); color: var(--g-neutral-1000); }
  .shop-fatura { max-width: none; padding: 0; color: inherit; }
  #fatura-recibo dt, .shop-fatura .shop-reference { color: inherit; }
}

/* Cabeçalho e consentimento compartilhados. */
.g-header-session .g-header-assinar,
.g-header-session .g-header-enter { gap: 6px; }
.g-header-session .g-header-assinar {
  min-height: 44px;
  border-radius: var(--g-radius-full);
  --g-btn-bg: var(--g-brand);
  --g-btn-fg: var(--g-on-brand);
  --g-btn-border: color-mix(in srgb, var(--g-neutral-0) 28%, var(--g-brand));
  background-color: var(--g-brand);
  color: var(--g-on-brand);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--g-brand) 42%, transparent);
}
.g-header-session .g-header-enter {
  --g-btn-bg: transparent;
  --g-btn-fg: var(--g-text);
  --g-btn-border: var(--g-border);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--g-text);
}
@media (hover: hover) and (pointer: fine) {
  .g-header-session .g-header-enter:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    color: var(--g-text);
  }
}
@media (max-width: 767px) {
  .g-header-session { gap: 8px; flex-shrink: 0; }
  .g-header-session a.g-header-assinar,
  .g-header-session a.g-header-enter { display: inline-flex; flex-shrink: 0; min-height: 44px; padding-inline: 12px; }
  .g-shell-header .shell-brand { min-width: 0; }
  .g-shell-header .shell-brand img { width: 112px; }
}
/* Até 399 px: marca, Temas e sessão cabem juntos, mantendo todos os destinos. */
@media (max-width: 399px) {
  .g-shell-header {
    gap: 4px;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .g-shell-header .shell-brand img { width: 80px; }
  .g-header-session { gap: 4px; }
  .g-header-session a.g-header-assinar,
  .g-header-session a.g-header-enter { min-width: 44px; padding-inline: 6px; gap: 4px; }
  .g-header-session .g-header-assinar > .g-icon,
  .g-header-session .g-header-enter > .g-icon { width: 14px; height: 14px; }
}

/* Rolagem do documento respeita o cabeçalho e o dock, mesmo sem cookies. */
html:has(.g-shell-header) { scroll-padding-top: calc(var(--nav-height) + var(--g-safe-top)); }
@media (max-width: 767px) {
  html:has(#dock) {
    --shop-dock-reserva: calc(var(--nav-height) + var(--g-safe-bottom));
    scroll-padding-bottom: var(--shop-dock-reserva);
  }
  .app.has-nav:has(> #dock) { padding-bottom: var(--shop-dock-reserva); }
}

/* Faixa de cookies (canto inferior; no celular fica acima do dock). */
.shop-cookies {
  position: fixed; z-index: 30; right: 0; bottom: 0; width: min(450px, 100%);
  margin: 0; padding: 24px; background: var(--g-surface); color: var(--g-text);
  border: 1px solid var(--g-border); border-radius: 16px 0 0 0;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--g-bg) 80%, transparent);
}
.shop-cookies__titulo { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.shop-cookies p { margin: 0; font-size: 14px; line-height: 1.45; }
.shop-cookies a { color: var(--g-brand-text); }
.shop-cookies__acoes { display: flex; gap: 8px; margin-top: 16px; }
.shop-cookies__acoes .g-btn { flex: 1 1 0; min-height: 44px; }
@media (max-width: 767px) {
  body:has(.has-nav) .shop-cookies {
    width: 100%;
    bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0;
  }
  .shop-cookies__acoes .g-btn { min-height: 52px; }
}


.shop-cookies a { display: inline-flex; align-items: center; min-height: 44px; }

/* Recuperação de acesso e preferências de e-mail: cartões do mesmo funil.
   shop-senha e shop-descadastro identificam as telas; o visual vem de shop-access.
   shop-aviso acompanha form-message; não redefine o estado de erro. */
.shop-panel {
  min-width: 0; padding: var(--g-space-6) var(--g-space-5);
  border: var(--g-border-width) solid var(--g-border); border-radius: var(--g-radius-xl);
  background: var(--g-surface); color: var(--g-text); overflow-wrap: anywhere;
}
.shop-planos { min-width: 0; color-scheme: inherit; }
.shop-access { max-width: 680px; color-scheme: inherit; }
.shop-access__panel {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0;
  padding: 24px 20px; border: 1px solid var(--g-border); border-radius: 24px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--g-brand-soft) 25%, var(--g-surface)), var(--g-surface) 65%);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--g-brand) 8%, transparent);
}
.shop-access .shop-heading { margin: 0; }
.shop-access h1 { font-size: clamp(28px, 5vw, 36px); line-height: 1.15; }
.shop-access__panel > p:not(.form-message) { color: var(--g-text-muted); font-size: 14px; }
.shop-access .login-form, .shop-access .form-stack { gap: 20px; }
.shop-access :is(.shop-access__panel, .login-form, .form-stack) > p,
.shop-access .form-message { margin: 0; }
.shop-access .form-message { padding: 16px; line-height: 1.65; }
.shop-access .form-message h2 { margin-bottom: 8px; font-size: 16px; line-height: 1.5; letter-spacing: 0; }
.shop-access .g-field { display: grid; gap: 8px; }
.shop-access .g-label { margin: 0; }
.shop-access .g-input { min-height: 52px; background: var(--g-bg); }
.shop-access .g-input:disabled { opacity: 1; color: var(--g-text-muted); background: var(--g-surface); cursor: not-allowed; }
.shop-access .g-btn { width: 100%; max-width: 100%; }
.shop-access .login-submit { grid-template-columns: minmax(0, 1fr); justify-content: center; }
.shop-access .login-submit .g-btn__label { grid-column: 1; }
.shop-access .cooldown {
  padding: 12px 16px; border: 1px solid var(--g-warning); border-radius: 12px;
  color: var(--g-warning); background: var(--g-warning-soft); font-size: 13px; line-height: 1.65;
}
.shop-access .login-status:not(:empty) {
  padding: 12px 16px; border-left: 3px solid var(--g-brand-text);
  border-radius: 4px; background: var(--g-brand-soft); color: var(--g-brand-text);
}
.shop-access form[aria-busy=true] .login-submit { cursor: progress; }
.shop-access__panel > .caption { padding-top: 16px; border-top: 1px solid var(--g-border); }
.login-esqueci { margin: 12px 0 0; text-align: center; }
#login-esqueci-senha {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  max-width: 100%; padding: 8px 12px; border-radius: 8px; color: var(--g-brand-text);
  font-size: 14px; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px;
}
#login-esqueci-senha:focus-visible { outline: 3px solid var(--g-focus); outline-offset: 4px; }
@media (hover: hover) {
  #login-esqueci-senha:hover { background: var(--g-brand-soft); }
}
@media (min-width: 600px) {
  .shop-access__panel { padding: 36px; }
}

/* Promoção agendada: faixa no cartão, com relógio silencioso. */
.shop-plano .shop-plano__promo {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start;
  gap: 8px 10px; margin: 0; padding: 14px; border: 1px solid var(--g-brand-border);
  border-radius: 14px; background: var(--g-brand-soft); color: var(--g-brand-text);
  font-size: 12px; line-height: 1.6;
}
.shop-plano__promo > .g-icon { width: 20px; height: 20px; margin-top: 1px; }
.shop-plano__promo-texto { min-width: 0; grid-column: 2; }
.shop-plano__promo time { display: block; font-weight: 700; }
.shop-plano__promo-resto {
  grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--g-brand-border);
  color: var(--g-text); font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.shop-plano .shop-plano__promo.is-encerrada { border-color: var(--g-border); background: var(--g-surface); color: var(--g-text-muted); }

/* Preferências de cookies: altura limitada e reserva para alcançar conteúdo e rodapé.
   A reserva de espaço sai da página quando o banner recebe hidden. */
html:has(#aviso-cookies) {
  --shop-consent-bottom: calc(var(--g-space-3) + var(--g-safe-bottom));
  --shop-consent-max-height: min(50vh, 32rem, calc(100vh - var(--shop-consent-bottom) - var(--nav-height) - var(--g-safe-top) - var(--g-space-6)));
  --shop-consent-max-height: min(50dvh, 32rem, calc(100dvh - var(--shop-consent-bottom) - var(--nav-height) - var(--g-safe-top) - var(--g-space-6)));
  --shop-consent-reserva: calc(var(--shop-consent-max-height) + var(--shop-consent-bottom) + var(--g-space-4));
}
html:has(.has-nav):has(#aviso-cookies) {
  --shop-consent-bottom: calc(var(--nav-height) + var(--g-safe-bottom) + var(--g-space-5));
}
html:has(#aviso-cookies:not([hidden])) {
  scroll-padding-bottom: var(--shop-consent-reserva);
}
body:has(#aviso-cookies:not([hidden])) {
  padding-bottom: var(--shop-consent-reserva);
}
#aviso-cookies {
  right: max(12px, env(safe-area-inset-right, 0px)); bottom: var(--shop-consent-bottom);
  width: min(520px, calc(100% - max(12px, env(safe-area-inset-left, 0px)) - max(12px, env(safe-area-inset-right, 0px))));
  max-height: var(--shop-consent-max-height); min-width: 0; overflow-wrap: anywhere;
  padding: 24px 20px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 20px;
  border: 1px solid var(--g-brand-border); border-radius: 24px; color-scheme: inherit;
  background: linear-gradient(155deg, color-mix(in srgb, var(--g-brand-soft) 25%, var(--g-surface)), var(--g-surface) 65%);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--g-bg) 80%, transparent);
}
#aviso-cookies .shop-heading { margin: 0 0 12px; padding-top: 20px; }
#aviso-cookies .shop-cookies__titulo { margin: 0 0 12px; color: var(--g-text); font-size: 22px; line-height: 1.25; letter-spacing: -.025em; }
#aviso-cookies p { color: var(--g-text-muted); font-size: 13px; line-height: 1.65; }
#aviso-cookies .shop-heading > p { margin: 0; }
#aviso-cookies > a { min-width: 44px; max-width: 100%; gap: 8px; font-size: 13px; text-underline-offset: 4px; }
#aviso-cookies :focus-visible { outline: 3px solid var(--g-focus); outline-offset: 4px; }
.shop-consent__detalhes summary { min-width: 44px; min-height: 44px; padding-block: 12px; color: var(--g-text); font-size: 13px; line-height: 1.5; font-weight: 600; cursor: pointer; }
.shop-consent__detalhes[open] > p { margin-bottom: 8px; }
#aviso-cookies .shop-consent__opcoes { margin-top: 12px; }
#aviso-cookies .shop-form__grupo { display: grid; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; }
#aviso-cookies .shop-consent__categoria {
  gap: 14px; margin: 0; padding: 16px 12px; border: 1px solid var(--g-border);
  border-radius: 14px; background: var(--g-bg); color: var(--g-text-muted);
}
#aviso-cookies .shop-consent__categoria:has(:checked) { border-color: var(--g-brand-border); background: var(--g-brand-soft); }
#aviso-cookies .shop-consent__categoria > span { flex: 1; display: grid; gap: 6px; font-size: 12px; line-height: 1.6; }
#aviso-cookies .shop-consent__categoria strong { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--g-text); font-size: 14px; }
#aviso-cookies .shop-consent__categoria small { font-size: 10px; font-weight: 600; color: var(--g-brand-text); }
#aviso-cookies .shop-consent__interruptor {
  appearance: none; position: relative; order: 1; flex: 0 0 48px;
  width: 48px; height: max(44px, var(--g-touch-min)); margin: 0; padding: 0;
  border: 0; border-radius: var(--g-radius-sm); background: transparent; cursor: pointer;
}
#aviso-cookies .shop-consent__interruptor::before {
  content: ''; position: absolute; inset: 8px 0; border: 1px solid var(--g-text-muted);
  border-radius: var(--g-radius-full); background: var(--g-surface);
}
#aviso-cookies .shop-consent__interruptor::after {
  content: ''; position: absolute; top: 13px; left: 5px; width: 18px; height: 18px;
  border-radius: var(--g-radius-full); background: var(--g-text-muted);
}
#aviso-cookies .shop-consent__interruptor:checked::before { border-color: var(--g-brand-text); background: var(--g-brand); }
#aviso-cookies .shop-consent__interruptor:checked::after { transform: translateX(20px); background: var(--g-on-brand); }
#aviso-cookies .shop-consent__categoria:has(:focus-visible) { outline: var(--g-focus-width) solid var(--g-focus); outline-offset: var(--g-focus-offset); }
#aviso-cookies :is(.shop-consent__categoria:has([aria-disabled=true]), .shop-consent__interruptor[aria-disabled=true]) { cursor: default; }
#aviso-cookies .shop-cookies__acoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--g-border); }
#aviso-cookies .g-btn { width: 100%; min-width: 44px; min-height: 48px; height: auto; padding: 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; white-space: normal; text-align: center; }
#aviso-cookies .g-btn--primary { --g-btn-bg: var(--g-brand); --g-btn-fg: var(--g-on-brand); --g-btn-border: var(--g-brand); background: var(--g-brand); color: var(--g-on-brand); }
#aviso-cookies .g-btn--secondary { --g-btn-bg: transparent; --g-btn-border: var(--g-border-control); background: transparent; color: var(--g-text); box-shadow: none; }
#aviso-cookies .g-btn--ghost { color: var(--g-brand-text); box-shadow: none; }
@media (min-width: 400px) {
  #aviso-cookies .shop-cookies__acoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  html:has(#aviso-cookies), html:has(.has-nav):has(#aviso-cookies) { --shop-consent-bottom: calc(var(--g-space-5) + var(--g-safe-bottom)); }
  #aviso-cookies { right: max(20px, env(safe-area-inset-right, 0px)); padding: 28px; }
}
/* Paisagem baixa: região no fim do documento, sem disputar espaço com o cabeçalho. */
@media (max-height: 540px) {
  html:has(#aviso-cookies:not([hidden])) { scroll-padding-bottom: var(--shop-dock-reserva, 0px); }
  body:has(#aviso-cookies:not([hidden])) { padding-bottom: 0; }
  #aviso-cookies {
    position: static; max-height: none; overflow: visible; scroll-padding-block: 0;
    margin: var(--g-space-4) max(12px, env(safe-area-inset-right, 0px)) var(--shop-consent-bottom) auto;
  }
}
/* Livro aberto: o cartão e todos os seus controles cabem no primeiro segmento. */
@media (horizontal-viewport-segments: 2) {
  #aviso-cookies {
    left: calc(env(viewport-segment-left 0 0, 0px) + var(--g-seg-pad, 16px)); right: auto;
    width: min(520px, calc(var(--g-seg-w, env(viewport-segment-width 0 0, 50vw)) - 2 * var(--g-seg-pad, 16px)));
    margin-inline: calc(env(viewport-segment-left 0 0, 0px) + var(--g-seg-pad, 16px)) 0;
  }
  #aviso-cookies .shop-cookies__acoes { grid-template-columns: minmax(0, 1fr); }
}
@media (horizontal-viewport-segments: 2) and (min-height: 541px) {
  #aviso-cookies { margin: 0; }
}
/* Livro deitado: views.css fixa main.view no segmento inferior e ele é o scroller.
   A reserva e o scrollIntoView precisam atuar nele, não no documento externo.
   Sobram pelo menos 64px acima do cartão para a faixa final do item (48px). */
@media (vertical-viewport-segments: 2) {
  html:has(#aviso-cookies) {
    --shop-consent-max-height: min(50dvh, 32rem, calc(var(--g-seg-bottom-h, env(viewport-segment-height 0 1, 50dvh)) - var(--shop-consent-bottom) - var(--g-space-4) - 64px));
  }
  html:has(#aviso-cookies:not([hidden])) { scroll-padding-bottom: 0; }
  body:has(#aviso-cookies:not([hidden])) { padding-bottom: 0; }
  body:has(#aviso-cookies:not([hidden])) .app > .view:not(:has(.player-view)) {
    padding-bottom: calc(var(--shop-consent-reserva) + 24px + var(--g-safe-bottom));
    scroll-padding-bottom: var(--shop-consent-reserva);
  }
  #aviso-cookies {
    position: fixed; margin: 0; overflow-y: auto; scroll-padding-block: 20px;
    bottom: calc(100dvh - var(--g-seg-bottom-top, env(viewport-segment-top 0 1, 50dvh)) - var(--g-seg-bottom-h, env(viewport-segment-height 0 1, 50dvh)) + var(--shop-consent-bottom));
    max-height: var(--shop-consent-max-height);
  }
}
@media (forced-colors: active) {
  #aviso-cookies .shop-consent__interruptor { appearance: auto; }
  #aviso-cookies .shop-consent__interruptor::before,
  #aviso-cookies .shop-consent__interruptor::after { display: none; }
}

/* Revisão das ondas 2/3: controles e mensagens permanecem dentro do cartão. */
.shop-access :is(.login-form, .form-stack, .form-message),
#aviso-cookies :is(.shop-consent__opcoes, .shop-form__grupo, .shop-consent__categoria) { min-width: 0; }
.shop-access a:not(.g-btn) { min-width: var(--g-touch-min); }
.shop-access .g-btn--primary,
.shop-troca-plano .g-btn--primary,
.shop-whatsapp .g-btn--primary { --g-btn-hover: var(--g-brand-hover); }
@media (prefers-reduced-motion: reduce) {
  .shop-access .g-btn, #login-esqueci-senha,
  #aviso-cookies .g-btn, #aviso-cookies .shop-consent__interruptor,
  #aviso-cookies .shop-consent__interruptor::before,
  #aviso-cookies .shop-consent__interruptor::after { transition: none; }
}
@media print {
  body:has(#aviso-cookies:not([hidden])) { padding-bottom: 0; }
}