/* ============================================================================
   KLARO — tema PEEK (self-host, sem CSS embutido: usamos klaro-no-css.js)
   ----------------------------------------------------------------------------
   Direção de arte da casa: --preto #101017 · --branco #F2F2F2 · --roxo #6F7BD4,
   Satoshi. NÃO pode parecer plugin genérico. Valores hex LITERAIS (não var()):
   o banner pinta antes de o base.css/tokens carregarem em algumas páginas.
   ⚠️ IGUALDADE VISUAL (exigência ANPD): "Aceitar" (.cm-btn-success) e "Rejeitar"
   (.cm-btn-danger/.cn-decline) têm o MESMO peso — mesmo tamanho, padding, fonte
   e destaque. "Configurar" é o 3º caminho (link), fora do par aceite/rejeição.
   ============================================================================ */

.klaro,
.klaro * {
  box-sizing: border-box;
  font-family: 'Satoshi', -apple-system, system-ui, sans-serif;
}
.klaro button { cursor: pointer; }

/* Anti-flash: o Klaro só remove [hidden] após o setup; o overlay nasce escondido
   (a lei de Overlays do projeto — nada visível antes do JS). */
.klaro .cookie-modal[hidden],
.klaro .cookie-notice[hidden] { display: none !important; }
/* Usuário que já decidiu: o Klaro (build sem CSS) esconde a notice pela CLASSE
   .cookie-notice-hidden — regra que não vinha no tema. Sem ela o banner reaparece
   a cada reload p/ quem já consentiu; e o reveal poderia "forçar" uma notice que o
   Klaro decidiu não mostrar. (Equivale ao .cookie-notice-hidden do CSS default.) */
.klaro .cookie-notice.cookie-notice-hidden { display: none !important; }

/* Klaro foca o container p/ leitor de tela — sem anel de foco no CARD (os
   botões internos mantêm o próprio :focus-visible). */
.klaro .cookie-notice:focus,
.klaro .cookie-modal .cm-modal:focus,
.klaro .cm-list-label:focus { outline: none; }

/* ─────────────────────────── 1º NÍVEL — BANNER (notice) ─────────────────────
   Referências: cookies-frame-reference.png (visual) + site-frame-cookies.png
   (posição = canto INFERIOR ESQUERDO). Tudo alinhado à esquerda. TODO este
   bloco é escopado em .cookie-notice → o 2º nível (modal) fica INTOCADO.
   🎚 KNOBs de posição/tamanho: --cn-left / --cn-bottom / --cn-max-width;
   da bordinha diagonal: --cn-borda-alpha (intensidade). */
.klaro .cookie-notice {
  --cn-left: clamp(20px, 4vw, 64px);
  --cn-bottom: clamp(20px, 4vh, 44px);
  --cn-max-width: 508px;
  --cn-borda-alpha: 0.5;
  --cn-btn-gap: 16px;            /* 🎚 gap entre REJEITAR e ACEITAR (calibragem) */
  --cn-reveal-rise: 24px;        /* 🎚 distância do swipe-up de entrada */
  --cn-reveal-dur: 0.6s;         /* 🎚 duração da transição de entrada */
  --cn-glass-blur: 16px;         /* 🎚 vidro fosco: raio do backdrop blur (12=fino · 20=leitoso) */
  --cn-glass-tint: 0.62;         /* 🎚 vidro fosco: alpha do tint escuro (piso de contraste — não descer de ~0.55) */
  position: fixed;
  left: var(--cn-left);
  bottom: var(--cn-bottom);
  /* Nasce ESCONDIDO — swipe-up ao revelar (a lei de Overlays: o JS só revela).
     klaro-config.js adiciona .cn-armed após 'loaderDone' (home) ou de imediato
     (páginas sem loader). O translateY fica por cima do fixed (left/bottom). */
  opacity: 0;
  transform: translateY(var(--cn-reveal-rise));
  transition: opacity var(--cn-reveal-dur) ease,
              transform var(--cn-reveal-dur) cubic-bezier(0.22, 1, 0.36, 1);
  width: min(calc(100% - 40px), var(--cn-max-width));
  z-index: 1000;                 /* acima do site; abaixo do grão só se aplicável */
  background: #101017;
  color: #F2F2F2;
  border: 0;                     /* sem borda cheia — só a "bordinha" diagonal (::after) */
  border-radius: 20px;
  padding: clamp(26px, 2.6vw, 34px);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6), 0 8px 24px -12px rgba(0, 0, 0, 0.4);
}
/* Revelado pelo JS (nasce escondido acima). Swipe-up via a transição da .cookie-notice. */
.klaro .cookie-notice.cn-armed { opacity: 1; transform: translateY(0); }

