/* 09 — Diversidade na Vivo */
.diversidade {
  --diversidade-bg: #320053;
  --diversidade-accent: #A44BFA;
  background: var(--diversidade-bg);
  color: var(--color-white);
  border-radius: 120px 120px 0 0;
  padding-block: 80px;
}

.diversidade__deco { position: absolute; pointer-events: none; max-width: none; }
.diversidade__deco--top { top: -75px; right: -127px; width: 339px; height: 475px; object-fit: cover; object-position: bottom; }
.diversidade__deco--bottom { bottom: -40px; left: 10px; width: 158px; height: 295px; transform: rotate(169.76deg) scaleY(-1); }

.diversidade__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  width: 100%;
  max-width: 1139px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.diversidade__header { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.diversidade__title-light { font-weight: var(--fw-light); }
.diversidade__title-accent { color: var(--color-purple-02); }
.diversidade__intro { max-width: 754px; }

/* Carrossel de cards: o card ativo fica no centro; os demais deslizam para os lados (loop) */
.diversidade__carousel { --div-card-w: 323px; --div-step: 390px; width: 100%; }
.diversidade__cards {
  display: grid;           /* cards empilhados na mesma celula: a altura e a do maior */
  width: 100%;
  min-height: 383px;
  padding-bottom: 21px;    /* espaco para o deslocamento vertical dos cards laterais */
}
.diversidade__card {
  grid-area: 1 / 1;
  justify-self: center;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: var(--div-card-w);
  min-height: 341px;
  padding: var(--space-2) var(--space-3);
  text-align: center;
  border: 3px solid transparent;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-purple-01);
  opacity: 0.8;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 1;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease, background-color var(--transition), border-color var(--transition), color var(--transition);
}
.diversidade__card[data-pos="0"]  { z-index: 3; transform: none; }
.diversidade__card[data-pos="-1"] { z-index: 2; transform: translate(calc(var(--div-step) * -1), 21px) rotate(-6.63deg); }
.diversidade__card[data-pos="1"]  { z-index: 2; transform: translate(var(--div-step), 21px) rotate(6.86deg); }
.diversidade__card[data-pos="-2"] { transform: translate(calc(var(--div-step) * -2), 21px) rotate(-6.63deg); }
.diversidade__card[data-pos="2"]  { transform: translate(calc(var(--div-step) * 2), 21px) rotate(6.86deg); }

/* Estado branco: hover, foco por teclado e card ativo (clicado) */
.diversidade__card:hover,
.diversidade__card:focus-visible,
.diversidade__card.is-active {
  background: var(--color-white);
  border-color: var(--diversidade-accent);
  color: var(--color-primary);
  opacity: 1;
}
/* cards fora do alcance (so existem com mais de 3 cards) */
.diversidade__card[data-pos="-2"],
.diversidade__card[data-pos="2"] { opacity: 0; pointer-events: none; }
.diversidade__card:focus-visible { outline: 2px solid var(--color-purple-02); outline-offset: 4px; }

/* Setas e bolinhas */
.diversidade__nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: var(--space-3); }
.diversidade__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
  color: var(--color-white); opacity: 0.8; cursor: pointer;
  transition: opacity var(--transition), background-color var(--transition);
}
.diversidade__arrow:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.diversidade__dots { display: flex; align-items: center; }
.diversidade__dot { position: relative; width: 24px; height: 36px; padding: 0; color: var(--color-white); cursor: pointer; }
.diversidade__dot::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border: 1.5px solid currentColor; border-radius: var(--radius-pill); box-sizing: border-box; opacity: 0.7;
  transition: width 0.3s ease, margin 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
}
.diversidade__dot[aria-current="true"]::before { width: 20px; margin-left: -10px; background: currentColor; opacity: 1; }
.diversidade__arrow:focus-visible, .diversidade__dot:focus-visible { outline: 2px solid var(--color-purple-02); outline-offset: 2px; }

.diversidade__card-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.diversidade__card-title { max-width: 253px; font-size: var(--fs-body-lg); font-weight: var(--fw-bold); line-height: var(--lh-body); }
.diversidade__card-text { max-width: 275px; font-size: 16px; font-weight: var(--fw-regular); line-height: var(--lh-body); }

