/* ============================================================================
   Página "Compliance" — Figma node 7803:1871 (frame "Desktop", 1440px)
   ----------------------------------------------------------------------------
   Prefixo .cmp- para não colidir com .svc- (Soluções) nem .sbr- (Quem somos).
   Tokens estruturais (--section-px, --content-w, --content-gap) vêm do main.css.
   ========================================================================== */

/* ── 1. HERO — node 8362:1798 ─────────────────────────────────────────────── */

.cmp-hero {
  position: relative;
  /* fill do frame 8362:1798 */
  background: linear-gradient(243deg, #3476a8 0%, #004a8a 100%);
  overflow: hidden;
}

/* Header escuro (instance 8362:1799, componente 7640:25 — NÃO é o mesmo
   "Header scroll" 7320:3231 das páginas claras). Fica dentro do hero porque
   #sticky-header nasce com translateY(-100%) e só desce após 10px de rolagem.
   Altura 96px = 24 (topo) + 48 (conteúdo) + 24 (base). */
.cmp-hero__header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px var(--section-px) 0;
}
.cmp-hero__header-inner {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--content-w);
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Container 8362:1800 — colunas 601 + 56 + 559 = 1216.
   Grid (e não flex) para o conteúdo travar em 1216 e centralizar em telas
   mais largas que 1440, mesma decisão tomada em sobre-nos.css. */
.cmp-hero__container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 601px) minmax(0, 559px);
  justify-content: center;
  align-items: center;
  gap: var(--content-gap);
  padding: 80px var(--section-px) 120px;
}

.cmp-hero__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: #fff;
}
.cmp-hero__title {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 52px;                 /* Heading/H1 */
  line-height: 1.2;
}
.cmp-hero__subtitle {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 18px;                 /* Body/p 18 */
  line-height: 1.5;
  opacity: 0.9;
}

/* Composição 8362:1834 — anel de 409px, 8 pílulas em volta, escudo ao centro */
.cmp-orbita {
  position: relative;
  height: 425px;
}
.cmp-orbita__anel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 409px;
  height: 409px;
  pointer-events: none;
}

/* Escudo 8370:1961 — anotação Figma: "Durante o hover, mudar imagem (ver no
   protótipo)". O component set `escudo rike is` (8370:1964) tem exatamente
   duas variantes: `Property 1=default` (texto prateado) e `Property 1=light`
   (texto azul). A troca é uma sobreposição das duas imagens com fade — assim
   não há flash de carregamento na primeira vez que o mouse entra. */
.cmp-orbita__escudo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 170px;
  z-index: 3;
  filter: drop-shadow(-6px 6px 19px rgba(0,0,0,.10))
          drop-shadow(-24px 24px 34px rgba(0,0,0,.09))
          drop-shadow(-55px 55px 46px rgba(0,0,0,.05));
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.cmp-orbita__escudo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity .35s ease;
}
.cmp-orbita__escudo .light { opacity: 0; }

.cmp-orbita:hover .cmp-orbita__escudo          { transform: translate(-50%, -50%) scale(1.06); }
.cmp-orbita:hover .cmp-orbita__escudo .default { opacity: 0; }
.cmp-orbita:hover .cmp-orbita__escudo .light   { opacity: 1; }

/* Pílulas — bg branco, raio 14, ícone 32px azul com brilho */
.cmp-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border-radius: 14px;
  white-space: nowrap;
  backdrop-filter: blur(43.95px);
  animation: cmp-flutua 5s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.cmp-pill--texto { padding-left: 16px; padding-right: 8px; }
.cmp-pill--icone { padding-left: 8px;  padding-right: 16px; }
.cmp-pill--fraca { opacity: .9; }
.cmp-pill--borda { box-shadow: inset 0 0 0 1px #f1f4f8; }
.cmp-pill--sombra {
  filter: drop-shadow(5px 3px 6px rgba(0,0,0,.05))
          drop-shadow(20px 11px 11px rgba(0,0,0,.04))
          drop-shadow(44px 24px 15px rgba(0,0,0,.03));
}
.cmp-pill:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.35);
  animation-play-state: paused;
  z-index: 5;
}