/* VIDRO FOSCO — SÓ onde há suporte real (@supports); fora dele o sólido #101017 acima
   permanece, pixel-idêntico ao banner validado (browser antigo nunca vê transparência).
   TINT escuro POR BAIXO do blur = piso de contraste independente do que passa atrás
   (vídeo do opener no mobile; pior caso frame BRANCO ≈ 4.8:1 no texto #F2F2F2 — AA).
   Prefixo -webkit- SEMPRE (iOS < 18 só entende prefixado). ⚠️ LEI DO PROJETO: o filter
   NUNCA anima — a transition da .cookie-notice segue só opacity/transform (swipe-up);
   o blur é valor ESTÁTICO. Validação decisiva: iPhone real sobre o vídeo em movimento
   (headless Blink não reproduz WebKit-iOS; plano B especificado no klaro-config.js). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .klaro .cookie-notice {
    background: rgba(16, 16, 23, var(--cn-glass-tint));
    -webkit-backdrop-filter: blur(var(--cn-glass-blur));
    backdrop-filter: blur(var(--cn-glass-blur));
  }

  /* PLANO C (Lote 1 da passada mobile — decisão MEDIDA): blur ao vivo é DESKTOP-ONLY.
     No touch, o backdrop-filter re-amostra o fundo A CADA FRAME do gesto e foi o
     RESÍDUO FINAL de fluidez da Sobre (A/B do Wanderson no iPhone real: banner em
     vidro na tela = trava; sem banner = quase-régua). Aqui o banner fica SÓ com o
     tint (translúcido-escuro, profundidade preservada; legibilidade garantida pelo
     piso 0.62 do --cn-glass-tint, AA por design). Critério de INPUT, não de largura
     — mesmo da Frente 1 (hover:none/pointer:coarse): iPad >640px também é touch e
     pagaria o blur num @media 640 (o 640 segue sendo o padrão do arquivo p/ LAYOUT).
     --cn-glass-blur passa a reger só o desktop. NÃO reintroduzir blur em elemento
     fixo visível durante scroll no touch. */
  @media (hover: none) and (pointer: coarse) {
    .klaro .cookie-notice {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}

/* BORDINHA diagonal — borda de 1px visível só no canto SUPERIOR-ESQUERDO e no
   INFERIOR-DIREITO, desvanecendo até sumir no meio. Técnica: anel via
   gradient-border (mask XOR punando o miolo) + gradiente 135° opaco nas pontas
   (0% = topo-esq · 100% = base-dir) e transparente na faixa central. iOS-safe. */
.klaro .cookie-notice::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
      rgba(111, 123, 212, var(--cn-borda-alpha)) 0%,   /* roxo --roxo (#6F7BD4) LITERAL */
      rgba(111, 123, 212, 0) 38%,                      /* alpha 0 no meio: mesmo matiz, sem tinta */
      rgba(111, 123, 212, 0) 62%,
      rgba(111, 123, 212, var(--cn-borda-alpha)) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.klaro .cn-body {
  position: relative;
  margin: 0;
  padding: 0;
}
/* HEADLINE injetada no início da descrição (htmlTexts) — "Nós respeitamos sua
   privacidade." com o ponto roxo (.dot). Light/grande, alinhada à esquerda. */
.klaro .cookie-notice .cn-headline {
  display: block;
  font-weight: 300;
  font-size: clamp(1.35rem, 1.7vw, 1.6rem);
  line-height: 1.15;
  color: #F2F2F2;
  margin-bottom: 14px;
}
.klaro .cookie-notice .cn-headline .dot { color: #6F7BD4; }
.klaro .cn-body > p {
  margin: 0 0 clamp(18px, 2vw, 24px);
  font-weight: 300;
  font-size: clamp(0.9rem, 1.05vw, 0.98rem);
  line-height: 1.55;
  color: rgba(242, 242, 242, 0.82);
}
.klaro .cn-body a,
.klaro .cm-modal a { color: #6F7BD4; text-decoration: underline; text-underline-offset: 2px; }
.klaro .cn-ok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;                     /* mínimo Configurar↔bloco de botões (o respiro real é o margin-right:auto abaixo) */
  margin-top: 4px;
}
/* No 1º nível os 3 (Configurar · Rejeitar · Aceitar) ficam em UMA linha (mock) */
.klaro .cookie-notice .cn-ok { flex-wrap: nowrap; }
/* Os botões Rejeitar/Aceitar são filhos da .cn-buttons (não da .cn-ok). O knob
   --cn-btn-gap rege o espaço ENTRE eles (herdado da .cookie-notice). */
.klaro .cn-buttons { display: flex; gap: var(--cn-btn-gap); }
/* CONFIGURAR (learn-more) = 3ª via: palavra em CAIXA ALTA, sem botão/sublinhado.
   Fica à esquerda; os 2 botões (Rejeitar/Aceitar) vão à direita. */
.klaro .cn-learn-more { margin-right: auto; }
.klaro .cookie-notice .cn-learn-more .cm-link,
.klaro .cookie-notice .cm-link {
  background: none;
  border: 0;
  padding: 6px 2px;
  color: #F2F2F2;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.klaro .cookie-notice .cm-link:hover { color: rgba(242, 242, 242, 0.7); }

/* ─────────── BOTÕES — todos com o MESMO peso (tamanho/padding/fonte) ────────
   Base = superfície NEUTRA sólida. O ÚNICO primário roxo é o "Aceitar" (notice
   .cm-btn-success + modal .cm-btn-accept-all). "Rejeitar todos" tem exatamente
   o mesmo tamanho/peso — só a cor de fundo muda (IGUALDADE VISUAL da ANPD:
   ambos são botões sólidos de igual proeminência, nenhum é link discreto). */
.klaro .cm-btn {
  appearance: none;
  border: 1px solid rgba(242, 242, 242, 0.35);
  border-radius: 999px;
  padding: 13px 26px;
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  line-height: 1;
  background: rgba(242, 242, 242, 0.1);
  color: #F2F2F2;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.klaro .cm-btn:hover { transform: translateY(-1px); background: rgba(242, 242, 242, 0.16); }
.klaro .cm-btn:focus-visible { outline: 2px solid #6F7BD4; outline-offset: 3px; }

/* MODAL (2º nível): "Aceitar todos" ESPELHA o banner — sólido BRANCO / texto preto
   (mesma receita do .cookie-notice .cm-btn-success). Só o Aceitar carrega .cm-btn-accept-all
   → Salvar/Rejeitar (que também têm .cm-btn-success/.cm-btn-danger) seguem contornados.
   ⚠️ NÃO tocar .cm-btn-success: é COMPARTILHADO com o banner e com o Salvar. */
.klaro .cm-btn.cm-btn-accept-all { background: #F2F2F2; color: #101017; border-color: #F2F2F2; }
.klaro .cm-btn.cm-btn-accept-all:hover { background: #ffffff; }
/* CAIXA ALTA nos 3 botões do rodapé do modal (só apresentação; o letter-spacing já é
   0.06em na base .cm-btn = igual ao banner). */
.klaro .cm-modal .cm-footer-buttons .cm-btn { text-transform: uppercase; }

/* NOTICE (1º nível) — hierarquia da referência: Aceitar SÓLIDO branco (destaque)
   × Rejeitar mesmo tamanho só STROKE. Rótulos em CAIXA ALTA, peso Regular,
   retângulo arredondado (o mock). Escopado — não altera o modal. */
.klaro .cookie-notice .cm-btn {
  border-radius: 14px;
  padding: 13px 18px;
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* ACEITAR TODOS — sólido BRANCO, texto preto (o destaque) */
.klaro .cookie-notice .cm-btn-success {
  background: #F2F2F2;
  color: #101017;
  border-color: #F2F2F2;
}
.klaro .cookie-notice .cm-btn-success:hover { background: #ffffff; }
/* REJEITAR TODOS — MESMO tamanho, só STROKE (sem fundo). Pé de igualdade legal. */
.klaro .cookie-notice .cm-btn-danger,
.klaro .cookie-notice .cn-decline {
  background: transparent;
  color: #F2F2F2;
  border-color: rgba(242, 242, 242, 0.55);
}
.klaro .cookie-notice .cm-btn-danger:hover,
.klaro .cookie-notice .cn-decline:hover { background: rgba(242, 242, 242, 0.08); }

/* ─────────────────────────── 2º NÍVEL — MODAL ───────────────────────────── */
.klaro .cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.klaro .cookie-modal .cm-bg {
  position: fixed;
  inset: 0;
  background: rgba(16, 16, 23, 0.78);
}
.klaro .cookie-modal .cm-modal {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #101017;
  color: #F2F2F2;
  border: 1px solid rgba(242, 242, 242, 0.1);
  border-radius: 20px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.6);
}
.klaro .cm-modal .cm-header {
  padding: clamp(24px, 3.5vw, 36px) clamp(24px, 4vw, 44px) 12px;
  border: 0;
}
.klaro .cm-modal .cm-header h1,
.klaro .cm-modal .cm-header .title {
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  margin: 0;
}
.klaro .cm-modal .cm-header .cm-title-description,
.klaro .cm-modal .cm-header p {
  margin: 14px 0 0;
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(242, 242, 242, 0.72);
}
/* Botão fechar do modal — Klaro usa <button class="hide"> com um SVG de X */
.klaro .cookie-modal .cm-header button.hide {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: rgba(242, 242, 242, 0.6);
  z-index: 2;
}
.klaro .cookie-modal .cm-header button.hide:hover { color: #F2F2F2; }
.klaro .cookie-modal .cm-header button.hide svg line { stroke: currentColor; }

.klaro .cm-modal .cm-body { padding: 8px clamp(24px, 4vw, 44px); }
.klaro .cm-modal .cm-body ul { list-style: none; margin: 0; padding: 0; }

/* Categorias (purposes) — cada uma tem 1 serviço; o detalhamento por serviço
   (.cm-services "↓ 1 serviço") é redundante com a descrição e fica OCULTO. */
.klaro .cm-purposes { padding: 0; }
.klaro .cm-purpose {
  padding: 20px 0;
  border-top: 1px solid rgba(242, 242, 242, 0.08);
}
.klaro .cm-purpose:first-child { border-top: 0; }
.klaro .cm-services { display: none; }

/* Label = linha flex: título+descrição à esquerda, toggle à direita */
.klaro .cm-purpose .cm-list-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.klaro .cm-purpose .cm-list-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: #F2F2F2;
}
.klaro .cm-purpose .cm-required { margin-right: auto; }
.klaro .cm-required { color: rgba(242, 242, 242, 0.45); font-size: 0.72rem; font-style: normal; }
.klaro .cm-purpose .cm-list-description {
  margin: 6px 0 0;
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(242, 242, 242, 0.62);
  max-width: 46ch;
}

/* ── TOGGLE (switch) — usamos klaro-no-css.js: o switch é 100% estilizado aqui.
   Esconde o checkbox nativo (.cm-list-input) e pinta o .cm-switch > .slider. ── */
.klaro .cm-purpose .cm-list-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.klaro .cm-switch {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
  width: 46px;
  height: 26px;
}
.klaro .cm-switch .slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(242, 242, 242, 0.2);
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.klaro .cm-switch .slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #F2F2F2;
  transition: transform 0.2s ease;
}
/* ESTADO ON = pelo CHECKBOX :checked (NÃO pela classe .active do Klaro, que fica
   sempre presente e não reflete o consentimento). Input é irmão anterior do label. */
.klaro .cm-list-input:checked + .cm-list-label .cm-switch .slider { background: #6F7BD4; }
.klaro .cm-list-input:checked + .cm-list-label .cm-switch .slider::before { transform: translateX(20px); }
/* Necessários (required): fica ON e travado em roxo esmaecido, sem cursor de ação */
.klaro .cm-list-input.required + .cm-list-label .cm-switch .slider {
  background: rgba(111, 123, 212, 0.5);
  cursor: not-allowed;
}

/* Rodapé do modal — botões */
.klaro .cm-modal .cm-footer {
  padding: 18px clamp(24px, 4vw, 44px) clamp(24px, 3.5vw, 36px);
  border-top: 1px solid rgba(242, 242, 242, 0.08);
}
.klaro .cm-modal .cm-footer-buttons {
  display: flex;
  flex-wrap: nowrap;              /* desktop em 1 linha (mobile vira column abaixo → nowrap não afeta) */
  gap: 12px;
  justify-content: flex-end;
}
/* DESKTOP: os 3 botões do rodapé do modal adotam a receita EXATA dos botões do
   banner (.cookie-notice .cm-btn) — mesmo raio/padding/peso/tamanho — pra falarem a
   mesma língua visual e caberem em 1 linha (uppercase alargou o texto). Escopado em
   ≥641px: o mobile mantém a base (.cm-btn width:100% / padding 15x24), sem regressão. */
@media (min-width: 641px) {
  .klaro .cm-modal .cm-footer-buttons .cm-btn {
    border-radius: 14px;
    padding: 13px 18px;
    font-weight: 400;
    font-size: 0.76rem;
    white-space: nowrap;
  }
}
.klaro .cm-powered-by,
.klaro .cm-powered-by a { display: none; }  /* disablePoweredBy também na config */

/* ─────────────────────────── MOBILE ─────────────────────────────────────── */
@media (max-width: 640px) {
  .klaro .cookie-notice { bottom: 12px; padding: 22px; border-radius: 16px; }
  .klaro .cn-ok { flex-direction: column; align-items: stretch; }
  .klaro .cn-buttons { flex-direction: column; }  /* botões empilham; --cn-btn-gap = espaço vertical */
  .klaro .cn-learn-more { margin: 0 0 6px; text-align: center; }
  .klaro .cm-btn { width: 100%; padding: 15px 24px; }
  .klaro .cm-modal .cm-footer-buttons { flex-direction: column; }
}

/* Reduced-motion: sem transições de hover */
@media (prefers-reduced-motion: reduce) {
  .klaro .cm-btn { transition: none; }
  .klaro .cm-btn:hover { transform: none; }
  /* Reveal instantâneo (sem swipe-up), ainda gated no loaderDone. */
  .klaro .cookie-notice { transition: none; }
}