/* Banner de consentimento. Carregado pelas quatro páginas da landing, que usam folhas
   diferentes (home.css na home, styles.css nas legais e no 404) — por isso aqui não se
   usa nenhuma custom property das outras: as cores da marca estão escritas literalmente.

   O banner é construído por analytics.js e só existe quando há uma tag configurada. As
   regras ficam num arquivo, e não em <style>, porque a CSP da landing é style-src 'self'. */

[hidden] { display: none !important; }

.consent-banner {
    position: fixed;
    z-index: 90;
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: 1040px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 18px 22px;
    background: #10332f;
    color: #f7f8f2;
    border-radius: 12px;
    box-shadow: 0 20px 50px -20px rgba(23, 61, 57, .65);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.6;
}

.consent-texto { flex: 1; min-width: 0; }
.consent-texto strong { display: block; font-size: 14px; font-weight: 650; margin-bottom: 4px; }
.consent-texto p { margin: 0; font-size: 12.5px; color: #c4d2c8; }
.consent-texto a { color: #c4ef9a; text-underline-offset: 3px; }

.consent-acoes { display: flex; gap: 10px; flex-shrink: 0; }

.consent-botao {
    /* 44px de altura é o alvo mínimo de toque. Um botão de recusar que só um mouse acerta
       é uma recusa que não existe no celular. */
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, color .18s;
}

.consent-recusar { background: transparent; border-color: rgba(255, 255, 255, .45); color: #f7f8f2; }
.consent-recusar:hover { background: rgba(255, 255, 255, .12); }

.consent-aceitar { background: #c4ef9a; color: #10332f; }
.consent-aceitar:hover { background: #d6f5b6; }

.consent-banner :focus-visible { outline: 3px solid #c4ef9a; outline-offset: 3px; }

/* Reabrir a decisão: mora no rodapé, escondido até analytics.js confirmar que há tag.
   Herda a cor do rodapé em que estiver, porque os dois rodapés da landing são diferentes. */
.consent-reabrir {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}
.consent-reabrir:hover { text-decoration: underline; }

@media (max-width: 720px) {
    .consent-banner { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; }
    .consent-acoes { justify-content: stretch; }
    .consent-botao { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .consent-botao { transition: none; }
}