/* Aviso e painel de cookies (LGPD). Onda L (17/10/2026), só apresentação: mesmas categorias, mesmo comportamento e o
   mesmo armazenamento da escolha (js/consent.js não muda; o portão do widget da Luna continua o mesmo).
   Regras: "Recusar tudo" e "Aceitar tudo" com o MESMO peso visual, lado a lado, inclusive no celular (antes o aceitar
   tinha destaque Aether e ocupava a linha inteira no celular); "Personalizar" é o terceiro caminho, discreto. Painel com
   interruptores próprios (botões role="switch", nenhum checkbox nativo), categorias em linhas de 1 px, foco preso e Esc
   pelo consent.js, contraste AA, toque >= 44 px, movimento reduzido sem deslizar. No celular o painel é uma folha que
   sobe do pé da tela. Vive fora do motor de animação: se o GSAP cair, o aviso continua de pé. */
/* Onda C · A2 (achado da auditoria: no celular o aviso tinha 321 px, 38% da tela de 390 x 844, e cobria os dois CTAs do
   herói; em 1280 x 720 o card do computador, 204 px, também cobria os CTAs). Causa: rótulo, título, parágrafo de quatro
   linhas, o par de botões e "Personalizar" numa linha própria, empilhados no celular. Agora o aviso é uma barra baixa no
   pé da tela, a mesma em todas as larguras: uma frase (com o direito de mudar de ideia) e a Política; Recusar tudo e
   Aceitar tudo com o mesmo peso e a mesma largura, e Personalizar ao lado. js/consent.js não muda: mesmo comportamento,
   mesmas categorias, mesmo armazenamento e o mesmo portão do widget. */
