/* ═══════════════════════════════════════════════════════════════════════════
   /compliance — folha de UMA página

   Carregada só por ela (ver `$extraCss` em `resources/views/site/page.php`), e
   mesmo assim TODO seletor começa em `.pg-compliance`, a classe que só esta
   página imprime no invólucro. Nada aqui alcança a home, a /altoqi ou as
   outras 25 páginas do construtor — nem se o arquivo acabar no cache de
   alguém.

   As variáveis (--ouro, --tinta, --linha, --papel…) vêm de `.hv2` em
   home_v2.css, que esta página também carrega, e já trocam sozinhas no tema
   claro. Nada de cor fixa aqui, salvo onde o comentário explicar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: entrada em cascata ──────────────────────────────────────────────
   O `data-sobe` do redesenho é para o que entra AO ROLAR. O hero já está na
   tela quando a página abre, então aqui a cascata é por animação mesmo, com
   atraso por elemento.

   ⚠️ `.hv2-anim.pg-compliance` vai SEM espaço: o `home_v2.js` põe `hv2-anim`
   no elemento `.hv2`, que é o MESMO que leva `pg-compliance` (o invólucro é
   um só: `class="hv2 lp-v2 pg-compliance"`). Com espaço o seletor pede um
   descendente e nunca casa — a cascata simplesmente não roda.

   A classe só aparece quando o visitante Pendurar o estado inicial nela é o que garante
   que, sem JS ou com "reduzir movimento", a hero nasça inteira e visível —
   em vez de ficar invisível para sempre esperando uma animação que não vem. */
.hv2-anim.pg-compliance .lph-selos,
.hv2-anim.pg-compliance .lph-h1,
.hv2-anim.pg-compliance .lph-lede,
.hv2-anim.pg-compliance .lph-acoes,
.hv2-anim.pg-compliance .lph-provas {
  opacity: 0;
  animation: cmpSobe .72s cubic-bezier(.22, 1, .36, 1) forwards;
}
.hv2-anim.pg-compliance .lph-selos { animation-delay: .05s; }
.hv2-anim.pg-compliance .lph-h1    { animation-delay: .14s; }
.hv2-anim.pg-compliance .lph-lede  { animation-delay: .26s; }
.hv2-anim.pg-compliance .lph-acoes { animation-delay: .36s; }
.hv2-anim.pg-compliance .lph-provas{ animation-delay: .46s; }

@keyframes cmpSobe {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Fio dourado que se desenha sob o sobretítulo — o mesmo gesto do resto do
   site, aqui com tempo próprio. */
.pg-compliance .lph-selos { position: relative; }

/* ── Selo do assunto ───────────────────────────────────────────────────────
   A página não dizia em lugar nenhum que era de compliance: o sobretítulo
   falava de "integridade e transparência" e o título, de "compromisso". Quem
   chegava pelo menu não via a palavra. Agora ela é o selo, e o selo é a
   primeira coisa que entra. */
.pg-compliance .lph-badge {
  position: relative;
  overflow: hidden;
}
/* Brilho que atravessa o selo uma vez, quando a página abre. */
.hv2-anim.pg-compliance .lph-badge::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: cmpBrilho 1.5s ease-out .9s;
}
@keyframes cmpBrilho { to { transform: translateX(120%); } }

/* ── Provas do hero ────────────────────────────────────────────────────────
   Viram pastilhas com marca de verificado, e não a lista de traços da LP:
   numa página institucional elas são credenciais, não argumentos de venda. */
.pg-compliance .lph-provas {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(22px, 3vw, 32px);
  padding: 0; list-style: none;
}
.pg-compliance .lph-provas li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: color-mix(in srgb, var(--ouro) 7%, transparent);
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  color: var(--tinta-media);
  transition: border-color .25s ease, transform .25s ease, background-color .25s ease;
}
.pg-compliance .lph-provas li::before {
  content: '';
  flex: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--ouro);
  /* O "✓" é uma máscara, não uma fonte: acompanha a cor do dourado nos dois
     temas sem precisar de um glifo com contraste próprio. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat,
           linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat,
                linear-gradient(#000, #000);
          mask-composite: exclude;
}
.pg-compliance .lph-provas li:hover {
  border-color: color-mix(in srgb, var(--ouro) 45%, transparent);
  background: color-mix(in srgb, var(--ouro) 12%, transparent);
  transform: translateY(-2px);
}

/* ── Itens de "Nossos documentos" ──────────────────────────────────────────
   O bloco v2 é deliberadamente sem caixa (ver o comentário dele). Mantemos
   isso e acrescentamos só o que faz o item responder ao mouse: o ícone ganha
   cor e o fio da esquerda acende, sugerindo que ali se clica. */
.pg-compliance .hv2-item {
  position: relative;
  padding-left: 18px;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), translate .3s cubic-bezier(.22, 1, .36, 1);
}
.pg-compliance .hv2-item::before {
  content: '';
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ouro), color-mix(in srgb, var(--ouro) 10%, transparent));
  transform: scaleY(0); transform-origin: top;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.pg-compliance .hv2-item:hover::before { transform: scaleY(1); }
.pg-compliance a.hv2-item:hover { translate: 3px 0; }
.pg-compliance .hv2-item-ico {
  transition: color .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1), border-color .25s ease;
}
.pg-compliance .hv2-item:hover .hv2-item-ico {
  color: var(--ouro);
  border-color: color-mix(in srgb, var(--ouro) 45%, transparent);
  transform: translateY(-2px) rotate(-6deg);
}