.cmp-pill p {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 14px;                 /* Body/p 14 */
  line-height: 1.5;
  color: #4a5568;
}
.cmp-pill__icone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: #006fcc;
  border-radius: 12px;
  overflow: hidden;
}
.cmp-pill__icone > .glifo { position: relative; z-index: 2; width: 16px; height: 16px; display: block; }
.cmp-pill__icone > .brilho {
  position: absolute;
  left: .5px;
  top: 0;
  width: 40px;
  height: 40px;
  z-index: 1;
  transform: scaleX(-1);
  pointer-events: none;
}

/* Posições exatas do Figma (8362:1835, 8368:1849/1859/1869/1879/1889/1899/1909) */
.cmp-pill--regulamentos { right: 0;     top: calc(50% + 0.5px); transform: translateY(-50%); animation-delay: -0.0s; }
.cmp-pill--etica        { right: 40px;  top: 68px;   animation-delay: -0.9s; }
.cmp-pill--riscos       { right: 40px;  top: 298px;  animation-delay: -1.8s; }
.cmp-pill--treinamento  { right: 376px; top: 303px;  animation-delay: -2.6s; }
.cmp-pill--investigacoes{ left: 0;      top: calc(50% + 0.5px); transform: translateY(-50%); animation-delay: -3.4s; }
.cmp-pill--transparencia{ left: 40px;   top: 68px;   animation-delay: -4.2s; }
.cmp-pill--politicas    { left: calc(50% + 0.5px); top: 0; transform: translateX(-50%); animation-delay: -5.0s; }
.cmp-pill--monitoramento{ left: 50%;    bottom: 0;   transform: translateX(-50%); animation-delay: -5.8s; }

/* Curso de 14px com inclinação leve — os 6px anteriores passavam despercebidos.
   Usa as propriedades individuais `translate`/`rotate` em vez de `transform`:
   assim o flutuar compõe com o `transform: translateY(-50%)` que posiciona as
   pílulas centralizadas, em vez de sobrescrevê-lo e fazê-las saltar de lugar. */
@keyframes cmp-flutua {
  0%, 100% { translate: 0 0;     rotate: 0deg; }
  50%      { translate: 0 -14px; rotate: -1.2deg; }
}

.cmp-pill--regulamentos:hover,
.cmp-pill--investigacoes:hover { transform: translateY(-50%) scale(1.06); }
.cmp-pill--politicas:hover,
.cmp-pill--monitoramento:hover { transform: translateX(-50%) scale(1.06); }

/* Recorte branco no rodapé do hero — 8362:1805 (400 × 28) */
.cmp-hero__recorte {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 400px;
  height: 28px;
  z-index: 3;
  pointer-events: none;
}

/* ── 2 e 5. SOLUÇÃO — nodes 7847:1607 e 7847:1555 ─────────────────────────── */

/* Mesmo componente nas duas ocorrências; só muda a imagem de fundo e o texto.
   O 7847:1555 (segunda) não tem padding no topo — vem colado na seção acima. */
