/* Banner de consentimento (assets/consentimento.js).
   Onda 9 (21/10/2026): sem escolha, barra baixa de 2 linhas; "Detalhes" abre o texto completo.
   Visual próprio (consent-btn), igual nas páginas que carregam o aviso (home, /comece/barbearia/, /comece/salao/ e /modelos/; o índice /comece/ e as páginas legais não o carregam, de propósito); Aceitar e Recusar com o mesmo peso. */
.consent { position: fixed; inset: auto 12px 12px; z-index: 50; max-width: 768px; max-height: calc(100dvh - 24px); overflow-y: auto; margin-inline: auto; background: var(--surface, #F5F1E8); color: var(--ink, #123E40); border: 1px solid var(--line, #ccd4d0); border-radius: 16px; padding: 16px 24px; box-shadow: 0 20px 50px -20px #0007; }
.consent p { font-size: 16px; margin: 0 0 12px; color: var(--muted, #455b5a); }
.consent .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.consent .opts { margin: 10px 0 12px; font-size: 14px; display: grid; gap: 8px; }
.consent .opts[hidden] { display: none; }
.consent .opts label { display: flex; gap: 12px; align-items: flex-start; }
.consent-btn { min-height: 44px; padding: 10px 22px; font: inherit; font-size: 15px; font-weight: 700; border: 1px solid var(--line, #ccd4d0); border-radius: 999px; background: var(--surface, #F5F1E8); color: var(--ink, #123E40); cursor: pointer; }
.consent-btn:hover { border-color: var(--ink, #123E40); }
.consent-link { min-height: 44px; padding: 10px 6px; font: inherit; font-size: 15px; font-weight: 600; background: none; border: 0; color: var(--ink, #123E40); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.consent a { color: var(--ink, #123E40); }
.consent :is(.consent-btn, .consent-link, a):focus-visible { outline: 3px solid var(--accent, #123E40); outline-offset: 2px; }

/* Compacto (26/10/2026): uma barra baixa com a frase à esquerda e dois botões do mesmo tamanho (Permitir cheio, Agora não de contorno);
   "Saiba mais" abre as preferências. No celular, uma faixa de cerca de 76 px em vez de um cartão de 118. */
.consent.is-compact { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 14px; }
.consent.is-compact p { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--ink, #123E40); }
.consent.is-compact p .consent-link { display: inline; min-height: 0; padding: 0; font-size: 13.5px; }
.consent.is-compact .row { flex: none; flex-wrap: nowrap; gap: 5px; }
.consent.is-compact .consent-btn { min-height: 44px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
.consent-btn.is-primary { background: var(--ink, #123E40); border-color: var(--ink, #123E40); color: #fff; }
@media (max-width: 359px) { .consent.is-compact { flex-wrap: wrap; } }

@media (max-width: 720px) {
  .consent { inset: auto 8px 8px; padding: 14px 16px; }
  .consent.is-compact { padding: 10px 12px; gap: 6px; }
  .consent.is-compact p { flex: 1 1 100%; }
  .consent.is-compact .row { flex: 1 1 100%; flex-wrap: nowrap; }
  .consent.is-compact .consent-btn { flex: 1; }
}
@media (prefers-reduced-motion: no-preference) { .consent { animation: subir .3s ease-out; } @keyframes subir { from { transform: translateY(16px); opacity: 0; } } }

/* F6b (28/10/2026): barra fixa de borda a borda, sem cobrir o cartão do herói no celular (cerca de 85 px a 390).
   Permitir e Agora não com o mesmo peso (os dois de contorno). Só visual: texto e lógica do consentimento não mudam. */
.consent.is-compact { inset: auto 0 0 0; max-width: none; max-height: none; overflow: visible; margin: 0; border: 0; border-top: 1px solid var(--line, #ccd4d0); border-radius: 0; box-shadow: 0 -10px 24px -18px #0008; padding: 10px 16px max(12px, env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: stretch; }
.consent.is-compact p { grid-column: 1 / -1; font-size: 14px; line-height: 1.35; }
.consent.is-compact p .consent-link { font-size: 14px; padding-block: 14px; margin-block: -14px; }
.consent.is-compact .row { display: contents; }
.consent.is-compact .consent-btn, .consent.is-compact .consent-btn.is-primary { flex: none; min-height: 44px; padding: 0 12px; justify-content: center; background: var(--surface, #fff); color: var(--accent, #123E40); border: 1.5px solid var(--accent, #123E40); font-size: 15px; }
@media (min-width: 720px) {
  .consent.is-compact { grid-template-columns: 1fr auto auto; align-items: center; padding-inline: max(24px, calc((100vw - 1120px) / 2)); }
  .consent.is-compact p { grid-column: auto; font-size: 15px; }
  .consent.is-compact p .consent-link { font-size: 15px; }
  .consent.is-compact .consent-btn, .consent.is-compact .consent-btn.is-primary { min-width: 130px; }
}
@media (max-width: 359px) { .consent.is-compact { grid-template-columns: 1fr 1fr; } }

/* Preferências (31/10/2026): o painel não passa da tela; só a lista rola (.body) e os botões ficam fixos no rodapé.
   Sombras no topo e no fim da lista mostram que há mais para rolar. Rótulo inteiro clicável, 44 px por linha, caixa de 22 px. */
.consent.is-prefs { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100dvh - 16px); padding-bottom: 0; }
.consent.is-prefs .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin-inline: -4px; padding-inline: 4px;
  background: linear-gradient(var(--surface, #F5F1E8) 30%, #fff0), linear-gradient(#fff0, var(--surface, #F5F1E8) 70%) 0 100%, radial-gradient(farthest-side at 50% 0, #0003, #0000), radial-gradient(farthest-side at 50% 100%, #0003, #0000) 0 100%;
  background-repeat: no-repeat; background-size: 100% 28px, 100% 28px, 100% 10px, 100% 10px; background-attachment: local, local, scroll, scroll; }
.consent.is-prefs .opts { gap: 0; margin-bottom: 4px; }
.consent.is-prefs .opts label { min-height: 44px; align-items: flex-start; padding-block: 8px; cursor: pointer; }
.consent.is-prefs .opts input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink, #123E40); }
.consent.is-prefs .row { flex: none; flex-wrap: nowrap; gap: 6px; padding: 10px 0 max(12px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line, #ccd4d0); background: var(--surface, #F5F1E8); }
.consent.is-prefs .consent-btn { padding-inline: 18px; }
.consent.is-prefs .consent-link { padding-inline: 8px; white-space: nowrap; }
@media (max-width: 400px) { .consent.is-prefs .consent-btn { padding-inline: 14px; } .consent.is-prefs .consent-link { padding-inline: 4px; font-size: 14px; } }
.consent .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.consent.is-prefs:focus { outline: none; }
/* Rodada 3 (31/10/2026): sombras mais finas e respiro no fim da lista (o snap de rolagem foi testado e descartado: abria o painel já rolado);
   em telas baixas, menos respiro para a lista aparecer mais cedo. Só layout. */
.consent.is-prefs .body { background-size: 100% 14px, 100% 14px, 100% 8px, 100% 8px; }
.consent.is-prefs .opts { padding-bottom: 8px; }
@media (max-height: 700px) {
  .consent.is-prefs { padding: 10px 14px 0; }
  .consent.is-prefs p { font-size: 15px; line-height: 1.4; margin-bottom: 4px; }
  .consent.is-prefs .opts { margin: 2px 0 0; padding-bottom: 6px; }
  .consent.is-prefs .opts label { padding-block: 5px; }
  .consent.is-prefs .row { padding: 6px 0 max(8px, env(safe-area-inset-bottom, 0px)); }
}

/* Quarta permissão (31/10/2026): linha "Quem te indicou fica guardado por 30 dias?" logo acima do aviso (usa --consent-h, a altura do aviso).
   Duas ações de 44 px lado a lado; some quando a pessoa escolhe. */
.consent-ref { position: fixed; left: 0; right: 0; bottom: var(--consent-banner-h, 0px); z-index: 49; display: grid; grid-template-columns: 1fr; gap: 3px; padding: 5px 16px; background: var(--surface, #F5F1E8); border-top: 1px solid var(--line, #ccd4d0); box-shadow: 0 -10px 24px -18px #0008; }
.consent-ref[hidden] { display: none; }
.consent-ref .consent-btn { background: var(--surface, #fff); color: var(--accent, #123E40); border: 1.5px solid var(--accent, #123E40); }   /* os dois botões com o mesmo peso */
.consent-ref p { margin: 0; font-size: 14px; line-height: 1.25; color: var(--ink, #123E40); font-weight: 400; }   /* mesma cor e peso do texto do aviso */
.consent-ref-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.consent-ref .consent-btn { min-height: 44px; padding: 0 12px; justify-content: center; font-size: 14px; white-space: nowrap; }
@media (min-width: 720px) { .consent-ref { grid-template-columns: 1fr auto; align-items: center; padding-inline: max(24px, calc((100vw - 1120px) / 2)); } .consent-ref-row { grid-template-columns: auto auto; } .consent-ref .consent-btn { min-width: 150px; } }

/* Quarta permissão (31/10/2026): linhas do painel mais compactas. Medido: a 360x740, 390x844, 375x812, 390x700 e 1280x800 a lista cabe sem rolar; a 360x568 ela ROLA por dentro (566 px de conteúdo em 479 px), com as sombras de topo e fim e os botões fixos no rodapé.
   Linhas com respiro menor (continuam com 44 px de altura mínima e o rótulo inteiro clicável). */
.consent.is-prefs .opts label { padding-block: 2px; }
.consent.is-prefs .opts { margin-block: 4px 0; }
.consent.is-prefs .body > p { margin-bottom: 4px; }
.consent.is-prefs .row { padding-top: 6px; }

/* Rodada final (31/10/2026): espaço no fim da página igual à altura das barras (o último botão sobe acima delas, com folga);
   painel de Preferências com o fundo escurecido; linhas do painel com respiro uniforme no computador. */
html { scroll-padding-bottom: calc(var(--consent-h, 0px) + 8px); }
body:not(.has-sticky)::after { content: ""; display: block; height: var(--consent-h, 0px); }
.consent.is-prefs { box-shadow: 0 0 0 100vmax rgb(23 25 26 / .42), 0 20px 50px -20px #0007; }
@media (min-width: 720px) {
  .consent.is-prefs .opts { gap: 0; }
  .consent.is-prefs .opts label { padding-block: 10px; }
}

/* Região de status do aviso (leitor de tela): fora da tela, não ocupa espaço. */
.consent-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.consent-note { margin: 0; padding: 0 0 2px 34px; font-size: 13px; line-height: 1.3; color: var(--muted, #455b5a); }   /* 34 px = caixa de 22 px + 12 px de espaço: alinha com o texto da 4ª linha */
/* Foco e rolagem por âncora: o botão não pode ficar sob a faixa (aviso + linha "Lembrar", soma em --consent-h). */
.btn, [data-access], .mobile-cta a { scroll-margin-bottom: calc(var(--consent-h, 0px) + 8px); }

/* Rodada de desenho do aviso (31/10/2026, só layout; o texto não muda):
   a) corpo da lista 14 px com entrelinha de 20 px e a introdução mais escura; b) margem lateral do painel de 25 para 16 px e caixa a 28 px do texto;
   d) a 4ª permissão (que não é anúncio) separada das três por um divisor e 12 px; e) a frase do Aceitar com a entrelinha e a cor do corpo;
   g) linha "Lembrar" mais baixa; f) a lista que rola ganha foco por teclado (tabindex e rótulo, postos pelo JS). */
@media (max-width: 720px) {
  .consent.is-prefs { padding-inline: 8px; }
  .consent.is-prefs .body { margin-inline: -4px 0; padding-inline: 4px 0; }   /* 4 px à esquerda: o anel de foco de 3 px da 1ª caixa não é cortado (N3); o texto fica no mesmo lugar */
  .consent.is-prefs .body > p { font-size: 14.5px; line-height: 1.4; color: #3d4748; }
  .consent.is-prefs .opts { font-size: 14px; }
  .consent.is-prefs .opts label { gap: 6px; }
  .consent.is-prefs .opts label > span { line-height: 20px; letter-spacing: -.012em; }
  .consent.is-prefs .opts label:has([data-referral]) { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line, #ccd4d0); }
  .consent.is-prefs .consent-note { margin-top: 12px; padding-left: 28px; font-size: 14px; line-height: 20px; color: var(--ink, #123E40); }
  .consent-ref { padding-block: 9px 4px; gap: 2px; }   /* 9 px entre a borda de cima e o texto (antes ~6) */
  .consent-ref p { line-height: 1.2; }
}
.consent.is-prefs .body:focus-visible { outline: 3px solid var(--accent, #123E40); outline-offset: 2px; border-radius: 8px; }   /* fora da lista (cabe nos 8 px do painel): o anel não cobre o texto */
.consent.is-prefs .body[tabindex] { padding-right: 6px; scrollbar-width: thin; }   /* lista que rola: espaço para a barra de rolagem não cobrir o fim das linhas */
/* "Política de Privacidade" na introdução das Preferências não quebra no meio do nome (360 e 375 px). */
.consent.is-prefs .body > p a { white-space: nowrap; }
/* Frase do Aceitar: mesma cor e entrelinha do corpo em qualquer largura (antes o ajuste valia só até 720 px). */
.consent.is-prefs .consent-note { color: var(--ink, #123E40); font-size: 14px; line-height: 20px; margin-top: 12px; }