/* Componentes da Raizvoz 3.0, "Lado A" (17-direcao-de-arte/conceitos/c4; 18-redesign-direcao/REDESIGN.md). Só usa tokens.css.
   Mundo: a vitrola de maleta e o compacto de serenata. Superfícies são papel de encarte (raio de 2 px, sombra de papel real),
   botões são pílulas de selo de disco, rótulos de prensagem em DM Mono versal, títulos e a letra das histórias em Bodoni Moda,
   interface em Albert Sans. O que está tocando ganha o azul-piscina; o trecho que toca, o sublinhado rosa-chá. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-texto); font-size: var(--texto-md); line-height: var(--altura-texto); overflow-wrap: break-word; font-kerning: normal; -webkit-font-smoothing: antialiased; }
::selection { background: var(--cor-cha); color: var(--cor-sobre-cha); }
h1, h2, h3 { font-family: var(--fonte-titulos); font-weight: var(--peso-titulo); font-optical-sizing: auto; line-height: var(--altura-titulo); letter-spacing: -0.012em; margin: var(--espaco-10) 0 var(--espaco-3); text-wrap: balance; }
h1 { font-size: var(--texto-2xl); margin-top: 0; }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-lg); }
h4 { font-family: var(--fonte-texto); font-size: var(--texto-md); font-weight: var(--peso-forte); margin: var(--espaco-6) 0 var(--espaco-2); }
h1 em, h2 em, h3 em { font-style: italic; }
:where(section, article, form, .cartao, .vazio, details) > :is(h1, h2, h3):first-child { margin-top: 0; }
p { margin: 0 0 var(--espaco-3); text-wrap: pretty; }
a { color: var(--cor-link); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: var(--peso-forte); }
.texto-secundario { color: var(--cor-texto-secundario); }
.texto-leitura { font-family: var(--fonte-leitura); font-size: var(--texto-leitura); line-height: var(--altura-leitura); }
.pequeno { font-size: var(--texto-sm); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pilha > * + * { margin-top: var(--espaco-4); }
.linha { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; }
.sem-margem { margin: 0; }
.espaco-4 { margin-top: var(--espaco-4); }
.espaco-6 { margin-top: var(--espaco-10); }
.icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.num { font-variant-numeric: tabular-nums lining-nums; }
/* Rótulo de prensagem: DM Mono versal espaçada (créditos de capa de disco) */
.rotulo-mono { font-family: var(--fonte-mono); font-size: var(--texto-xs); font-weight: 400; letter-spacing: var(--rastreio-mono); text-transform: uppercase; color: var(--cor-texto-secundario); }
/* Cabeça corrida (quem conta, semana, data): a linha de crédito do encarte, em letra de texto */
.cabeca-corrida { font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--cor-texto-secundario); }
/* Texto corrido em Bodoni no corte de texto do eixo óptico: traços finos mais grossos para ler em 19–22 px */
.historia-texto, .olho, .pagina-exemplo blockquote, .texto-leitura, .folha-rosto .texto-secundario, .estado-linha .texto-secundario, .planos-capa p { font-variation-settings: "opsz" 9; }
.plano .preco, .total .valor, .numero-grande { font-variation-settings: "opsz" 18; }

/* Pular para o conteúdo (WCAG 2.4.1) */
.pular { position: absolute; left: var(--espaco-2); top: -120px; z-index: 100; display: inline-flex; align-items: center; padding: var(--espaco-3) var(--espaco-5); min-height: var(--alvo-minimo); background: var(--cor-primaria); color: var(--cor-sobre-primaria); border-radius: var(--raio-pilula); font-weight: var(--peso-forte); text-decoration: none; }
.pular:focus { top: var(--espaco-2); }

/* Foco sempre visível: anel de tinta azul-marinho (rosa-chá no Lado B e sobre a capa escura) */
:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
h1[tabindex="-1"]:focus { outline: none; }