.cmp-solucao { padding: 16px; background: #fff; }
.cmp-solucao--sem-topo { padding-top: 0; }

/* O bloco de texto fica à ESQUERDA. No Figma o "Main container" é
   justify-center, mas o filho `content` (7847:1609) é flex-1 e alinha o bloco
   em items-start — o resultado é o bloco encostado na borda esquerda, depois
   dos 96px de padding. Aqui isso vira justify-content: flex-start direto. */
/* O respiro lateral NÃO pode ser os 96px fixos do Figma. Em 1440 aqueles 96px
   colocam o bloco exatamente sobre a coluna de 1216 do site (16 de fora + 96
   = 112), mas acima disso o grid do site passa a ser 1216 centralizado e o
   bloco continuava grudado em 112px — saía do alinhamento do logo e das
   demais seções. Calculando a partir de --content-w ele acompanha em qualquer
   largura, e em 1440 o resultado é exatamente 96px. */
.cmp-solucao__main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 120px max(24px, calc((100% - var(--content-w)) / 2));
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.cmp-solucao__bloco {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  width: 572px;
  max-width: 100%;
  padding: 48px;
  background: #fff;
  border-radius: 14px;
}
.cmp-solucao__bloco .cmp-h2 { width: 476px; max-width: 100%; }
.cmp-solucao__corpo p {
  margin: 0 0 16px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #6b778c;
}
.cmp-solucao__corpo p:last-child { margin-bottom: 0; }

/* Etiqueta e H2 compartilhados pelas seções internas */
.cmp-tag {
  margin: 0;
  font-family: 'DM Mono', monospace;
  font-size: 14px;                 /* Body/Tag */
  line-height: 1.5;
  color: #004a8a;
}
.cmp-tag--dark { color: #006fcc; } /* Solução usa Primary/Dark */
.cmp-h2 {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 32px;                 /* Heading/H2 */
  line-height: 1.3;
  color: #0c111d;
}
.cmp-head { display: flex; flex-direction: column; gap: 16px; width: 100%; }

/* ── 3. ABOUT (grade de 8 cards) — node 7833:1422 ─────────────────────────── */

.cmp-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--content-gap);
  padding: 120px var(--section-px);
  background: #fff;
  overflow: hidden;
}
.cmp-grid__intro {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  width: 100%;
  max-width: var(--content-w);
}
.cmp-grid__intro > * { flex: 1 1 0; min-width: 0; }
.cmp-grid__intro p.corpo {
  margin: 0 0 16px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #4a5568;
}
.cmp-grid__intro p.corpo:last-child { margin-bottom: 0; }
.cmp-grid__intro p.corpo strong { font-weight: 700; }

.cmp-grid__linhas {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: var(--content-w);
}
.cmp-grid__linha { display: flex; gap: 16px; width: 100%; }
.cmp-grid__par   { display: flex; min-width: 0; gap: 16px; }

/* Fileira de duas metades iguais (1ª e 3ª). NÃO usar `flex: 1 1 0` aqui: com
   box-sizing:border-box o flex-basis 0 é travado no padding do card (48px),
   que sai do espaço livre antes do rateio. Como o grupo da esquerda não tem
   padding e o card da direita tem, a fileira saía 280/624 em vez de 599/599. */
.cmp-grid__linha--metades > * { flex: 0 0 calc(50% - 8px); min-width: 0; }

.cmp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  border-radius: 14px;
  overflow: hidden;
  background: #f5f9ff;
  /* inset em vez de border: a borda somaria 2px que o traço do Figma não soma */
  box-shadow: inset 0 0 0 1px #e6f4ff;
}
.cmp-card--flex  { flex: 1 1 0; min-width: 0; }
.cmp-card--243   { height: 243px; }
.cmp-card--215   { height: 215px; }
.cmp-card--292   { width: 292px; flex-shrink: 0; }
.cmp-card--291   { width: 291px; flex-shrink: 0; }

/* Ilustrações exportadas achatadas do Figma (cada uma é dezenas de vetores) */
.cmp-card__ilustra {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
  pointer-events: none;
}
.cmp-card__ilustra--dir { left: auto; right: -1px; transform: none; }

.cmp-card__titulo {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 18px;                 /* Body/p 18, em negrito */
  line-height: 1.5;
  color: #0c111d;
}
/* 7833:1443 é o único com peso Regular no Figma */
.cmp-card__titulo--regular { font-weight: 400; }

/* Larguras fixas dos três primeiros títulos (7833:1438/1439/1440). São elas que
   definem onde a linha quebra — sem isso sobra viúva ("ética" sozinha). Os
   outros cinco são min-w-full no Figma, ou seja, largura total do card. */
.cmp-card__titulo--w151 { width: 151px; }
.cmp-card__titulo--w223 { width: 223px; }
.cmp-card__titulo--w185 { width: 185px; }

/* ── Ilustrações interativas ──────────────────────────────────────────────────
   Dois cards têm a ilustração montada em camadas (em vez de PNG achatado) para
   reagirem ao hover. As peças e as coordenadas vêm direto do Figma. */

