/* ═══════════════════════════════════════════════════════════════════════════
Consentimento de cookies (LGPD)
Portado do projeto irmão avanter (public/privacy-consent.css) e recolorido
com os tokens do site — `--ref-navy-*`, `--ref-gold`, `--ref-cream` — que
moram no topo do site-refinado.css.
─ POR QUE UM ARQUIVO SEPARADO ────────────────────────────────────────────
Estas regras poderiam entrar no fim do site-refinado.css, mas lá o fim do
arquivo é território disputado: quem escreve por último vence por posição, e
já houve regra de capa derrubando página interna por causa disso. Um arquivo
próprio, com prefixo próprio (`priv-`), não disputa com nada.
Também é o último , e o `site-setorescapa.css` (linha ~89) traz
* um `section { display: table; position: relative }` — seletor de elemento
* puro, sem classe nenhuma, que alcança TODA do site.
*
* O estrago era no modal: `display: table` faz a caixa encolher até o conteúdo
* e IGNORAR o par `left: 0; right: 0`. Em vez de cobrir a tela, o modal virava
* um painel de 700px grudado no canto superior esquerdo, com o fundo escuro
* encolhido junto — a página atrás ficava clara e o `margin: … auto` da caixa
* não tinha sobra para centralizar.
*
* `position` já estava resolvido (a classe vale 0,1,0 e vence o elemento, que
* vale 0,0,1); faltava `display`, que eu nunca havia declarado e por isso caía
* na regra de varredura. A lição é a de sempre nesta base: nada de ,
* ou sem dizer explicitamente como devem se comportar.
*/
.priv-faixa,
.priv-modal {
display: block;
}
/* O `hidden` do HTML precisa vencer o `display` que as regras acima e abaixo
dão — inclusive o `display: table` que a varredura do site injeta. */
.priv-faixa[hidden],
.priv-modal[hidden],
.priv-atalho[hidden],
.priv-opcao__corpo[hidden],
.priv-opcao__detalhes[hidden] {
display: none !important;
}
/* Com o modal aberto, a página de trás não rola junto. */
.priv-modal-aberto,
.priv-modal-aberto body {
overflow: hidden;
}
/* ── A faixa ──────────────────────────────────────────────────────────────── */
.priv-faixa {
position: fixed;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
width: min(940px, calc(100vw - 28px));
z-index: 2147483000;
background: var(--ref-cream, #faf8f4);
color: var(--ref-ink, #1c2530);
border: 1px solid var(--ref-line, #e4e8ee);
border-radius: 18px;
box-shadow: 0 20px 50px rgba(6, 15, 29, .22);
}
.priv-faixa__interno {
display: flex;
gap: 20px;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
}
.priv-faixa__texto {
flex: 1 1 auto;
min-width: 0;
}
.priv-faixa__selo,
.priv-modal__selo {
margin: 0 0 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ref-gold, #c9a24b);
}
.priv-faixa__titulo {
margin: 0 0 5px;
font-size: 16px;
font-weight: 700;
color: var(--ref-navy-800, #0d2339);
}
.priv-faixa__copia {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: var(--ref-muted, #5d6b7a);
}
.priv-faixa__copia a,
.priv-modal__copia a {
color: var(--ref-navy-700, #153457);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.priv-faixa__acoes {
display: grid;
flex: 0 0 340px;
width: 340px;
min-width: 340px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
column-gap: 8px;
row-gap: 7px;
}
.priv-faixa__acoes .priv-botao {
width: 100%;
min-height: 40px;
white-space: nowrap;
font-size: 12px;
}
.priv-faixa__link {
grid-column: 1 / -1;
justify-self: center;
padding: 0;
background: transparent;
color: var(--ref-muted, #5d6b7a);
border: 0;
font-size: 11px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
/* ── Botões ───────────────────────────────────────────────────────────────── */
.priv-botao,
.priv-botao-linha,
.priv-opcao__detalhes-abre {
appearance: none;
-webkit-appearance: none;
border: 0;
cursor: pointer;
font-family: inherit;
font-weight: 600;
line-height: 1.2;
transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.priv-botao:hover,
.priv-botao-linha:hover {
transform: translateY(-1px);
}
.priv-botao {
border-radius: 999px;
padding: 10px 14px;
font-size: 12px;
}
.priv-botao--primario {
background: var(--ref-gold, #c9a24b);
color: var(--ref-navy-900, #0a1a30);
}
.priv-botao--primario:hover {
background: var(--ref-gold-strong, #dfb86a);
}
.priv-botao--secundario {
background: var(--ref-white, #fff);
color: var(--ref-navy-800, #0d2339);
border: 1px solid var(--ref-line, #e4e8ee);
}
.priv-botao--secundario:hover {
border-color: var(--ref-navy-600, #1d4b79);
}
.priv-botao--fantasma {
background: transparent;
color: var(--ref-muted, #5d6b7a);
border: 1px solid var(--ref-line, #e4e8ee);
}
/* ── O modal de preferências ──────────────────────────────────────────────── */
.priv-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2147483100;
}
.priv-modal__fundo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(6, 15, 29, .55);
}
.priv-modal__caixa {
position: relative;
margin: min(7vh, 44px) auto;
width: min(700px, calc(100vw - 24px));
max-height: calc(100vh - 36px);
overflow: auto;
background: var(--ref-white, #fff);
color: var(--ref-ink, #1c2530);
border: 1px solid var(--ref-line, #e4e8ee);
border-radius: 22px;
box-shadow: 0 24px 60px rgba(6, 15, 29, .3);
}
.priv-modal__caixa::-webkit-scrollbar { width: 4px; }
.priv-modal__caixa::-webkit-scrollbar-track { background: transparent; }
.priv-modal__caixa::-webkit-scrollbar-thumb {
background: var(--ref-line, #e4e8ee);
border-radius: 999px;
}
.priv-modal__topo,
.priv-modal__corpo,
.priv-modal__rodape {
padding: 22px;
}
.priv-modal__topo {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid var(--ref-line, #e4e8ee);
}
.priv-modal__titulo {
margin: 0 0 8px;
font-size: 23px;
line-height: 1.15;
color: var(--ref-navy-800, #0d2339);
}
.priv-modal__copia {
margin: 0;
max-width: 560px;
font-size: 14px;
line-height: 1.65;
color: var(--ref-muted, #5d6b7a);
}
.priv-modal__fechar {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
width: 34px;
height: 34px;
border: 1px solid var(--ref-line, #e4e8ee);
border-radius: 999px;
background: var(--ref-white, #fff);
color: var(--ref-muted, #5d6b7a);
cursor: pointer;
font-size: 20px;
line-height: 1;
}
.priv-modal__corpo {
display: grid;
gap: 12px;
}
/* ── Cada categoria ───────────────────────────────────────────────────────── */
/*
* Duas colunas — cabeçalho e chave — e o corpo ocupando as duas embaixo.
*
* O corpo NÃO fica dentro do cabeçalho porque o cabeçalho é um : um
* controle dentro de outro não é clicável nem navegável por teclado, e a chave
* liga-desliga precisa ser alcançável sem disparar a sanfona.
*
* `align-items: center` na primeira linha para o nome da categoria e a chave se
* alinharem quando o cartão está fechado, que é o estado padrão.
*/
.priv-opcao {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 16px;
row-gap: 0;
align-items: center;
padding: 14px 16px;
border: 1px solid var(--ref-line, #e4e8ee);
border-radius: 16px;
background: var(--ref-soft, #f4f6f9);
transition: border-color .2s ease, background-color .2s ease;
}
.priv-opcao:hover {
border-color: #d2d9e2;
}
/* O cabeçalho clicável ─────────────────────────────────────────────────────
Ocupa a largura inteira da coluna e recebe recuo negativo na vertical para
que a área de clique passe das letras sem afastar a chave do nome. */
.priv-opcao__cabeca {
appearance: none;
-webkit-appearance: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
width: 100%;
margin: 0;
padding: 6px 0;
background: transparent;
border: 0;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.priv-opcao__titulo {
margin: 0;
font-size: 15px;
font-weight: 700;
color: var(--ref-navy-800, #0d2339);
}
/* A seta ───────────────────────────────────────────────────────────────────
Desenhada com borda em vez de imagem ou ícone de fonte: são 4 linhas de CSS,
não depende do Font Awesome ter carregado e acompanha a cor do texto. */
.priv-opcao__seta {
margin-left: auto;
width: 8px;
height: 8px;
border-right: 2px solid var(--ref-muted, #5d6b7a);
border-bottom: 2px solid var(--ref-muted, #5d6b7a);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform .2s ease;
}
.priv-opcao__cabeca.esta-aberto .priv-opcao__seta {
transform: rotate(-135deg) translate(-2px, -2px);
}
/* O corpo que abre ─────────────────────────────────────────────────────────
Ocupa as duas colunas: alinhado só à primeira, ele ficaria estreitado pela
largura da chave, e a explicação quebraria em muito mais linhas. */
.priv-opcao__corpo {
grid-column: 1 / -1;
margin-top: 10px;
}
.priv-opcao__marca {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
padding: 4px 8px;
border-radius: 999px;
background: var(--ref-gold-soft, #f3e5c3);
color: var(--ref-navy-700, #153457);
font-size: 11px;
font-weight: 700;
}
.priv-opcao__desc {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: var(--ref-muted, #5d6b7a);
}
.priv-opcao__detalhes-abre {
margin-top: 10px;
padding: 0;
background: transparent;
color: var(--ref-navy-600, #1d4b79);
font-size: 11px;
font-weight: 500;
text-decoration: underline;
text-underline-offset: 3px;
}
.priv-opcao__detalhes-abre.esta-aberto {
color: var(--ref-ink, #1c2530);
}
.priv-opcao__detalhes {
margin-top: 12px;
padding: 12px 13px;
border-radius: 12px;
background: var(--ref-white, #fff);
border: 1px solid var(--ref-line, #e4e8ee);
}
.priv-opcao__detalhes p {
margin: 0 0 8px;
font-size: 12px;
line-height: 1.6;
color: var(--ref-ink, #1c2530);
}
.priv-opcao__detalhes ul {
margin: 0;
padding-left: 18px;
color: var(--ref-muted, #5d6b7a);
}
/*
* O marcador vai no , e não no .
*
* O `view.css` tem um `li, ol { list-style: none }` de varredura (~linha 2369),
* escrito para os menus e que alcança toda lista do site. Declarar `list-style`
* no não adianta: o reset está no filho e é ele que decide. Com o marcador
* apagado, esta lista virava três frases soltas dentro da caixa.
*/
.priv-opcao__detalhes li {
margin: 0;
list-style: disc;
font-size: 12px;
line-height: 1.55;
}
/* ── A chave liga/desliga ─────────────────────────────────────────────────── */
.priv-chave {
position: relative;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
width: 42px;
height: 24px;
margin-top: 1px;
}
.priv-chave input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.priv-chave__trilho {
width: 42px;
height: 24px;
border-radius: 999px;
background: #d5dde6;
transition: background-color .2s ease;
}
.priv-chave__bola {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--ref-white, #fff);
box-shadow: 0 3px 8px rgba(6, 15, 29, .2);
transition: transform .2s ease;
pointer-events: none;
}
.priv-chave input:checked + .priv-chave__trilho {
background: var(--ref-navy-700, #153457);
}
.priv-chave input:checked + .priv-chave__trilho + .priv-chave__bola {
transform: translateX(18px);
}
.priv-chave input:disabled + .priv-chave__trilho {
background: var(--ref-gold, #c9a24b);
opacity: 1;
}
.priv-chave input:disabled {
cursor: not-allowed;
}
/* ── Rodapé do modal ──────────────────────────────────────────────────────── */
.priv-modal__rodape {
display: flex;
justify-content: flex-end;
align-items: center;
border-top: 1px solid var(--ref-line, #e4e8ee);
}
.priv-modal__acoes {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
/* ── O atalho permanente ──────────────────────────────────────────────────── */
/*
* A LGPD exige que revogar seja tão fácil quanto consentir. Este botão é o
* "tão fácil": fica em toda página, sempre no mesmo canto, e reabre o modal.
* É o herdeiro do quadradinho "LGPD" que a camada antiga deixava no rodapé.
*/
.priv-atalho {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 2147482900;
background: var(--ref-navy-800, #0d2339);
color: var(--ref-white, #fff);
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(201, 162, 75, .35);
box-shadow: 0 14px 32px rgba(6, 15, 29, .3);
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background-color .2s ease, transform .2s ease;
}
.priv-atalho:hover {
background: var(--ref-navy-700, #153457);
transform: translateY(-1px);
}
/* ── O cartão de conteúdo bloqueado ───────────────────────────────────────── */
/*
* Ocupa o lugar exato do iframe que não foi impresso.
*
* `height: 100%` para acompanhar o quadro quando o pai já tem altura definida
* (é o caso do player da homilia e do `.embed-prep`, que reservam a proporção
* do vídeo). O `min-height` é o piso para quando o pai não define nada: sem
* ele o cartão colapsaria, e a página daria um pulo quando o vídeo entrasse.
*/
.priv-bloqueado {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 220px;
padding: 22px;
border-radius: var(--ref-radius, 14px);
background: linear-gradient(135deg, var(--ref-navy-900, #0a1a30), var(--ref-navy-700, #153457));
color: var(--ref-white, #fff);
text-align: center;
}
/*
* Dentro de um quadro de proporção fixa, o cartão precisa se posicionar como o
* iframe que ele substitui.
*
* `.embed` e `.emb_iframe` reservam a altura do vídeo com `padding-bottom` em
* porcentagem — um truque antigo em que a caixa fica com 461px de recuo e ZERO
* de conteúdo. Quem preenche isso é o `position: absolute` do iframe
* (site.css:1421). O cartão, sendo estático, empilhava-se ACIMA do recuo:
* ficava com a sua própria altura e deixava uma tarja preta do tamanho do vídeo
* logo abaixo.
*/
.embed > .priv-bloqueado,
.emb_iframe > .priv-bloqueado {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* O piso de 220px é para quando NÃO há caixa reservada; aqui há, e no
celular ela é mais baixa que isso — o cartão transbordava uns 20px por
cima do que vem depois. */
min-height: 0;
padding: 16px;
}
.priv-bloqueado__interno {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
max-width: 380px;
}
/* Filho DIRETO: o aviso, e não um que apareça dentro da nota. */
.priv-bloqueado__interno > span {
font-size: 14px;
line-height: 1.55;
color: rgba(244, 246, 249, .88);
}
.priv-botao-linha {
background: var(--ref-gold, #c9a24b);
color: var(--ref-navy-900, #0a1a30);
padding: 9px 14px;
border-radius: 999px;
font-size: 12px;
}
.priv-botao-linha:hover {
background: var(--ref-gold-strong, #dfb86a);
}
/* O que o clique alcança. Precisa estar escrito — consentimento sem saber o que
se está consentindo não é consentimento —, mas em voz baixa: quem só quer ver
a missa não deve ter de ler isto antes. */
.priv-bloqueado__nota {
font-size: 11px;
/* O site trata quase todo texto pequeno como rótulo e o deixa semibold; aqui
é nota de rodapé, e peso de rótulo a fazia competir com o aviso de cima. */
font-weight: 400;
line-height: 1.5;
color: rgba(244, 246, 249, .62);
}
.priv-bloqueado__link {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
padding: 0;
font: inherit;
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.priv-bloqueado__link:hover {
color: var(--ref-white, #fff);
}
@media (max-width: 767.98px) {
.embed > .priv-bloqueado,
.emb_iframe > .priv-bloqueado {
padding: 12px;
}
.priv-bloqueado__interno {
gap: 8px;
}
.priv-bloqueado__interno > span {
font-size: 12px;
}
}
/*
* Telas estreitas, e SÓ dentro do quadro de proporção fixa: a caixa acompanha a
* largura, e a 320px sobram 158px de altura para 209px de conteúdo. A nota sai
* — o aviso e o botão, que são o necessário para decidir, ficam. Medido: a
* 360px a nota ainda cabe por 6px, e essa margem é estreita demais para
* depender do metrificado da fonte; o corte fica em 480px.
*
* Solto na página (sem quadro reservado) o cartão cresce à vontade e a nota
* continua lá, em qualquer largura.
*/
@media (max-width: 479.98px) {
.embed > .priv-bloqueado .priv-bloqueado__nota,
.emb_iframe > .priv-bloqueado .priv-bloqueado__nota {
display: none;
}
}
/* ── Link no rodapé do site ───────────────────────────────────────────────── */
.priv-link-rodape {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
padding: 0;
font-family: inherit;
font-size: inherit;
color: inherit;
cursor: pointer;
text-align: left;
}
/* ── Celular ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
.priv-faixa {
width: calc(100vw - 16px);
bottom: 8px;
border-radius: 16px;
}
.priv-faixa__interno {
flex-direction: column;
align-items: stretch;
gap: 14px;
padding: 16px;
}
.priv-faixa__acoes {
flex: 1 1 auto;
width: 100%;
min-width: 0;
grid-template-columns: 1fr;
}
.priv-modal__topo,
.priv-modal__corpo,
.priv-modal__rodape {
padding: 18px;
}
.priv-modal__rodape {
flex-direction: column;
align-items: stretch;
}
.priv-modal__acoes {
width: 100%;
flex-direction: column;
}
.priv-opcao {
grid-template-columns: minmax(0, 1fr) auto;
}
.priv-botao,
.priv-botao-linha {
width: 100%;
justify-content: center;
}
/* Com a faixa aberta, o atalho ficaria por cima dela no celular. */
.priv-atalho {
right: 10px;
bottom: 10px;
font-size: 11px;
padding: 8px 12px;
}
}