/* ---------- Botão: pílula de selo ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2); min-height: var(--alvo-minimo); min-width: var(--alvo-minimo); padding: var(--espaco-2) var(--espaco-6); border: 1px solid transparent; border-radius: var(--raio-pilula); font-family: var(--fonte-texto); font-size: 16px; font-weight: var(--peso-forte); letter-spacing: 0.005em; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--mov-rapido) var(--mov-curva), border-color var(--mov-rapido) var(--mov-curva), color var(--mov-rapido) var(--mov-curva), transform var(--mov-rapido) var(--mov-curva); }
.btn .icone { width: 18px; height: 18px; }
.btn-primario { background: var(--cor-primaria); color: var(--cor-sobre-primaria); box-shadow: var(--sombra-botao); }
.btn-primario:hover { background: var(--cor-primaria-hover); color: var(--cor-sobre-primaria); }
.btn-secundario { background: var(--cor-secundaria); color: var(--cor-sobre-secundaria); }
.btn-secundario:hover { background: var(--cor-secundaria-hover); color: var(--cor-sobre-secundaria); }
.btn-contorno { background: transparent; color: var(--cor-texto); border-color: var(--cor-borda); }
.btn-contorno:hover { border-color: var(--cor-texto); background: var(--cor-superficie); }
.btn-texto { background: transparent; color: var(--cor-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; padding-inline: var(--espaco-3); }
.btn-texto:hover { text-decoration-thickness: 2px; }
/* A ação de presentear: o mesmo azul-marinho da tinta, maior */
.btn-fita { background: var(--cor-primaria); color: var(--cor-sobre-primaria); box-shadow: var(--sombra-botao); }
.btn-fita:hover { background: var(--cor-primaria-hover); }
.btn-perigo { background: var(--cor-erro); color: var(--cor-sobre-erro); }
.btn-perigo:hover { filter: brightness(0.92); }
.btn:active { transform: translateY(1px); }
.btn-grande { min-height: 58px; padding-inline: var(--espaco-10); font-size: 17px; }
.btn-bloco { display: flex; width: 100%; }
.btn-icone { width: var(--alvo-minimo); padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { background: transparent; color: var(--cor-texto-secundario); border-color: var(--cor-borda-suave); box-shadow: none; cursor: not-allowed; filter: none; transform: none; text-decoration: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before { content: ""; width: 1em; height: 1em; border-radius: 50%; background: repeating-radial-gradient(circle, currentColor 0 1px, transparent 1px 3px); animation: gira 1.6s linear infinite; }

/* ---------- Campo ---------- */
.campo { display: block; }
.campo > label, .campo > .rotulo { display: block; margin-bottom: var(--espaco-2); font-weight: var(--peso-forte); font-size: var(--texto-md); }
.campo .ajuda { display: block; margin-top: var(--espaco-2); font-size: var(--texto-sm); color: var(--cor-texto-secundario); }
.campo .msg-erro, .msg-erro { display: flex; gap: var(--espaco-2); align-items: flex-start; margin-top: var(--espaco-2); font-size: var(--texto-sm); color: var(--cor-erro); font-weight: var(--peso-forte); }
.input, .select, .textarea { display: block; width: 100%; min-height: var(--alvo-minimo); padding: var(--espaco-2) var(--espaco-4); background: var(--cor-superficie); color: var(--cor-texto); border: 1.5px solid var(--cor-borda); border-radius: var(--raio-sm); font: inherit; font-size: max(var(--texto-md), 16px); caret-color: var(--cor-texto); transition: border-color var(--mov-rapido) var(--mov-curva); }
.textarea { min-height: 112px; resize: vertical; line-height: var(--altura-texto); }
.input::placeholder, .textarea::placeholder { color: var(--cor-texto-secundario); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--cor-texto); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--cor-foco); outline-offset: 2px; }
.input[disabled], .select[disabled], .textarea[disabled] { background: var(--cor-superficie-alt); color: var(--cor-texto-secundario); border-color: var(--cor-borda-suave); cursor: not-allowed; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--cor-erro); }
.select { appearance: none; padding-right: var(--espaco-10); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
input[type="range"] { accent-color: var(--cor-texto); }
input[type="file"].input { padding-block: var(--espaco-3); }

/* ---------- Opções, interruptor, idioma ---------- */
/* Caixa de seleção e rádio: a caixa visível tem 24 px e é desenhada pelo rótulo; o controle nativo fica invisível por cima
   com 48 × 48 px de área de toque. O rótulo inteiro clica. */
.opcao { position: relative; display: flex; align-items: flex-start; gap: var(--espaco-3); min-height: var(--alvo-minimo); padding-block: calc((var(--alvo-minimo) - 24px) / 2); cursor: pointer; }
.opcao::before { content: ""; flex: none; width: 24px; height: 24px; box-sizing: border-box; margin-top: 1px; border: 1.5px solid var(--cor-borda); border-radius: var(--raio-sm); background: var(--cor-superficie); transition: background-color var(--mov-rapido), border-color var(--mov-rapido); }
.opcao > input { position: absolute; top: 0; bottom: 0; left: calc((24px - var(--alvo-minimo)) / 2); width: var(--alvo-minimo); min-height: var(--alvo-minimo); margin: 0; opacity: 0; cursor: pointer; }
.opcao > span { flex: 1; min-width: 0; }
.opcao > span a { padding-block: 12px; }
.opcao:has(input[type="radio"])::before { border-radius: 50%; }
.opcao:hover::before { border-color: var(--cor-texto); }
.opcao:has(input:checked)::before { background: var(--cor-primaria); border-color: var(--cor-primaria); }
.opcao:has(input[type="checkbox"]:checked)::after { content: ""; position: absolute; left: 8px; top: calc((var(--alvo-minimo) - 24px) / 2 + 4px); width: 7px; height: 13px; border: solid var(--cor-sobre-primaria); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.opcao:has(input[type="radio"]:checked)::after { content: ""; position: absolute; left: 8px; top: calc((var(--alvo-minimo) - 24px) / 2 + 9px); width: 8px; height: 8px; border-radius: 50%; background: var(--cor-sobre-primaria); }
.opcao:has(input:focus-visible)::before { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.opcao:has(input[disabled]) { cursor: not-allowed; color: var(--cor-texto-secundario); }
.opcao:has(input[disabled])::before { background: var(--cor-superficie-alt); border-color: var(--cor-borda-suave); }
/* Interruptor: um disquinho que corre no sulco */
.interruptor { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-4); min-height: var(--alvo-minimo); padding-block: var(--espaco-1); border-bottom: 1px solid var(--cor-borda-suave); }
.interruptor button { position: relative; flex: none; width: 60px; min-height: var(--alvo-minimo); padding: 0; background: none; border: 0; cursor: pointer; }
.interruptor button::before { content: ""; position: absolute; inset: 12px 0; background: var(--cor-superficie-alt); border: 1.5px solid var(--cor-borda); border-radius: var(--raio-pilula); transition: background-color var(--mov-normal) var(--mov-curva); }
.interruptor button::after { content: ""; position: absolute; top: 15px; left: 4px; width: 18px; height: 18px; background: radial-gradient(circle, var(--cor-cha) 0 3px, var(--cor-texto-secundario) 3.5px); border-radius: 50%; transition: transform var(--mov-normal) var(--mov-curva); }
.interruptor button[aria-checked="true"]::before { background: var(--cor-piscina); border-color: var(--cor-texto); }
.interruptor button[aria-checked="true"]::after { background: radial-gradient(circle, var(--cor-cha) 0 3px, var(--cor-vinil) 3.5px); transform: translateX(34px); }
.fieldset-limpo { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset-limpo > legend { padding: 0; margin-bottom: var(--espaco-2); font-weight: var(--peso-forte); }

/* Seletor de idioma: crédito em Bodoni itálico minúsculo (pt · en · es), sem pílula; o marcado ganha o sublinhado rosa-chá */
.idiomas { display: inline-flex; align-items: center; gap: 0; }
.idiomas label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: var(--alvo-minimo); padding: 0 var(--espaco-1); font-family: var(--fonte-titulos); font-style: italic; font-size: 19px; text-transform: lowercase; cursor: pointer; color: var(--cor-texto-secundario); }
.idiomas label + label::before { content: "·"; position: absolute; left: -3px; color: var(--cor-borda); pointer-events: none; font-style: normal; }
.idiomas input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.idiomas label:has(input:checked) { color: var(--cor-texto); }
.idiomas label:has(input:checked) > span[aria-hidden] { box-shadow: inset 0 -4px 0 var(--cor-cha); padding-inline: 1px; }
.idiomas label:has(input:focus-visible) { outline: 3px solid var(--cor-foco); outline-offset: -2px; }
.idiomas label:hover:not(:has(input:checked)) { color: var(--cor-texto); }

/* ---------- Folha de encarte (antigo "cartão") ---------- */
.cartao { position: relative; background: var(--cor-superficie); color: var(--cor-texto); border-radius: var(--raio-papel); padding: var(--espaco-8); box-shadow: var(--sombra-1); }
.cartao > :last-child { margin-bottom: 0; }
.cartao-link { display: block; text-decoration: none; color: inherit; }
.cartao-link:hover { box-shadow: var(--sombra-2); }
.cartao-destaque { box-shadow: var(--sombra-papel); }
.selo { display: inline-flex; align-items: center; gap: var(--espaco-1); padding: 3px var(--espaco-3); background: var(--cor-destaque); color: var(--cor-sobre-destaque); border-radius: var(--raio-pilula); font-family: var(--fonte-mono); font-size: 12px; font-weight: 500; letter-spacing: var(--rastreio-mono); text-transform: uppercase; line-height: 1.4; vertical-align: 0.1em; }
.selo-neutro { background: transparent; color: var(--cor-texto-secundario); box-shadow: inset 0 0 0 1px var(--cor-borda); }
.selo-aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
.selo-erro { background: var(--cor-erro-fundo); color: var(--cor-erro); }

/* ---------- Lista e sumário (lista de faixas) ---------- */
.lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cor-borda-suave); }
.lista > li { border-bottom: 1px solid var(--cor-borda-suave); }
.item { display: flex; align-items: center; gap: var(--espaco-3); min-height: 60px; padding: var(--espaco-3) 0; color: inherit; text-decoration: none; }
a.item:hover .titulo, button.item:hover .titulo { font-style: italic; }
button.item { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.item .corpo { flex: 1; min-width: 0; }
.item .titulo { font-family: var(--fonte-titulos); font-size: var(--texto-lg); line-height: 1.25; }
.item .meta { display: block; font-family: var(--fonte-mono); font-size: var(--texto-xs); letter-spacing: 0.04em; color: var(--cor-texto-secundario); }
.item[aria-disabled="true"] { color: var(--cor-texto-secundario); cursor: not-allowed; }
/* Sumário = o verso do disco: título em Bodoni, duração e data em Bodoni de texto e, à direita, o número da semana (como diz o texto
   da página). Passar o mouse põe o título em itálico. */
.sumario { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cor-texto); }
.sumario > li { border-bottom: 1px solid var(--cor-borda-suave); }
.sumario a { display: grid; grid-template-columns: minmax(0, 1fr) 13.5em 3ch; grid-template-areas: "t m n"; gap: var(--espaco-1) var(--espaco-4); align-items: baseline; padding: var(--espaco-3) 0; color: inherit; text-decoration: none; min-height: 60px; }
.sumario a:hover .sumario-titulo > span:first-child { font-style: italic; }
/* Título, pontilhado-guia até a coluna da data e o número da semana em itálico: o sumário de um livro impresso */
.sumario-titulo { grid-area: t; display: flex; gap: var(--espaco-3); align-items: baseline; font-family: var(--fonte-titulos); font-size: var(--texto-lg); line-height: 1.25; }
.sumario-titulo > span:first-child { flex: 0 1 auto; }
.sumario-titulo::after { content: ""; flex: 1 1 32px; min-width: 32px; border-bottom: 1.5px dotted var(--cor-borda); transform: translateY(-0.28em); }
.sumario-folio { grid-area: n; justify-self: end; font-family: var(--fonte-titulos); font-size: var(--texto-lg); font-style: italic; font-variant-numeric: lining-nums tabular-nums; }
.sumario-meta { grid-area: m; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: var(--espaco-3); align-items: baseline; font-family: var(--fonte-titulos); font-variation-settings: "opsz" 9; font-size: 17px; color: var(--cor-texto-secundario); text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
/* "nova" vira o ponto pêssego; a palavra continua para o leitor de tela */
.sumario-meta .selo:not(.selo-neutro):not(.selo-aviso):not(.selo-erro), .faixas-lista .nova { width: 9px; height: 9px; min-height: 0; padding: 0; overflow: hidden; font-size: 0; border-radius: 50%; background: var(--cor-cha-forte); align-self: center; }
@media (max-width: 640px) { .sumario a { grid-template-columns: minmax(0, 1fr) 3ch; grid-template-areas: "t n" "m ."; } .sumario-titulo::after { display: none; } .sumario-meta { justify-content: flex-start; text-align: left; } }
/* Passos numerados: a contagem é a faixa (A1, A2, A3) */
.passos { list-style: none; counter-reset: p; margin: 0; padding: 0; border-top: 1px solid var(--cor-borda-suave); }
.passos > li { counter-increment: p; display: grid; grid-template-columns: 4ch minmax(0, 1fr); gap: var(--espaco-3); align-items: baseline; padding: var(--espaco-4) 0; border-bottom: 1px solid var(--cor-borda-suave); }
.passos > li::before { content: "A" counter(p); font-family: var(--fonte-mono); font-size: var(--texto-xs); letter-spacing: var(--rastreio-mono); color: var(--cor-texto-secundario); }
.passos > li[data-estado="feito"]::before { content: "✓"; color: var(--cor-sucesso); }
.passos > li[aria-current="step"] { background: var(--cor-piscina); color: var(--cor-sobre-piscina); margin-inline: calc(var(--espaco-3) * -1); padding-inline: var(--espaco-3); }

/* ---------- Sulcos: uma faixa por história até o livro (substitui a estante) ---------- */
.estante { display: flex; gap: 3px; align-items: center; margin: var(--espaco-3) 0 var(--espaco-2); }
.estante > i { flex: 1; min-width: 4px; height: 10px; border-radius: var(--raio-pilula); background: transparent; box-shadow: inset 0 0 0 1px var(--cor-texto-secundario); }
.estante > i[data-cheia] { background: var(--cor-texto); box-shadow: none; }

/* ---------- Modal ---------- */
.modal-fundo { display: grid; place-items: center; padding: var(--espaco-4); background: rgba(18, 22, 43, 0.6); }
.modal { width: min(100%, 480px); background: var(--cor-superficie); color: var(--cor-texto); border-radius: var(--raio-papel); padding: var(--espaco-8); box-shadow: var(--sombra-papel); animation: subir var(--mov-normal) var(--mov-curva); }
.modal h2 { margin-top: 0; }
.modal .acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); justify-content: flex-end; margin-top: var(--espaco-6); }