/* `overflow: hidden` é obrigatório: no Figma cada `ilustra` tem overflow-clip.
   As setas do card "Melhoria contínua" são um círculo de 266px dentro de um
   quadro de 154px de altura — sem o recorte elas invadem o título. O recorte
   também garante que o giro no hover não mexa em nada além da própria arte. */
.cmp-card__cena {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}
.cmp-card__cena > *,
.cmp-card__cena img { position: absolute; display: block; }

/* "Melhoria contínua dos controles internos" — ilustra 7886:1276 (289 × 154).
   As setas (7888:1293) e o badge do R (7886:1321) são irmãos e dividem o mesmo
   centro (144, 76), então dá para girar só as setas: o R fica parado. */
.cmp-cena-mel { width: 289px; height: 154px; }
.cmp-cena-mel__setas {
  left: 11px;
  top: -57px;
  width: 266px;
  height: 266px;
  transition: rotate 1.1s cubic-bezier(.25,.8,.3,1);
}
.cmp-cena-mel__badge {
  left: 116px;
  top: 48px;
  width: 56px;
  height: 56px;
  border: 4px solid #008dff;
  border-radius: 999px;
  box-sizing: border-box;
}
.cmp-cena-mel__r { left: 134.94px; top: 64px; width: 18.124px; height: 24px; }

.cmp-card:hover .cmp-cena-mel__setas { rotate: 180deg; }

/* "Ampliação da credibilidade institucional" — ilustra 7888:1392 (599 × 155).
   Base = barra + 4 escudos laterais; o escudo do meio (brilho + corpo + louros)
   é um grupo à parte, que sobe no hover. */
.cmp-cena-amp { width: 599px; height: 155px; }
.cmp-cena-amp__barra  { width: 144.231px; height: 76.191px; }
.cmp-cena-amp__lado   { width: 56px; height: 63px; top: 57px; }
.cmp-cena-amp__meio {
  position: absolute;
  inset: 0;
  transition: translate .5s cubic-bezier(.25,.9,.3,1);
}
.cmp-cena-amp__brilho { left: 238.65px; top: 8.71px;  width: 136.639px; height: 160.594px; }
.cmp-cena-amp__escudo { left: 247px;    top: 19px;    width: 104px;     height: 117px; }
.cmp-cena-amp__louro  { top: 57px; width: 31.848px; height: 53.188px; }

.cmp-card:hover .cmp-cena-amp__meio { translate: 0 -14px; }

/* ── Fileira de ícones — cards "Fortalecimento" (7872:1963) e
      "Redução de riscos" (7882:1496). Seis caixas, uma delas em destaque. ── */
.cmp-cena-icones { width: 292.5px; height: 155px; }
.cmp-cena-icones__fila {
  position: absolute;
  left: calc(50% - 0.25px);
  top: calc(50% + 0.5px);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmp-cena-icones__fila > span { position: relative; }
.cmp-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 47px;
  background: #fff;
  border: 1.5px solid #e6f4ff;
  border-radius: 12px;
  box-sizing: border-box;
  transition: translate .4s cubic-bezier(.25,.9,.3,1);
}
.cmp-ico img { display: block; width: 20px; height: 20px; }
.cmp-ico--destaque {
  width: 56px;
  height: 56px;
  border: 2px solid #008dff;
  border-radius: 999px;
  box-shadow: 1px 1px 3px rgba(0,0,0,.05), 3px 4px 5px rgba(0,0,0,.04),
              6px 10px 7px rgba(0,0,0,.03), 10px 18px 8px rgba(0,0,0,.01);
  transition: scale .4s cubic-bezier(.3,1.4,.5,1);
}
.cmp-ico--destaque img { width: 24px; height: 24px; }