.cmp{position:fixed;z-index:130;inset:auto 0 0 0;padding:0 clamp(16px,3vw,28px) clamp(14px,2.4vh,22px);display:flex;justify-content:center;pointer-events:none}
.cmp[hidden]{display:none}
.cmp-card{pointer-events:auto;width:min(1080px,100%);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 28px;padding:14px 16px 14px 22px;border-radius:18px;border:1px solid rgba(242,243,246,.15);background:#07080C;box-shadow:0 34px 80px -28px rgba(2,2,5,.92),inset 0 1px 0 rgba(242,243,246,.06);transform:translateY(22px);opacity:0;transition:transform .55s var(--ease),opacity .55s var(--ease)}
.cmp.is-open .cmp-card{transform:translateY(0);opacity:1}
.cmp-kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3)}
.cmp-kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--aether)}
.cmp-text{margin:0;max-width:none;font-size:.875rem;line-height:1.6;color:var(--tinta-2)}
.cmp-text b{font-weight:700;color:var(--tinta)}
.cmp-link{display:inline-block;padding:12px 0;margin:-12px 0;color:var(--tinta);text-decoration:underline;text-decoration-color:rgba(242,243,246,.35);text-underline-offset:4px;transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.cmp-link:hover{color:var(--aether-ink);text-decoration-color:var(--aether)}
.cmp-actions{display:flex;align-items:center;gap:6px 10px}
/* o par da decisão: dois botões idênticos (mesma cor, borda, tamanho, peso e posição relativa) */
.cmp-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cmp .pill,.cmp-sheet .pill{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;min-width:150px;padding:0 20px;border-radius:999px;font:inherit;font-size:.875rem;font-weight:600;letter-spacing:-.005em;line-height:1.2;background:rgba(242,243,246,.05);border:1px solid rgba(242,243,246,.22);box-shadow:inset 0 1px 0 rgba(242,243,246,.05);color:var(--tinta);cursor:pointer;transition:border-color .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
/* a pílula da página tem um ponto decorativo (::before) que não pertence aos botões do aviso */
.cmp .pill::before,.cmp-sheet .pill::before{display:none}
.cmp .pill:hover,.cmp-sheet .pill:hover{border-color:rgba(0,194,255,.6);background:rgba(0,194,255,.07)}
.cmp .pill:active,.cmp-sheet .pill:active{transform:translateY(1px)}
/* "Salvar escolhas" confirma o que está nos interruptores (por padrão, tudo desligado): é a ação do painel */
.cmp-sheet .pill-save{background:linear-gradient(145deg,rgba(0,194,255,.16),rgba(0,194,255,.04));border-color:rgba(0,194,255,.5)}
.cmp-sheet .pill-save:hover{border-color:var(--aether)}
.cmp-more{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;font:inherit;font-size:.8125rem;font-weight:600;color:var(--tinta-2);text-decoration:underline;text-decoration-color:rgba(242,243,246,.3);text-underline-offset:4px;cursor:pointer;transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.cmp-more:hover{color:var(--tinta);text-decoration-color:var(--aether)}
/* celular: a frase em cima (largura toda) e, numa linha só, o par da decisão e Personalizar */
@media (max-width:760px){
  .cmp{padding:0 10px calc(10px + env(safe-area-inset-bottom,0px))}
  .cmp-card{grid-template-columns:minmax(0,1fr);padding:12px 12px 10px;gap:8px}
  .cmp-text{font-size:.8125rem;line-height:1.5}
  .cmp .cmp-link{padding:13px 0;margin:-13px 0}
  .cmp-actions{flex-wrap:wrap;gap:4px 8px}
  .cmp-choice{flex:1 1 200px;gap:6px}
  .cmp .pill{min-width:0;min-height:44px;padding:0 10px;font-size:.8125rem}
  .cmp-more{flex:none;justify-content:center;padding:0 4px;font-size:.78rem}
}
.cmp-panel{position:fixed;inset:0;z-index:140;display:grid;place-items:center}
.cmp-panel[hidden]{display:none}
.cmp-scrim{position:absolute;inset:0;cursor:pointer;background:rgba(5,6,10,.76);opacity:0;transition:opacity .42s var(--ease)}
.cmp-panel.is-open .cmp-scrim{opacity:1}
.cmp-sheet{position:relative;display:flex;flex-direction:column;width:min(640px,calc(100vw - 32px));max-height:min(92vh,860px);overflow:hidden;padding:24px 28px 20px;border-radius:24px;border:1px solid rgba(242,243,246,.15);background:var(--cosmos);box-shadow:0 44px 96px -30px rgba(2,2,5,.94),inset 0 1px 0 rgba(242,243,246,.06);transform:translateY(18px) scale(.985);opacity:0;transition:transform .42s var(--ease),opacity .42s var(--ease)}
.cmp-panel.is-open .cmp-sheet{transform:translateY(0) scale(1);opacity:1}
.cmp-sheet-head{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.cmp-sheet-title{margin-top:8px;font-size:1.25rem;font-weight:300;letter-spacing:-.03em;color:var(--tinta)}
.cmp-close{flex:0 0 auto;display:inline-grid;place-items:center;cursor:pointer;width:44px;height:44px;border-radius:50%;border:1px solid rgba(242,243,246,.15);background:transparent;color:var(--tinta-2);transition:border-color .3s var(--ease),color .3s var(--ease)}
.cmp-close:hover{border-color:var(--aether);color:var(--aether-ink)}
.cmp-why{flex:0 0 auto;margin-top:14px;padding:12px 14px;border-radius:14px;border:1px solid rgba(0,194,255,.38);background:rgba(0,194,255,.06);font-size:.8125rem;line-height:1.6;color:var(--tinta)}
.cmp-why[hidden]{display:none}
.cmp-sheet-intro{flex:0 0 auto;margin-top:10px;max-width:62ch;font-size:.875rem;line-height:1.6;color:var(--tinta-2)}
/* categorias em linhas de 1 px; a que a Luna pediu ganha o trilho Aether */
.cmp-cats{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;margin:16px 0 0 -14px;padding:0 0 0 14px;display:block}
.cmp-cat{position:relative;padding:12px 2px 13px;border-bottom:1px solid var(--linha);transition:background-color .32s var(--ease)}
.cmp-cat:first-child{border-top:1px solid rgba(242,243,246,.15)}
.cmp-cat::before{content:"";position:absolute;left:-14px;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--aether);opacity:0;transition:opacity .32s var(--ease)}
.cmp-cat.is-asked::before{opacity:1}
.cmp-cat.is-asked .cmp-cat-name{color:var(--aether-ink)}
.cmp-cat-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cmp-cat-name{font-size:.9375rem;font-weight:700;letter-spacing:-.01em;color:var(--tinta)}
.cmp-cat-text{margin-top:2px;max-width:58ch;font-size:.8125rem;line-height:1.55;color:var(--tinta-2)}
.cmp-always{flex:0 0 auto;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px;white-space:nowrap;border:1px solid rgba(242,243,246,.15);color:var(--tinta-2)}
.cmp-switch{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;min-width:58px;min-height:44px;padding:4px;margin:-4px -4px -4px 0;border:0;background:none;border-radius:999px}
.cmp-switch-track{display:block;position:relative;width:48px;height:28px;border-radius:999px;border:1px solid rgba(242,243,246,.24);background:rgba(242,243,246,.05);transition:border-color .32s var(--ease),background-color .32s var(--ease)}
.cmp-switch-dot{position:absolute;top:50%;left:3px;width:20px;height:20px;border-radius:50%;transform:translate(0,-50%);background:var(--tinta-2);transition:transform .32s var(--ease),background-color .32s var(--ease)}
.cmp-switch[aria-checked="true"] .cmp-switch-track{border-color:rgba(0,194,255,.6);background:rgba(0,194,255,.16)}
.cmp-switch[aria-checked="true"] .cmp-switch-dot{transform:translate(20px,-50%);background:var(--aether)}
.cmp-switch:hover .cmp-switch-track{border-color:rgba(242,243,246,.4)}
.cmp-sheet-actions{flex:0 0 auto;margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cmp-sheet-actions .pill{min-width:0}
.cmp-sheet-actions .pill-save{grid-column:1 / -1}
.cmp-sheet-foot{flex:0 0 auto;margin-top:14px;font-size:.8125rem;line-height:1.6;color:var(--tinta-2)}
.cmp-sr,.cmp-sr-inline{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:560px){
  .cmp-panel{place-items:end center}
  .cmp-sheet{width:100%;max-height:92vh;padding:22px 18px calc(16px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;border-bottom:0;transform:translateY(40px)}
  .cmp-panel.is-open .cmp-sheet{transform:none}
  .cmp-sheet-actions .pill{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){
  .cmp-card,.cmp-scrim,.cmp-sheet,.cmp-cat,.cmp-cat::before,.cmp-switch-track,.cmp-switch-dot{transition-duration:.01ms}
  .cmp-card,.cmp-sheet{transform:none}
}