/* ---------- Toast e avisos: tira de papel com um selo redondo da cor do estado ---------- */
.toast, .aviso { display: flex; gap: var(--espaco-3); align-items: flex-start; padding: var(--espaco-3) var(--espaco-4); border-radius: var(--raio-papel); }
.toast > .icone, .aviso > .icone { margin-top: 3px; }
.toast { box-shadow: var(--sombra-2); animation: subir var(--mov-normal) var(--mov-curva); }
.toast > .corpo, .aviso > .corpo { flex: 1; color: var(--cor-texto); }
.toast .btn { margin: calc(var(--espaco-2) * -1) calc(var(--espaco-2) * -1) calc(var(--espaco-2) * -1) 0; color: var(--cor-texto); }
.estado-sucesso { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
.estado-aviso { color: var(--cor-aviso); background: var(--cor-aviso-fundo); }
.estado-erro { color: var(--cor-erro); background: var(--cor-erro-fundo); }
.estado-info { color: var(--cor-info); background: var(--cor-info-fundo); }
.toasts { position: fixed; left: var(--espaco-4); right: var(--espaco-4); bottom: var(--espaco-4); display: grid; gap: var(--espaco-2); max-width: 440px; margin-inline: auto; z-index: 70; pointer-events: none; }
.toasts > * { pointer-events: auto; }

/* ---------- Vazio, carregando, erro ---------- */
.vazio { text-align: center; padding: var(--espaco-8) var(--espaco-4) var(--espaco-10); }
.vazio .ilustracao { width: 168px; height: 168px; margin: 0 auto var(--espaco-4); display: grid; place-items: center; border-radius: 50%; background: url('/img/radio-480.jpg') center / cover no-repeat, var(--cor-papel-fundo-imagem); color: transparent; }
.vazio .ilustracao .icone { display: none; }
.vazio h1, .vazio h2 { font-size: var(--texto-xl); }
.vazio p { max-width: 40ch; margin-inline: auto; color: var(--cor-texto-secundario); }
.estado-erro-cartao .ilustracao { background: var(--cor-erro-fundo); color: var(--cor-erro) !important; width: 76px; height: 76px; }
.estado-erro-cartao .ilustracao .icone { display: block; width: 32px; height: 32px; }
/* Carregando: os sulcos do disco girando devagar no lugar do brilho genérico */
.esqueleto { display: block; height: 1em; border-radius: var(--raio-pilula); background: var(--cor-superficie-alt); animation: pulsar 1.6s var(--mov-curva) infinite alternate; }
.esqueleto + .esqueleto { margin-top: var(--espaco-3); }
.girando { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle, var(--cor-cha) 0 5px, transparent 5.5px), repeating-radial-gradient(circle, var(--cor-vinil) 0 2px, var(--cor-vinil-sulco) 2px 4px); animation: gira 1.8s linear infinite; }
.progresso { height: 6px; border-radius: var(--raio-pilula); background: var(--cor-superficie-alt); overflow: hidden; }
.progresso > span { display: block; height: 100%; background: var(--cor-cha-forte); }
/* Cadernos (passo do presente): quatro sulcos */
.cadernos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: var(--espaco-2) 0; }
.cadernos > i { height: 8px; border-radius: var(--raio-pilula); box-shadow: inset 0 0 0 1px var(--cor-texto-secundario); }
.cadernos > i[data-feito] { background: var(--cor-texto); box-shadow: none; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes pulsar { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes subir { from { transform: translateY(12px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto, .girando, .btn[aria-busy="true"]::before { animation: none; } .toast, .modal { animation: none; } }

/* ---------- Planos: os dois lados do disco, como créditos de contracapa (sem caixa, sem checklist de software) ---------- */
.planos { display: grid; gap: var(--espaco-10); }
.plano.cartao { position: relative; display: flex; flex-direction: column; gap: var(--espaco-3); background: transparent; box-shadow: none; border-radius: 0; padding: var(--espaco-6) 0 0; border-top: 1px solid var(--cor-texto); }
.plano > h2 { margin: 0; font-size: clamp(30px, 3.4vw, 40px); }
.plano .preco { font-family: var(--fonte-titulos); font-size: var(--texto-3xl); font-weight: 400; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums; margin: var(--espaco-2) 0 0; }
.plano .preco small { display: block; margin-top: var(--espaco-3); font-family: var(--fonte-texto); font-size: var(--texto-sm); letter-spacing: 0; color: var(--cor-texto-secundario); }
.plano ul { list-style: none; margin: var(--espaco-3) 0 var(--espaco-6); padding: 0; }
.plano li { display: flex; gap: var(--espaco-3); align-items: baseline; padding: var(--espaco-2) 0; border-bottom: 1px solid var(--cor-borda-suave); }
/* Incluído: o selinho de disco; não incluído: um traço. Os ícones de traço ficam só para o leitor de tela entender a lista */
.plano li .icone { display: none; }
.plano li::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle, var(--cor-cha) 0 2px, var(--cor-vinil) 2.5px); transform: translateY(1px); }
.plano li.nao { color: var(--cor-texto-secundario); }
.plano li.nao::before { background: none; border-radius: 0; height: 1px; transform: translateY(-4px); background-color: var(--cor-texto-secundario); }
.plano li.nao .prefixo { font-weight: var(--peso-forte); }
.plano li.nao .prefixo::after { content: " "; }
/* "Mais escolhido": um selo redondo rosa-chá colado na ilustração, como a etiqueta de um disco novo */
.plano .selo { position: absolute; z-index: 1; top: var(--espaco-4); left: 0; width: 104px; height: 104px; display: grid; place-items: center; padding: var(--espaco-3); border-radius: 50%; background: var(--cor-cha); color: var(--cor-sobre-cha); font-family: var(--fonte-titulos); font-style: italic; font-size: 18px; font-weight: 400; letter-spacing: 0; line-height: 1.1; text-transform: none; text-align: center; transform: rotate(-10deg); box-shadow: var(--sombra-1); }
.plano .btn { margin-top: auto; align-self: flex-start; }
@media (min-width: 640px) { .plano.cartao + .plano.cartao { padding-left: var(--espaco-10); border-left: 1px solid var(--cor-borda-suave); } }
.garantia { display: flex; gap: var(--espaco-4); align-items: flex-start; }
.garantia > .icone { color: var(--cor-sucesso); margin-top: 10px; }

/* ---------- Player: a vitrola (botão redondo de tinta, sulco com a agulha, tempo em mono) ---------- */
/* O botão de tocar é o próprio disco: vinil com selo rosa-chá; o progresso corre como um arco em volta (--p, de 0 a 100) */
.player { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: var(--espaco-4); padding: 0; --p: 0; }
.player + .player { margin-top: var(--espaco-3); }
.player [data-tocar] { width: 76px; height: 76px; min-height: 76px; padding: 0; border-radius: 50%; border: 5px solid transparent; color: var(--cor-vinil);
  background: radial-gradient(circle closest-side, var(--cor-cha) 0 40%, transparent 41%) padding-box, repeating-radial-gradient(circle, var(--cor-vinil) 0 2px, var(--cor-vinil-sulco) 2px 4px) padding-box, conic-gradient(var(--cor-cha-forte) calc(var(--p) * 1%), var(--cor-borda-suave) 0) border-box;
  box-shadow: var(--sombra-botao); }
.player [data-tocar]:hover { filter: brightness(1.12); }
.player [data-tocar] .icone { position: relative; z-index: 1; width: 20px; height: 20px; fill: currentColor; stroke: none; }
/* O brilho do vinil, que gira enquanto toca (o arco de progresso fica parado) */
.player [data-tocar]::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(transparent 0 30deg, rgba(255, 246, 228, 0.16) 45deg, transparent 60deg 210deg, rgba(255, 246, 228, 0.12) 225deg, transparent 240deg); pointer-events: none; }
.player time { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-size: var(--texto-xs); letter-spacing: 0.04em; color: var(--cor-texto); min-width: 9ch; text-align: right; }
input[type="range"].busca { width: 100%; min-height: var(--alvo-minimo); margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
input[type="range"].busca::-webkit-slider-runnable-track { height: 6px; border-radius: var(--raio-pilula); background: var(--cor-superficie-alt); box-shadow: inset 0 0 0 1px var(--cor-borda-suave); }
input[type="range"].busca::-moz-range-track { height: 6px; border-radius: var(--raio-pilula); background: var(--cor-superficie-alt); }
input[type="range"].busca::-moz-range-progress { height: 6px; border-radius: var(--raio-pilula); background: var(--cor-cha-forte); }
input[type="range"].busca::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle, var(--cor-cha) 0 3px, var(--cor-vinil) 3.5px); border: 0; }
input[type="range"].busca::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, var(--cor-cha) 0 3px, var(--cor-vinil) 3.5px); border: 0; }
input[type="range"].busca:focus-visible { outline-offset: 0; }