/* No hover as caixas comuns sobem em cascata e a destacada cresce. */
.cmp-card:hover .cmp-ico            { translate: 0 -8px; }
.cmp-card:hover .cmp-ico--destaque  { translate: 0 0; scale: 1.12; }
.cmp-cena-icones__fila > span:nth-child(1) .cmp-ico { transition-delay: 0s; }
.cmp-cena-icones__fila > span:nth-child(2) .cmp-ico { transition-delay: .05s; }
.cmp-cena-icones__fila > span:nth-child(3) .cmp-ico { transition-delay: .1s; }
.cmp-cena-icones__fila > span:nth-child(4) .cmp-ico { transition-delay: .15s; }
.cmp-cena-icones__fila > span:nth-child(5) .cmp-ico { transition-delay: .2s; }
.cmp-cena-icones__fila > span:nth-child(6) .cmp-ico { transition-delay: .25s; }

/* ── "Transparência nas relações" — 7872:1979 (292,5 × 155) ───────────────── */
.cmp-cena-tra { width: 292.5px; height: 155px; }
.cmp-cena-tra__linha { left: 59.5px; top: 34px; width: 183px; height: 76.5px; }
.cmp-cena-tra__av {
  width: 51px;
  height: 51px;
  transition: translate .45s cubic-bezier(.25,.9,.3,1), scale .45s cubic-bezier(.3,1.3,.5,1);
}
.cmp-cena-tra__av--1 { left: 83.5px;  top: 85px; }
.cmp-cena-tra__av--2 { left: 149.5px; top: 13px; width: 71px; height: 79px; }
.cmp-cena-tra__av--3 { left: 215.5px; top: 79px; }
.cmp-cena-tra__av--4 { left: 26.5px;  top: 42px; }
.cmp-card:hover .cmp-cena-tra__av--1 { translate: 0 5px; }
.cmp-card:hover .cmp-cena-tra__av--3 { translate: 4px 4px; }
.cmp-card:hover .cmp-cena-tra__av--4 { translate: -4px 3px; }
.cmp-card:hover .cmp-cena-tra__av--2 { scale: 1.1; }

/* ── "Prevenção de assédios" — 7888:1418 (600 × 155) ──────────────────────── */
.cmp-cena-ass { width: 600px; height: 155px; }
.cmp-cena-ass__trilho { top: 75.5px; width: 119px; height: 4px; }
.cmp-cena-ass__grupo {
  position: absolute;
  inset: 0;
  transition: translate .45s cubic-bezier(.25,.9,.3,1);
}
.cmp-cena-ass__folder { top: 31px; width: 83.147px; height: 93.573px; }
.cmp-cena-ass__user   { top: 62.8px; width: 24px; height: 29.1px; }
/* Sobem em cascata, do fundo para a frente */
.cmp-cena-ass__grupo--1 { transition-delay: 0s; }
.cmp-cena-ass__grupo--2 { transition-delay: .07s; }
.cmp-cena-ass__grupo--3 { transition-delay: .14s; }
.cmp-card:hover .cmp-cena-ass__grupo { translate: 0 -10px; }

/* ── Cards 3 e 7: ilustração achatada, com movimento no conjunto ───────────── */
.cmp-card__ilustra {
  transition: scale .5s cubic-bezier(.25,.9,.3,1), rotate .6s cubic-bezier(.25,.9,.3,1);
}
/* "Prevenção de fraudes": aproxima do escudo, que fica à direita do quadro */
.cmp-card--fraudes .cmp-card__ilustra { transform-origin: 72% 55%; }
.cmp-card--fraudes:hover .cmp-card__ilustra { scale: 1.07; }
/* "Conformidade com normas": o leque de pastas abre um pouco */
.cmp-card--normas .cmp-card__ilustra { transform-origin: 50% 90%; }
.cmp-card--normas:hover .cmp-card__ilustra { rotate: -2.5deg; scale: 1.03; }

/* ── 4. MESSAGE — node 8309:1848 ──────────────────────────────────────────── */

/* fills = [PATTERN (7643:1010), #F7FBFF] — o mesmo padrão de pontos dos heros:
   elipse de 2×2px em #6B778C a 15%, repetida a cada 16px. */