/* Ícones (32x32) */
.diversidade__icon { position: relative; display: block; flex: none; width: 32px; height: 32px; overflow: hidden; }
.diversidade__icon-piece { position: absolute; display: block; }
.diversidade__icon-piece img { position: absolute; display: block; max-width: none; }
/* Ícones dos cards laterais: traço claro por padrão, escuro (-on) no estado branco */
.diversidade__icon-piece img { transition: opacity var(--transition); }
.diversidade__icon-on { opacity: 0; }
.diversidade__card:hover .diversidade__icon-on,
.diversidade__card:focus-visible .diversidade__icon-on,
.diversidade__card.is-active .diversidade__icon-on { opacity: 1; }
.diversidade__card:hover .diversidade__icon-piece img:not(.diversidade__icon-on),
.diversidade__card:focus-visible .diversidade__icon-piece img:not(.diversidade__icon-on),
.diversidade__card.is-active .diversidade__icon-piece img:not(.diversidade__icon-on) { opacity: 0; }
.diversidade__icon-piece--rep { inset: 9.39% 9.52% 9.36% 9.38%; }
.diversidade__icon-piece--rep img { inset: -3.46% -3.47%; width: auto; height: auto; }
.diversidade__icon-piece--pcd { inset: 9.39% 17.17% 9.36% 15.63%; }
.diversidade__icon-piece--pcd img { inset: -3.85% -4.65%; width: auto; height: auto; }

.diversidade__lgbt { position: absolute; display: block; transform: scaleY(-1); }
.diversidade__lgbt img { position: absolute; display: block; max-width: none; width: auto; height: auto; }
.diversidade__lgbt--703 { inset: 56.99% 17.94% 11.74% 11.76%; }
.diversidade__lgbt--703 img { inset: -10% -4.45%; }
.diversidade__lgbt--707 { inset: 11.77% 11.73% 39.28% 34.58%; }
.diversidade__lgbt--707 img { inset: -6.38% -5.91% -6.48%; }
.diversidade__lgbt--711,
.diversidade__lgbt--715,
.diversidade__lgbt--719,
.diversidade__lgbt--723 { height: 0; }
.diversidade__lgbt--711 { top: 50.01%; right: 28.13%; left: 53.12%; }
.diversidade__lgbt--715 { top: 40.64%; right: 21.88%; left: 43.75%; }
.diversidade__lgbt--719 { top: 31.26%; right: 12.5%; left: 37.5%; }
.diversidade__lgbt--723 { top: 21.89%; right: 15.62%; left: 37.5%; }
.diversidade__lgbt--711 img { inset: -1px -16.67%; }
.diversidade__lgbt--715 img { inset: -1px -9.09%; }
.diversidade__lgbt--719 img { inset: -1px -6.25%; }
.diversidade__lgbt--723 img { inset: -1px -6.67%; }

.diversidade__cta-text { max-width: 808px; text-align: center; }

/* CTA */
.diversidade__cta {
  display: inline-flex;
  padding: 10px;
  border: 1px solid var(--color-purple-02);
  border-radius: 100px;
  transition: transform var(--transition);
}
.diversidade__cta-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 24px;
  border: 4px solid var(--color-white);
  border-radius: 28px;
  background: var(--color-primary);
  color: var(--color-white);
  transition: background-color var(--transition);
}
.diversidade__cta:hover { transform: translateY(-2px); }
.diversidade__cta:hover .diversidade__cta-inner,
.diversidade__cta:focus-visible .diversidade__cta-inner { background: var(--color-purple-02); }
.diversidade__cta-label { font-size: var(--fs-h5); font-weight: var(--fw-bold); line-height: var(--lh-h5); white-space: nowrap; }

@media (max-width: 1024px) {
  .diversidade { border-radius: 80px 80px 0 0; padding-block: 64px; }
  .diversidade__deco--top { width: 240px; height: 336px; right: -100px; }
  .diversidade__carousel { --div-step: 300px; }
}
@media (max-width: 640px) {
 .diversidade__intro {
    max-width: 294px;
 }
  .diversidade { border-radius: 48px 48px 0 0; padding-block: 48px; }
  .diversidade__inner { gap: var(--space-5); }
  .diversidade__deco--top { width: 160px; height: 224px; right: -70px; }
  .diversidade__deco--bottom { transform: rotate(169.76deg) scaleY(-1) scale(0.6); }
  .diversidade__carousel { --div-card-w: min(323px, 78vw); --div-step: calc(var(--div-card-w) * 0.78); }
  .diversidade__cta-label { font-size: var(--fs-h6); }
}
@media (prefers-reduced-motion: reduce) { .diversidade__cta, .diversidade__card, .diversidade__icon-piece img, .diversidade__dot::before { transition: none; } }