/* ---------- Acordeão, código, QR, total, linha do tempo, avaliação ---------- */
.acordeao { border-top: 1px solid var(--cor-borda-suave); border-bottom: 1px solid var(--cor-borda-suave); }
.acordeao + .acordeao { border-top: 0; }
.pilha > .acordeao + .acordeao { margin-top: 0; }
.acordeao summary { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); min-height: 60px; padding: var(--espaco-3) 0; font-family: var(--fonte-titulos); font-size: var(--texto-lg); line-height: 1.3; cursor: pointer; list-style: none; }
.acordeao summary:hover > span { font-style: italic; }
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary .icone { transition: transform var(--mov-normal) var(--mov-curva); }
.acordeao[open] summary .icone { transform: rotate(90deg); }
.acordeao > div { padding: 0 0 var(--espaco-5); max-width: 64ch; }
.codigo { display: block; padding: var(--espaco-5); background: var(--cor-superficie); border-left: 3px solid var(--cor-cha-forte); border-radius: 0 var(--raio-papel) var(--raio-papel) 0; font-family: var(--fonte-texto); font-size: var(--texto-md); line-height: var(--altura-texto); overflow-wrap: anywhere; user-select: all; white-space: pre-wrap; }
.codigo-mono { font-family: var(--fonte-mono); font-size: var(--texto-sm); }
.qr { width: 180px; height: 180px; margin-inline: auto; display: grid; place-items: center; background: #fff; color: #000; border-radius: var(--raio-papel); box-shadow: var(--sombra-1); }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espaco-3); padding-top: var(--espaco-3); border-top: 1px solid var(--cor-texto); font-family: var(--fonte-mono); font-size: var(--texto-xs); letter-spacing: var(--rastreio-mono); text-transform: uppercase; }
.total .valor { font-family: var(--fonte-titulos); font-size: var(--texto-xl); letter-spacing: -0.01em; text-transform: none; font-variant-numeric: lining-nums; }
.linha-tempo { list-style: none; margin: var(--espaco-2) 0; padding: 0; }
.linha-tempo > li { position: relative; padding: 0 0 var(--espaco-5) var(--espaco-8); }
.linha-tempo > li::before { content: ""; position: absolute; left: 9px; top: 22px; bottom: 0; width: 1px; background: var(--cor-borda); }
.linha-tempo > li:last-child::before { display: none; }
.linha-tempo > li::after { content: ""; position: absolute; left: 1px; top: 3px; width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--cor-borda); background: var(--cor-fundo); }
.linha-tempo > li[data-estado="feito"]::after { background: radial-gradient(circle, var(--cor-cha) 0 3px, var(--cor-vinil) 3.5px); box-shadow: none; }
.linha-tempo > li[aria-current="step"]::after { background: var(--cor-piscina); box-shadow: inset 0 0 0 1px var(--cor-texto); }
.avaliacao { display: flex; flex-wrap: wrap; gap: var(--espaco-2); border: 0; padding: 0; margin: 0; }
.avaliacao label { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 56px; min-height: var(--alvo-minimo); padding: 0 var(--espaco-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-pilula); cursor: pointer; font-family: var(--fonte-mono); font-size: var(--texto-sm); }
.avaliacao input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.avaliacao label:has(input:checked) { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.avaliacao label:has(input:focus-visible) { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.avaliacao .icone { width: 16px; height: 16px; }
.cartao-opcao { position: relative; display: flex; gap: var(--espaco-3); align-items: flex-start; padding: var(--espaco-4); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-papel); background: var(--cor-superficie); cursor: pointer; min-height: var(--alvo-minimo); transition: border-color var(--mov-rapido) var(--mov-curva); }
.cartao-opcao:hover { border-color: var(--cor-borda); }
.cartao-opcao:has(input:checked) { border-color: var(--cor-texto); background: var(--cor-superficie); box-shadow: inset 0 0 0 1px var(--cor-texto); }
.cartao-opcao:has(input:focus-visible) { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.cartao-opcao::before { content: ""; flex: none; width: 24px; height: 24px; margin-top: 2px; box-sizing: border-box; border: 1.5px solid var(--cor-borda); border-radius: 50%; background: var(--cor-superficie); transition: background-color var(--mov-rapido), border-color var(--mov-rapido); }
.cartao-opcao:has(input:checked)::before { background: radial-gradient(circle, var(--cor-cha) 0 3px, var(--cor-vinil) 3.5px); border-color: var(--cor-vinil); }
.cartao-opcao input { position: absolute; top: calc(var(--espaco-4) + 14px - var(--alvo-minimo) / 2); left: calc(var(--espaco-4) + 12px - var(--alvo-minimo) / 2); width: var(--alvo-minimo); height: var(--alvo-minimo); margin: 0; opacity: 0; cursor: pointer; }
.cartao-opcao + .cartao-opcao { margin-top: var(--espaco-2); }
.reordenar { display: flex; gap: var(--espaco-1); flex: none; }
/* Fila de perguntas: as próximas faixas, numeradas, sem caixa em volta */
ol.lista.reordenar { display: block; border-top: 1px solid var(--cor-texto); }
ol.lista.reordenar > li.cartao { background: transparent; box-shadow: none; border-radius: 0; padding: var(--espaco-4) 0; border-bottom: 1px solid var(--cor-borda-suave); }
ol.lista.reordenar > li strong { font-family: var(--fonte-titulos); font-weight: 400; font-size: var(--texto-lg); }
ol.lista.reordenar .linha { gap: var(--espaco-1); }
details.mais > summary { display: flex; align-items: center; gap: var(--espaco-2); min-height: var(--alvo-minimo); font-weight: var(--peso-forte); cursor: pointer; }
.grade-2 { display: grid; gap: var(--espaco-4); }
@media (min-width: 640px) { .grade-2, .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.btn, .item .titulo, .nav a, .sumario-titulo { hyphens: auto; }