/* Tela de Novidades. Tokens de --dur-*/--ease-out/--sombra-* vêm de style.css.
   Toda animação aqui é CSS puro (animation, não JS), então a regra global de
   `prefers-reduced-motion` em style.css já desliga tudo sozinha. */
.novidades-pagina{display:block}
.novidades-hero{position:relative;border-radius:var(--radius);overflow:hidden;margin-bottom:28px;background:#efe9df;box-shadow:var(--sombra-2);animation:sobe var(--dur-3) var(--ease-out) both}
.novidades-hero-img{display:block;width:100%;height:clamp(200px,30vw,340px);object-fit:cover}
.novidades-hero-texto{position:absolute;inset:auto 0 0 0;padding:30px 34px;color:#fff;background:linear-gradient(0deg,#1c1d1be3 0%,#1c1d1b73 55%,transparent 100%)}
.novidades-hero-texto .eyebrow{color:#ffcda0;margin-bottom:8px}
.novidades-hero-texto h2{margin:0 0 8px;font-size:26px;font-weight:550;letter-spacing:-.6px;max-width:640px}
.novidades-hero-texto p{margin:0 0 12px;font-size:13px;color:#eee9dd;max-width:560px;line-height:1.6}
.novidades-hero-meta{font-size:11px;letter-spacing:.4px;color:#d8d2c2}
.novidades-linha{list-style:none;margin:0;padding:0 0 4px 30px;border-left:2px solid var(--line)}
.novidades-versao{position:relative;padding:0 0 36px;animation:sobe var(--dur-3) var(--ease-out) both}
.novidades-versao:last-child{padding-bottom:0}
.novidades-marco{position:absolute;top:5px;left:-37px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--paper)}
.novidades-corpo{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.novidades-versao-cabecalho{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.novidades-versao-cabecalho time{font-size:11px;color:var(--muted)}
.novidades-corpo h2{font-size:19px;margin:0 0 6px}
.novidades-corpo>p.muted{margin:0 0 16px;font-size:13px}
.novidades-itens{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:4px}
.novidades-item{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:14px;min-width:0;animation:sobe var(--dur-2) var(--ease-out) both}
.novidades-item-icone{flex-shrink:0;width:36px;height:36px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.novidades-item-arte{flex-shrink:0;width:56px;height:56px;object-fit:cover;border-radius:8px;background:#efe9df;block-size:56px}
.novidades-item h3{margin:0 0 4px;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.novidades-item p{margin:0;font-size:12px;color:var(--muted);line-height:1.55;overflow-wrap:anywhere}
.novidades-item>div{min-width:0}
.novidades-corpo,.novidades-corpo *,.novidades-hero-texto,.novidades-hero-texto *{overflow-wrap:anywhere}
@media(max-width:760px){
 .novidades-hero-img{height:190px}
 .novidades-hero-texto{padding:20px}
 .novidades-hero-texto h2{font-size:21px}
 .novidades-linha{padding-left:22px}
 .novidades-marco{left:-29px}
 .novidades-corpo{padding:18px}
 .novidades-itens{grid-template-columns:1fr}
}

/* Aviso de versão nova (02/10/2026): diálogo modal no CENTRO, folha de baixo
   no celular. Montado por app.js dentro de #aviso-novidades, que agora é só o
   ponto de montagem (o diálogo vai para a camada de topo com showModal).
   Coreografia (um momento só): fundo escurece em 240 ms; o cartão sobe 24 px
   e cresce de .94 numa mola curta; a capa assenta de 1.06 para 1 e o clipe
   entra por cima quando começa a tocar; o texto aparece em bloco, sem
   cascata. Saída em 180 ms. A regra global de prefers-reduced-motion de
   style.css desliga tudo isso, inclusive o ::backdrop. */
#aviso-novidades{display:contents}
:root{--nm-mola:linear(0,.13 4%,.42 10%,.72 17%,.9 24%,.99 31%,1.025 38%,1.03 44%,1.02 52%,1.005 64%,.999 78%,1)}
html:has(.novidades-modal[open]){overflow:hidden}
.novidades-modal{padding:0;border:0;background:transparent;color:var(--ink);width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;overflow:visible}
.novidades-modal::backdrop{background:rgba(28,29,27,.46);backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1);animation:nm-fundo 240ms linear both}
.novidades-modal-cartao{position:relative;display:flex;flex-direction:column;max-height:calc(100dvh - 32px);background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:0 32px 80px #1c1d1b40,0 2px 8px #1c1d1b1f;animation:nm-opaco 220ms var(--ease-out) both,nm-sobe 560ms var(--nm-mola) both;transform-origin:50% 60%}
.novidades-modal-midia{position:relative;flex-shrink:0;aspect-ratio:16/7;background:#efe9df;overflow:hidden}
.novidades-modal-midia img,.novidades-clipe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 22%}
.novidades-modal-capa{animation:nm-assenta 1400ms var(--ease-out) both}
.novidades-clipe{opacity:0;transition:opacity 600ms var(--ease-out)}
.novidades-clipe.tocando{opacity:1}
.novidades-modal-midia::after{content:'';position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(0deg,#fffffff0,#fff0);pointer-events:none}
.novidades-modal-selo{position:absolute;z-index:1;top:16px;left:16px;display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.3px;box-shadow:0 6px 18px #ec701459}
.novidades-modal-selo::before{content:'';width:6px;height:6px;border-radius:50%;background:#fff;animation:nm-pulso 2.4s ease-in-out 900ms infinite}
.novidades-modal-fechar{position:absolute;z-index:2;top:12px;right:12px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:#ffffffd9;color:var(--ink);box-shadow:0 2px 10px #1c1d1b26;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:background var(--dur-1),transform var(--dur-1)}
.novidades-modal-fechar:hover{background:#fff;transform:scale(1.06)}
.novidades-modal-fechar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.novidades-modal-corpo{padding:6px 28px 24px;overflow-y:auto;min-height:0;outline:none;animation:nm-texto 320ms var(--ease-out) 140ms both}
.novidades-modal-corpo,.novidades-modal-corpo *{overflow-wrap:anywhere}
.novidades-modal-corpo .eyebrow{margin:0 0 8px;color:var(--accent-ink)}
.novidades-modal-corpo h2{margin:0 0 6px;font-family:var(--display);font-size:24px;line-height:1.18;font-weight:600;letter-spacing:-.4px;text-wrap:balance}
.novidades-modal-meta{margin:0 0 12px;font-size:12px;color:var(--muted)}
.novidades-modal-resumo{margin:0 0 16px;font-size:14px;line-height:1.55;color:#4a4c47;text-wrap:pretty}
.novidades-modal-itens{list-style:none;margin:0 0 6px;padding:14px 0 0;display:grid;gap:10px;border-top:1px solid var(--line)}
.novidades-modal-item{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:600;line-height:1.35}
.novidades-modal-item-icone{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink)}
.novidades-modal-item>span:last-child{min-width:0}
.novidades-modal-mais{margin:4px 0 0;font-size:12px;color:var(--muted)}
.novidades-modal-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.novidades-modal-acoes button{min-height:42px;padding:0 18px}
.novidades-modal.saindo::backdrop{animation:nm-fundo-sai 180ms linear forwards}
.novidades-modal.saindo .novidades-modal-cartao{animation:nm-sai 180ms cubic-bezier(.4,0,1,1) forwards}
@keyframes nm-fundo{from{opacity:0}}
@keyframes nm-fundo-sai{to{opacity:0}}
@keyframes nm-opaco{from{opacity:0}}
@keyframes nm-sobe{from{transform:translateY(24px) scale(.94)}}
@keyframes nm-assenta{from{transform:scale(1.06)}}
@keyframes nm-texto{from{opacity:0;transform:translateY(8px)}}
@keyframes nm-sai{to{opacity:0;transform:translateY(12px) scale(.97)}}
@keyframes nm-pulso{0%,100%{opacity:1}50%{opacity:.35}}
/* Celular: folha de baixo, presa ao rodapé, até 85% da altura. O polegar
   alcança as duas ações, e o conteúdo rola por dentro com o rodapé fixo. */
@media(max-width:600px){
 .novidades-modal{width:100vw;max-height:85dvh;margin:auto 0 0}
 .novidades-modal-cartao{max-height:85dvh;border-radius:20px 20px 0 0;animation:nm-opaco 200ms var(--ease-out) both,nm-folha 460ms var(--ease-out) both}
 .novidades-modal.saindo .novidades-modal-cartao{animation:nm-folha-sai 200ms cubic-bezier(.4,0,1,1) forwards}
 .novidades-modal-midia{aspect-ratio:16/8}
 .novidades-modal-corpo{padding:4px 20px 0}
 .novidades-modal-corpo h2{font-size:21px}
 .novidades-modal-acoes{position:sticky;bottom:0;flex-direction:column-reverse;gap:8px;margin:16px -20px 0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
 .novidades-modal-acoes button{width:100%}
 @keyframes nm-folha{from{transform:translateY(100%)}}
 @keyframes nm-folha-sai{to{transform:translateY(100%)}}
}
/* Tela cheia: o mesmo clipe na capa, por baixo do degradê do texto. */
.novidades-hero .novidades-clipe{object-position:center}
.novidades-hero-texto{z-index:1}
/* 02/10: aviso interno de registro de acessos e ações, em diálogo, uma vez. */
.aviso-registro{width:min(480px,calc(100vw - 32px));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sombra-3);padding:var(--s5);background:var(--surface);color:var(--ink)}
.aviso-registro::backdrop{background:rgba(28,29,27,.32)}
.aviso-registro h2{margin:0 0 var(--s3);font-size:20px}
.aviso-registro p{margin:0 0 var(--s3);font-size:14px;line-height:1.5}
.aviso-registro-erro{color:#b64e38;font-weight:600}
.aviso-registro-acoes{display:flex;justify-content:flex-end;margin-top:var(--s4)}