.cmp-message {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--content-gap);
  padding: 120px var(--section-px) 0;
  background-color: #f7fbff;
  background-image: radial-gradient(circle,
    rgba(107, 119, 140, 0.15) 1px,
    transparent               1px);
  background-size: 16px 16px;
  overflow: hidden;
  isolation: isolate;
}
.cmp-message__fundo {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1890px;
  height: 793px;
  max-width: none;
  opacity: .5;                     /* 8315:1576 tem opacity 0.5 no Figma */
  z-index: 1;
  pointer-events: none;
}
.cmp-message__bloco {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 744px;
  max-width: 100%;
  padding: 48px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.6) 100%);
  filter: drop-shadow(0 -9px 10.5px rgba(95,141,181,.05))
          drop-shadow(0 -37px 18.5px rgba(95,141,181,.04));
}
.cmp-message__corpo p {
  margin: 0 0 16px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #4a5568;
}
.cmp-message__corpo p:last-child { margin-bottom: 0; }
.cmp-message__corpo strong { font-weight: 700; }

/* Caixinhas de ícone flutuando ao fundo (8309:2052, 8309:2064, 8314:2089).
   Ancoradas ao centro para acompanharem a página em telas mais largas. */
.cmp-message__icone {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid #e6f4ff;
  border-radius: 10px;
  pointer-events: none;
  animation: cmp-flutua 4.5s ease-in-out infinite;
}
.cmp-message__icone::before {          /* retângulo interno do Figma */
  content: '';
  position: absolute;
  inset: 5.5px;
  border: 1.5px solid #e6f4ff;
  border-radius: 10px;
}
.cmp-message__icone img { position: relative; display: block; }

.cmp-message__icone--chat   { width: 66.865px; height: 66.865px; left: calc(50% + 339px); top: 664px; }
.cmp-message__icone--thumbs { width: 66.865px; height: 66.865px; left: calc(50% - 533px); top: 431.5px; animation-delay: -2.7s; }
.cmp-message__icone--shield { width: 58.87px;  height: 58.87px;  left: calc(50% + 456px); top: 183px;  animation-delay: -5.3s; }
.cmp-message__icone--chat   img { width: 32px; height: 32px; }
.cmp-message__icone--thumbs img { width: 32px; height: 32px; }
.cmp-message__icone--shield img { width: 24px; height: 24px; }

/* ── 6. CANAL DE DENÚNCIA — node 8103:2045 ────────────────────────────────── */

.cmp-canal {
  display: grid;
  grid-template-columns: minmax(0, 580px) minmax(0, 580px);
  justify-content: center;
  align-items: center;
  gap: var(--content-gap);
  padding: 120px var(--section-px);
  background: #f5f9ff;
}
.cmp-canal__content { display: flex; flex-direction: column; gap: 32px; }
.cmp-canal__content .cmp-h2 { width: 375px; max-width: 100%; }
.cmp-canal__corpo p {
  margin: 0 0 16px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #4a5568;
}
.cmp-canal__corpo p:last-child { margin-bottom: 0; }

.cmp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 12px;
  padding: 18px 24px 18px 32px;
  background: #006fcc;
  border-radius: 14px;
  color: #fff;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s, transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.cmp-btn img { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.cmp-btn:hover {
  background: #0058a3;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(0,111,204,.55);
}
/* Composição da direita (8103:2056). Anotação Figma:
   "[Pedido do cliente] Animação sutil, como blocos subindo."
   Por isso ela é montada em DOM e não achatada em imagem — só o cubo central,
   que é um sólido em perspectiva, continua sendo um PNG. */