/* ⚠️ A entrada ao rolar e o hover disputam o MESMO `transition`.
   `home_v2.css` dá a `[data-sobe]` um `transition: opacity .7s, transform .7s`.
   Declarar `transition` aqui SUBSTITUI aquilo inteiro — e como a minha lista
   não trazia `opacity`, o cartão saltava de invisível para visível de uma vez
   (o "teleporte"), enquanto o `transform` corria em 0,34s em vez de 0,7s.

   Duas medidas, as duas necessárias:
   1. a lista repete `opacity` e `transform` com o tempo do reveal;
   2. o hover levanta o cartão com a propriedade `translate`, não com
      `transform` — são propriedades independentes, então o empurrão do hover
      compõe com o deslocamento da entrada em vez de brigar com ele (e, nos
      elementos animados por keyframes, o hover volta a funcionar: animação
      com `forwards` vence declaração comum e matava o `transform` do hover).
   Vale para QUALQUER cartão novo que leve `data-sobe`. */
/* ── Documentos e canais ───────────────────────────────────────────────────
   O bloco `html` da página. Aqui a caixa VOLTA, de propósito: ao contrário
   dos itens acima, cada cartão é um destino — um documento para abrir. Caixa
   é o que diz "isto é clicável e é uma coisa inteira". */
.pg-compliance .cmp-docs {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 680px)  { .pg-compliance .cmp-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .pg-compliance .cmp-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pg-compliance .cmp-doc {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 9px;
  padding: 22px 22px 20px;
  border: 1px solid var(--linha); border-radius: 18px;
  /* Superfície sutil: o redesenho não tem token de cartão; a caixa
     nasce do fio e de um véu de 2%, que no tema claro some e vira papel. */
  background: rgba(255,255,255,.02);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1),
              translate .34s cubic-bezier(.22, 1, .36, 1),
              border-color .3s ease, box-shadow .34s ease;
}
/* Clarão dourado que segue o canto superior do cartão no hover. */
.pg-compliance .cmp-doc::before {
  content: '';
  position: absolute; inset: -40% 40% 60% -20%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ouro) 22%, transparent), transparent 72%);
  opacity: 0; transition: opacity .34s ease, transform .5s ease;
  pointer-events: none;
}
.pg-compliance .cmp-doc:hover {
  translate: 0 -4px;
  border-color: color-mix(in srgb, var(--ouro) 42%, transparent);
  box-shadow: 0 22px 44px -28px rgba(0,0,0,.6);
}
.pg-compliance .cmp-doc:hover::before { opacity: 1; transform: translate(12%, 10%); }

.pg-compliance .cmp-doc__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pg-compliance .cmp-doc__ico {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--linha);
  background: color-mix(in srgb, var(--ouro) 8%, transparent);
  color: var(--ouro);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .25s ease;
}
.pg-compliance .cmp-doc__ico svg,
.pg-compliance .cmp-doc__ico i { width: 17px; height: 17px; }
.pg-compliance .cmp-doc:hover .cmp-doc__ico {
  transform: translateY(-2px) scale(1.06);
  border-color: color-mix(in srgb, var(--ouro) 48%, transparent);
}
/* Etiqueta do tipo de destino — "documento", "canal", "página". */
.pg-compliance .cmp-doc__tipo {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-fraca);
}
.pg-compliance .cmp-doc h3 {
  margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.3;
  color: var(--tinta);
}
.pg-compliance .cmp-doc p {
  margin: 0; font-size: .86rem; line-height: 1.6;
  color: var(--tinta-fraca);
}
.pg-compliance .cmp-doc__ir {
  margin-top: auto; padding-top: 6px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 700; color: var(--ouro);
}
.pg-compliance .cmp-doc__ir svg { width: 15px; height: 15px; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.pg-compliance .cmp-doc:hover .cmp-doc__ir svg { transform: translateX(4px); }

/* ── Faixa de compromisso ──────────────────────────────────────────────────
   Uma frase só, entre as duas seções, para a página respirar e para o assunto
   ganhar uma pausa antes do fechamento. */
.pg-compliance .cmp-frase {
  position: relative;
  margin: clamp(10px, 2vw, 18px) 0 0;
  padding: clamp(26px, 4vw, 40px) clamp(22px, 4vw, 44px);
  border: 1px solid var(--linha); border-radius: 20px;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--ouro) 9%, transparent),
              transparent 58%);
  overflow: hidden;
}
.pg-compliance .cmp-frase::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, transparent, var(--ouro), transparent);
}
.pg-compliance .cmp-frase p {
  margin: 0; max-width: 62ch;
  font-size: clamp(1.02rem, 1.7vw, 1.3rem); line-height: 1.55; font-weight: 500;
  color: var(--tinta);
}
.pg-compliance .cmp-frase strong { color: var(--ouro); font-weight: 700; }
.pg-compliance .cmp-frase__quem {
  display: block; margin-top: 14px;
  font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* ── Tema claro ────────────────────────────────────────────────────────────
   Nada de cor aqui: `--ouro` já vira #8a6a33 (bronze legível sobre branco)
   em `home_v2.css`, e tudo acima usa a variável. O que o tema claro precisa
   é de superfície e sombra — num fundo branco o véu de 2% desaparece e a
   caixa fica sem corpo. */
.light-mode .pg-compliance .cmp-doc {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.light-mode .pg-compliance .cmp-doc:hover { box-shadow: 0 20px 40px -26px rgba(15,23,42,.35); }
.light-mode .pg-compliance .cmp-frase { background: linear-gradient(135deg, rgba(138,106,51,.08), #fff 58%); }

@media (prefers-reduced-motion: reduce) {
  .pg-compliance *,
  .pg-compliance *::before,
  .pg-compliance *::after { animation: none !important; transition: none !important; }
  .pg-compliance .hv2-item::before { transform: scaleY(1); }
}