.cmp-canal__arte {
  position: relative;
  width: 580px;
  max-width: 100%;
  height: 381px;
  border-radius: 14px;
  overflow: hidden;
}
.cmp-canal__anel,
.cmp-canal__disco {
  position: absolute;
  left: calc(50% - 2.17px);
  top: calc(50% + 15.61px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cmp-canal__anel  { width: 336.409px; height: 336.409px; }
.cmp-canal__disco { width: 216.43px;  height: 216.43px; }

.cmp-canal__ponto { position: absolute; width: 8px; height: 8px; }

.cmp-canal__cubo {
  position: absolute;
  left: 227.01px;
  top: 146.03px;
  width: 121.638px;
  height: 206.486px;
  animation: cmp-flutua 4.5s ease-in-out infinite;
}

/* Caixinha branca com moldura dupla — mesma forma da seção Message */
.cmp-canal__box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid #e6f4ff;
  border-radius: 10px;
  animation: cmp-flutua 4.5s ease-in-out infinite;
}
.cmp-canal__box::before {
  content: '';
  position: absolute;
  inset: 5.25px;
  border: 1.5px solid #e6f4ff;
  border-radius: 10px;
}
.cmp-canal__box img { position: relative; display: block; }

/* Posições exatas dentro do frame de 580 × 381 */
.cmp-canal__box--scales  { left: 100.64px; top: 79.16px;  width: 66.865px; height: 66.865px; animation-delay: -0.8s; }
.cmp-canal__box--lock    { left: 258.39px; top: 6.69px;   width: 58.87px;  height: 58.87px;  animation-delay: -1.6s; }
.cmp-canal__box--users   { left: 412.49px; top: 79.16px;  width: 66.865px; height: 66.865px; animation-delay: -2.4s; }
.cmp-canal__box--shield  { left: 79.21px;  top: 213.91px; width: 66.865px; height: 66.865px; animation-delay: -3.2s; }
.cmp-canal__box--check   { left: 433.93px; top: 213.91px; width: 66.865px; height: 66.865px; animation-delay: -4.0s; }
.cmp-canal__box img       { width: 32px; height: 32px; }
.cmp-canal__box--lock img { width: 24px; height: 24px; }

/* ── Entrada por rolagem ──────────────────────────────────────────────────── */

.cmp-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1),
              transform .6s cubic-bezier(.2,.7,.3,1);
}
.cmp-fade.visible { opacity: 1; transform: none; }

@media (scripting: none) {
  .cmp-fade { opacity: 1; transform: none; }
}

/* ── Acessibilidade ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cmp-pill,
  .cmp-message__icone,
  .cmp-canal__box,
  .cmp-canal__cubo { animation: none !important; }
  .cmp-fade { opacity: 1; transform: none; transition: none; }
  .cmp-pill,
  .cmp-btn,
  .cmp-cena-mel__setas,
  .cmp-cena-amp__meio,
  .cmp-cena-tra__av,
  .cmp-cena-ass__grupo,
  .cmp-ico,
  .cmp-card__ilustra,
  .cmp-orbita__escudo { transition: none !important; }
  .cmp-orbita:hover .cmp-orbita__escudo { transform: translate(-50%, -50%); }
  .cmp-card:hover .cmp-cena-mel__setas { rotate: 0deg; }
  .cmp-card:hover .cmp-cena-amp__meio  { translate: 0 0; }
  .cmp-card:hover .cmp-cena-tra__av,
  .cmp-card:hover .cmp-cena-ass__grupo,
  .cmp-card:hover .cmp-ico { translate: 0 0; scale: 1; }
  .cmp-card--fraudes:hover .cmp-card__ilustra,
  .cmp-card--normas:hover .cmp-card__ilustra { scale: 1; rotate: 0deg; }
}

/* ─── Canal de denúncias: faixa entre o mobile e o desktop ────────────────
   O grid são duas colunas de 580 mais 56 de gap: 1216 de conteúdo, que só
   existe a partir de 1440px de viewport. Abaixo disso as colunas encolhem
   (`minmax(0, 580px)`) mas a arte continua com 580px fixos e os filhos dela
   são absolutos — resultado: a arte vazava da célula em TODA a faixa de 900
   a 1439. A 960px, por exemplo, o desenho ficava 56px para fora.

   Abaixo de 1440 a seção passa a uma coluna só. Aí sobra largura de sobra
   (759px já em 900px de viewport) e a arte cabe inteira, sem escala. */
@media (min-width: 900px) and (max-width: 1439px) {
  .cmp-canal       { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .cmp-canal__arte { margin-left: auto; margin-right: auto; }
}