/*  Olá, meus amigos! Espero de coração que tenham gostado do evento, ele foi pensado com muito carinho pra realmente ajudar vocês a darem os próximos passos na carreira.
Se decidirem entrar pra comunidade, será um prazer enorme tê-los com a gente! Só não deixem pra depois… as vagas serão encerradas em breve, e as próximas turmas terão um valor mais alto.  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-pale: #f0f4f0;
  --bg-light: #ffffff;
  --compare-accent: #7aa7ff;
  --compare-accent-soft: rgba(122, 167, 255, 0.24);
}

html,
body {
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

body {
  background-color: #0a1628;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Poppins", sans-serif;
}

button {
  font-family: "Poppins", sans-serif;
}

header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 8%;
  position: absolute;
  z-index: 99;

  nav,
  .brandSlot,
  .headerActions {
    flex: 1;
  }

  .brandSlot {
    flex: 0 0 auto;
    order: -1;
  }

  .logoBradesco {
    width: clamp(120px, 10vw, 180px);
    height: auto;
    filter: brightness(0) invert(1);
  }

  nav {
    min-width: auto;
    justify-content: center;
    display: flex;
    padding-left: 0;
    position: absolute;
    left: 50%;
    top: calc(50% + 4px);
    transform: translate(-50%, -50%);
  }

  ul {
    display: flex;
    list-style-type: none;
    gap: 28px;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
  }

  li {
    display: flex;
  }

  nav a {
    position: relative;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color 0.3s ease;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 100%;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
      opacity: 0.9;
    }

    &:hover,
    &[aria-current="page"] {
      color: rgba(255, 255, 255, 1);

      &::after {
        transform: scaleX(1);
      }
    }
  }

  .brandSlot {
    min-height: 1px;
    display: flex;
    align-items: center;
  }

  .headerActions {
    display: flex;
    justify-content: end;
    gap: 24px;
    align-items: center;
    margin-left: auto;
  }
}

.brandLink {
  display: inline-flex;
  align-items: center;
}

.menuHamburguer {
  display: none;
  background: transparent;
  padding: 0;
  border: none;

  img {
    display: block;
    width: 32px;
  }
}

.mobileMenu {
  position: fixed;
  inset: 0;
  z-index: 120;
}

.mobileMenu[hidden] {
  display: none;
}

.mobileMenu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 18, 0.68);
  backdrop-filter: blur(10px);
  border: none;
  opacity: 1;
}

.mobileMenu__panel {
  position: absolute;
  top: 16px;
  right: 16px;
  left: 16px;
  padding: 22px 20px 24px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 16, 33, 0.94);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.compare-page .mobileMenu__panel {
  background: rgba(10, 28, 58, 0.94);
}

.compare-page.is-signature .mobileMenu__panel {
  background: rgba(77, 20, 39, 0.94);
}

.compare-page.is-starwars .mobileMenu__panel {
  background: rgba(8, 10, 15, 0.96);
}

.compare-page .mobileMenu__nav a {
  background: rgba(255, 255, 255, 0.05);
}

.compare-page.is-signature .mobileMenu__nav a[aria-current="page"] {
  background: rgba(255, 120, 157, 0.18);
}

.compare-page.is-starwars .mobileMenu__nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.09);
}

.compare-page.is-infinite .mobileMenu__nav a[aria-current="page"] {
  background: rgba(122, 167, 255, 0.18);
}

.mobileMenu__panelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mobileMenu__close {
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 28px;
  line-height: 1;
  padding: 0;
  border: none;
}

.mobileMenu__nav {
  display: grid;
  gap: 8px;
  margin-top: 18px;

  a {
    display: block;
    padding: 16px 14px;
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
    font-size: 18px;
    font-weight: 600;
  }

  a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.12);
  }
}

button {
  border: none;
  outline: none;
  opacity: 0.8;
  transition: 0.3s all;
  cursor: pointer;

  &:hover {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.slides {
  width: 100%;
  height: 106dvh;
  overflow: hidden;
  display: flex;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  padding-right: 4%;
  padding-bottom: 6vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  clip-path: circle(0% at 89% 50%);
  opacity: 0;
  transition: clip-path 0s 1s, opacity 0s 1s;

  .imgCirc {
    transition: transform 1s;
    transform: rotate(100deg);
  }

  p {
    opacity: 0;
    transition: opacity 0.6s 0.8s;
  }

  .botaoPrimario {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s 1s, transform 0.6s 1s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 28px rgba(6, 15, 35, 0.18);

    &::before {
      content: "";
      position: absolute;
      top: -10%;
      bottom: -10%;
      left: -90%;
      width: 42%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.38),
        transparent
      );
      transform: skewX(-24deg);
      transition: left 0.45s ease;
      pointer-events: none;
    }

    &:hover {
      background-color: #ffffff;
      border-color: rgba(255, 255, 255, 0.98);
      box-shadow: 0 20px 38px rgba(5, 15, 38, 0.24);
      transform: translateY(-4px) scale(1.02);
    }

    &:hover::before {
      left: 138%;
    }
  }

  .produtos img {
    opacity: 0;
    transition:
      opacity 0.7s 0.14s,
      transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.14s;
  }

  .produtos img:nth-child(2) {
    transition-delay: 0.2s;
  }

  .produtos img:nth-child(3) {
    transition-delay: 0.28s;
  }

  &.active {
    clip-path: circle(120% at 89% 50%);
    opacity: 1;
    transition: clip-path 1s 0s, opacity 0.1s 0s;
    z-index: 1;

    .imgCirc {
      transform: rotate(0);
    }

    p {
      opacity: 1;
    }

    .botaoPrimario {
      opacity: 1;

      transform: translateY(0px);
    }

    .produtos img {
      opacity: 1;
      --slide-x: 0px;
      --slide-y: 0px;
      --slide-scale: 1;
      --slide-rotate: 8deg;
    }
  }
}

.conteudo {
  flex: 0 0 min(42rem, 46vw);
  position: relative;
  margin: 0 0 0 24.2%;
  min-height: 18vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 2;

  h1 {
    font-size: clamp(36px, 2.95vw, 66px);
    line-height: 1;
    max-width: none;
    white-space: nowrap;
  }

  p {
    width: min(29rem, 60%);
    min-height: calc(1.4em * 4 + 0.9rem);
    max-width: 29rem;
    margin-top: 0.7rem;
    padding-bottom: 0.9rem;
    line-height: 1.4;
    overflow: visible;
  }
}
.tituloSlide h1 {
  overflow: visible;
}

.tituloSlide {
  transform: translateY(-6px);
  margin-bottom: 0.15rem;
}

.tituloSlide--duasPalavras h1 {
  white-space: nowrap;
  max-width: none;
  font-size: clamp(32px, 2.45vw, 54px);
}

.tituloSlide--tresPalavras h1 {
  white-space: nowrap;
  max-width: none;
  font-size: clamp(28px, 2.1vw, 46px);
}

.produtos {
  display: flex;
  align-items: center;
  width: 47vw;
  min-width: 47vw;
  justify-content: flex-end;
  position: absolute;
  right: 6.1%;
  top: 50.8%;
  transform: translateY(-31%);
  min-height: 34.5vw;
  z-index: 2;

  img {
    width: 20.6vw;
    object-fit: contain;
    filter: drop-shadow(32px 46px 32px rgba(0, 0, 0, 0.35));
    position: relative;
    will-change: transform, opacity;
    --slide-x: 72px;
    --slide-y: 22px;
    --slide-scale: 0.9;
    --slide-rotate: 14deg;
    transform: translate3d(var(--slide-x), var(--slide-y), 0)
      scale(var(--slide-scale)) rotate(var(--slide-rotate));

    &:first-child {
      width: 30.8vw;
      z-index: 3;
    }

    &:nth-child(2) {
      position: absolute;
      right: -0.8vw;
      top: 0.4vw;
      width: 22.2vw;
      cursor: pointer;
      z-index: 2;
    }

    &:nth-child(3) {
      position: absolute;
      right: -3.6vw;
      top: -0.7vw;
      width: 16.4vw;
      cursor: pointer;
      z-index: 1;
    }
  }
}

.imgCirc {
  position: absolute;
  left: -21vw;
  top: 14vh;
  width: 38vw;
  height: 38vw;
  margin-left: 0;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: rgba(8, 13, 25, 0.25);
  box-shadow: 4px 6px 4.3px 0 rgba(0, 0, 0, 0.15),
    12px 24px 40px 0 rgba(0, 0, 0, 0.15);
  z-index: 0;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
      circle at 28% 24%,
      rgba(255, 255, 255, 0.24),
      rgba(255, 255, 255, 0.02) 42%,
      transparent 68%
    );
    z-index: 1;
    pointer-events: none;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 5;
    pointer-events: none;
  }
}

.imgCirc__layer,
.imgCirc__ring,
.imgCirc__spark,
.imgCirc__shine {
  position: absolute;
}

.imgCirc__layer {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imgCirc__ring {
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  z-index: 4;
}

.imgCirc__ring--outer {
  inset: 4.8%;
}

.imgCirc__ring--inner {
  inset: 12.5%;
  opacity: 0.38;
}

.imgCirc--infinite {
  background:
    radial-gradient(circle at 68% 20%, rgba(255, 221, 130, 0.18), transparent 22%),
    radial-gradient(circle at 36% 62%, rgba(56, 112, 255, 0.22), transparent 50%),
    linear-gradient(150deg, rgba(7, 25, 63, 0.92), rgba(7, 15, 34, 0.95));

  .imgCirc__layer--bg {
    transform: scale(1.28);
    object-position: 68% center;
    opacity: 0.92;
  }
}

.imgCirc__spark {
  width: 0.72vw;
  height: 0.72vw;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  background: #ffd36d;
  z-index: 4;
  box-shadow:
    0 0 0 0.32vw rgba(255, 211, 109, 0.12),
    0 0 1.2vw rgba(255, 211, 109, 0.55);
}

.imgCirc__spark--one {
  top: 24%;
  right: 23%;
}

.imgCirc__spark--two {
  bottom: 22%;
  left: 24%;
  width: 0.48vw;
  height: 0.48vw;
}

.imgCirc--signature {
  background:
    linear-gradient(160deg, rgba(255, 98, 112, 0.82), rgba(170, 19, 56, 0.9)),
    #e8134d;

  .imgCirc__layer--boardwalk {
    transform: scale(1);
    transform-origin: center center;
    object-position: 100% center;
    opacity: 0.99;
    filter: saturate(1.04) contrast(1.03);
  }
}

.imgCirc__shine {
  inset: 10% auto auto 12%;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 72%);
  z-index: 3;
}

.imgCirc--starwars {
  background:
    radial-gradient(circle at 72% 24%, rgba(112, 143, 255, 0.12), transparent 24%),
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.1), transparent 20%),
    linear-gradient(145deg, rgba(10, 11, 15, 0.98), rgba(1, 2, 5, 1));

  .imgCirc__layer--vader {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
    transform: scale(1.08);
    opacity: 0.98;
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.52));
    z-index: 2;
  }
}

.navSlides {
  position: absolute;
  left: 24.2%;
  top: 66%;
  display: flex;
  width: auto;
  justify-content: flex-start;
  align-items: center;
  z-index: 9;
  padding-top: 40px;
  gap: 52px;

  .botoesNav {
    display: flex;
    gap: 16px;
    margin-top: 12px;
  }

  button {
    background-color: transparent;
  }

  .bullets {
    list-style-type: none;
    display: flex;
    gap: 8px;
    padding-bottom: 0;

    li {
      width: 24px;
      height: 8px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 12px;
      opacity: 0.8;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        opacity: 1;
      }

      &.active {
        background-color: rgba(255, 255, 255, 1);
      }
    }
  }
}

.pringlesFundo {
  position: absolute;
  width: 55vw;
  right: -8vw;
  bottom: -8vw;
  z-index: -1;
  opacity: 0.08;
}

.botaoPrimario {
  border-radius: 0.3vw;
  padding: 1.1vw 1.4vw;
  font-size: clamp(16px, 1.1vw, 1.1vw);
  background-color: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  border: 2px solid rgb(255, 255, 255);
  margin-top: 38px;
  align-self: flex-start;
}

.slide:nth-child(1) {
  background: linear-gradient(100deg, #1b3d7a 2.57%, #103e77 95.91%);

  h1 {
    font-size: 3.95vw;
  }
}

.slide:nth-child(2) {
  background: linear-gradient(100deg, #e8134d 2.57%, #ff5c7e 95.91%);

  h1 {
    font-size: 3.95vw;
  }
}

.slide:nth-child(3) {
  background: linear-gradient(100deg, #121316 2.57%, #363c47 95.91%);

  h1 {
    font-size: 3.72vw;
  }
}

/* SEÇÃO 2 */

.secao2 {
  width: 100%;
  min-height: clamp(2080px, 130vw, 2560px);
  padding: 8% 8% calc(280px + 14vw);
  position: relative;
  z-index: 2;
  background-color: #060b16;
}

.secao2__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        180deg,
        rgba(2, 5, 12, 0.78) 0%,
        rgba(3, 7, 16, 0.68) 30%,
        rgba(4, 8, 18, 0.58) 100%
      );
    pointer-events: none;
  }
}

.secao2__bg-stars {
  position: absolute;
  inset: -4% -2%;
  width: 104%;
  height: 108%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.04);
  filter: brightness(0.7) saturate(0.9) blur(1px);
}

.linhaVetorial svg {
  position: absolute;
  width: 110vw;
  top: 8%;
  left: -3vw;
  height: 92%;
  transform: translateY(2px);
}

.marquee {
  position: relative;
  width: 100%;
  height: 30vw;
  overflow: hidden;
  position: absolute;
  top: -15vw;
  left: 0;
}

.marquee-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template: 1fr / 1fr;
}

.marquee-bg-svg {
  color: #c71729;
  grid-area: 1/1;
  z-index: 0;
}

.marquee-text-svg {
  z-index: 1;
  grid-area: 1/1;
}

.marquee-text-svg text {
  fill: var(--bg-light);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  font-size: 5rem;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  user-select: none;
}

.marquee-inner svg {
  backface-visibility: hidden;
}


.marquee-overlay {
  z-index: -1;
  background-color: #0a1628;
  clip-path: polygon(66% 40%, 100% 50%, 100% 100%, 0 100%, 0 50%);
  grid-area: 1/1;
  position: relative;
  bottom: 0px;
}

.beneficiosGrid {
  position: relative;
  z-index: 9;
  max-width: 1180px;
  margin: clamp(44px, 4vw, 88px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(56px, 5.2vw, 96px);
  row-gap: clamp(220px, 16vw, 320px);
  align-items: start;
}

.beneficioCard {
  --accent: #1b5fc8;
  --accent-soft: rgba(27, 95, 200, 0.12);
  position: relative;
  min-height: clamp(270px, 22.4vw, 336px);
  padding: clamp(30px, 2.65vw, 46px);
  border-radius: clamp(26px, 2.2vw, 40px);
  background: rgba(255, 255, 255, 0.95);
  color: #18202d;
  border: 1px solid rgba(11, 19, 31, 0.05);
  box-shadow: 0 24px 70px rgba(18, 25, 38, 0.12);
  overflow: hidden;
  will-change: transform, opacity;

  &::before {
    content: "";
    position: absolute;
    inset: auto -18% -38% auto;
    width: clamp(150px, 18vw, 240px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent-soft);
  }

  &::after {
    content: "";
    position: absolute;
    left: clamp(28px, 2.4vw, 42px);
    right: clamp(28px, 2.4vw, 42px);
    bottom: clamp(22px, 1.8vw, 32px);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), transparent 78%);
    opacity: 0.2;
  }

  h3,
  p,
  .beneficioCard__badge {
    position: relative;
    z-index: 2;
  }

  h3 {
    margin: 0;
    max-width: 14ch;
    font-size: clamp(30px, 2.45vw, 44px);
    line-height: 0.96;
    letter-spacing: -0.05em;
    font-weight: 700;
  }

  p {
    margin: 18px 0 0;
    max-width: 35ch;
    font-size: clamp(16px, 1.12vw, 19px);
    line-height: 1.6;
    color: rgba(24, 32, 45, 0.82);
  }
}

.beneficioCard__badge {
  width: clamp(80px, 6.2vw, 116px);
  height: clamp(80px, 6.2vw, 116px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(8, 13, 22, 0.06);
  box-shadow: 0 12px 26px rgba(12, 17, 29, 0.14);
  margin-bottom: clamp(24px, 2vw, 34px);
  transform-origin: center;
  will-change: transform, opacity;
}

.beneficioCard__icon {
  display: block;
  width: 58%;
  height: 58%;
  object-fit: contain;
}

.beneficioCard--fidelidade {
  --accent: #1b5fc8;
  --accent-soft: rgba(27, 95, 200, 0.12);

  .beneficioCard__icon {
    filter: invert(19%) sepia(92%) saturate(2724%) hue-rotate(207deg)
      brightness(91%) contrast(99%);
  }
}

.beneficioCard--streaming {
  --accent: #ff4f7f;
  --accent-soft: rgba(255, 79, 127, 0.13);
  margin-top: clamp(280px, 20vw, 420px);

  .beneficioCard__icon {
    width: 74%;
    height: 34%;
    filter: invert(25%) sepia(84%) saturate(2300%) hue-rotate(314deg)
      brightness(104%) contrast(102%);
  }
}

.beneficioCard--plataforma {
  --accent: #1b3d7a;
  --accent-soft: rgba(27, 61, 122, 0.11);
  grid-column: 1 / -1;
  width: min(100%, 45rem);
  justify-self: center;
  transform: translateY(clamp(58px, 3.8vw, 84px));

  .beneficioCard__icon {
    filter: invert(19%) sepia(92%) saturate(2724%) hue-rotate(207deg)
      brightness(91%) contrast(99%);
  }

  h3,
  p {
    max-width: 100%;
  }
}

.beneficioCard--bradesco {
  --accent: #d5213b;
  --accent-soft: rgba(213, 33, 59, 0.12);
  transform: translateY(clamp(56px, 3.8vw, 86px));

  .beneficioCard__icon {
    filter: saturate(1.05);
  }
}

.beneficioCard--visa {
  --accent: #1a1d24;
  --accent-soft: rgba(26, 29, 36, 0.1);
  grid-column: 2 / 3;
  margin-top: clamp(340px, 24vw, 500px);

  .beneficioCard__icon {
    width: 76%;
    height: 32%;
    filter: grayscale(1) brightness(0.18);
  }
}

.secao3 {
  width: 100%;
  height: 70vh;
  max-height: 70vh;

  display: flex;
  flex-direction: column;
  gap: 3.2vw;
  background-color: rgba(255, 255, 255, 0);
  color: rgba(0, 0, 0, 0.85);
  position: relative;
  z-index: 2;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .conteudoSec3 {
    padding: 6% 8% 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    gap: 0.8vw;
  }

  .conteudoSec3 > h2:not(.secao3__titulo) {
    display: none;
  }

  .secao3__titulo {
    margin: 0;
    padding-top: clamp(16px, 1.5vw, 40px);
    padding-bottom: clamp(10px, 1vw, 20px);
    font-size: clamp(36px, 2.8vw, 58px);
    line-height: 1.1;
    letter-spacing: -0.055em;
    max-width: min(60rem, 74vw);
    text-align: center;
    text-wrap: balance;
  }
  .botaoSecao3 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    img {
      width: 6vw;
      transform: rotate(70deg);
      position: absolute;
      left: -70%;
    }
    button {
      background-color: #d5213b;
      color: white;
      border: none;
    }
  }

  .secao3__personagem {
    position: absolute;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    user-select: none;
  }

  .secao3__personagem--left {
    left: -5.8vw;
    width: clamp(360px, 32vw, 560px);
    bottom: -0.9vw;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.12));
  }

  .secao3__personagem--right {
    right: -5vw;
    width: clamp(460px, 40vw, 760px);
    bottom: -0.6vw;
    filter: drop-shadow(0 22px 42px rgba(0, 0, 0, 0.14));
  }

  footer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: end;
    margin-top: auto;
    padding-bottom: 2.9vw;
    position: relative;
    z-index: 2;

    .devArt {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 0;
      flex: 0 1 auto;

      .logotipo {
        display: flex;
        gap: clamp(6px, 0.42vw, 10px);
        align-items: center;

        margin-bottom: 1.1vw;

        img {
          width: clamp(70px, 5.15vw, 96px);
        }

        h3 {
          font-size: clamp(24px, 1.55vw, 30px);
          margin-bottom: 0;
          line-height: 0.98;
        }
        p {
          font-size: clamp(16px, 1vw, 20px);
          line-height: 1.08;
        }
        div {
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 0.18rem;
        }
      }
    }
  }
}

.creditos {
  font-size: clamp(14px, 0.92vw, 18px);
  text-align: center;
}

.secao2 + .secao3 {
  margin-top: -4px;
}

/* COMPARAR */

.compare-page {
  min-height: 100vh;
  position: relative;
  background-color: #06101f;
}

.compareBackdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.compareBackdrop__layer {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 0.6s ease;
}

.compareBackdrop__layer--blue {
  opacity: 1;
  background-image:
    linear-gradient(180deg, rgba(4, 10, 22, 0.44), rgba(4, 10, 22, 0.8)),
    url("assets/fundo estrelado azul.webp");
}

.compareBackdrop__layer--pink {
  opacity: 0;
  background-image:
    radial-gradient(circle at 24% 30%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(180deg, rgba(61, 14, 28, 0.3), rgba(61, 14, 28, 0.56)),
    url("assets/background rosa.svg");
  filter: blur(1px) saturate(1.02);
}

.compareBackdrop__layer--black {
  opacity: 0;
  background-image:
    linear-gradient(180deg, rgba(2, 4, 8, 0.26), rgba(2, 4, 8, 0.82)),
    url("assets/fundo estrelado preto.webp");
}

.compare-page.is-signature .compareBackdrop__layer--blue,
.compare-page.is-starwars .compareBackdrop__layer--blue {
  opacity: 0;
}

.compare-page.is-signature .compareBackdrop__layer--pink {
  opacity: 1;
}

.compare-page.is-starwars .compareBackdrop__layer--black {
  opacity: 1;
}

.compare-page header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  padding: 28px 8% 20px;
  background: linear-gradient(180deg, rgba(5, 12, 24, 0.8), rgba(5, 12, 24, 0.18));
  backdrop-filter: blur(18px);
}

.compare-page header nav,
.compare-page header .brandSlot,
.compare-page header .headerActions {
  flex: 0 0 auto;
}

.compare-page header nav {
  position: absolute;
  left: 50%;
  top: calc(50% + 5px);
  transform: translate(-50%, -50%);
  padding-left: 0;
}

.compare-page header .headerActions {
  margin-left: auto;
}

.compare-page .menuHamburguer {
  filter: brightness(0) invert(1);
}

.compareMain {
  min-height: 100vh;
  position: relative;
  z-index: 1;
  padding: 138px 8% 64px;
}

.compareHero {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  gap: clamp(18px, 2vw, 26px);
}

.compareHero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 34vw);
  align-items: end;
  gap: clamp(18px, 2.6vw, 40px);
}

.compareIntro {
  max-width: 48rem;

  h1 {
    font-size: clamp(38px, 3.3vw, 60px);
    line-height: 0.96;
    letter-spacing: -0.06em;
    max-width: 10ch;
  }

  p {
    margin-top: 12px;
    max-width: 30ch;
    font-size: clamp(18px, 1.28vw, 24px);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.76);
  }
}

.compareCharacter {
  position: relative;
  min-height: clamp(240px, 26vw, 380px);
}

.compareCharacter__image {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(220px, 27vw, 410px);
  max-height: 100%;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0;
  transform: translate3d(18px, 10px, 0) scale(0.98);
  transition: opacity 0.45s ease, transform 0.45s ease;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.22));
  animation: compareFloat 5.5s ease-in-out infinite;
  animation-play-state: paused;
}

.compareCharacter__image[data-character-key="signature"] {
  width: clamp(220px, 24vw, 360px);
}

.compareCharacter__image[data-character-key="starwars"] {
  width: clamp(220px, 30vw, 450px);
  animation-duration: 6.2s;
}

.compareCharacter__image[data-character-key="infinite"] {
  animation-duration: 5.8s;
}

.compareCharacter__image.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  animation-play-state: running;
}

@keyframes compareFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(0, -10px, 0) scale(1.01);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.compareIntro__eyebrow {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.compareBoard {
  padding: clamp(16px, 1.8vw, 28px);
  border-radius: clamp(26px, 2.2vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(6, 14, 32, 0.46);
  backdrop-filter: blur(22px);
  box-shadow: 0 28px 90px rgba(1, 10, 24, 0.4);
}

.compareTableWrap {
  overflow-x: auto;
  padding-bottom: 8px;
}

.compareTable {
  width: 100%;
  min-width: 1020px;
  border-collapse: separate;
  border-spacing: 0;

  th,
  td {
    padding: 22px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: middle;
  }

  thead th {
    background: rgba(255, 255, 255, 0.04);
  }

  tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    background: rgba(8, 18, 35, 0.92);
    backdrop-filter: blur(16px);
  }

  thead tr > :first-child {
    z-index: 6;
    border-top-left-radius: 28px;
  }

  thead tr > :last-child {
    border-top-right-radius: 28px;
  }

  tbody tr:last-child > :first-child {
    border-bottom-left-radius: 28px;
  }

  tbody tr:last-child > :last-child {
    border-bottom-right-radius: 28px;
  }

  tbody th {
    width: 290px;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.84);
  }

  td {
    min-width: 220px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.84);
    font-size: 15px;
    line-height: 1.55;
  }
}

.compareTable__featureCell {
  min-width: 290px;
  text-align: left;

  strong {
    display: block;
    max-width: 12ch;
    font-size: clamp(26px, 1.9vw, 36px);
    line-height: 1.06;
    letter-spacing: -0.05em;
  }

  p {
    margin-top: 14px;
    max-width: 30ch;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.66);
  }
}

.compareTable__eyebrow {
  display: inline-flex;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.compareCardHead {
  width: 100%;
  min-height: 250px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 14px 18px;
  text-align: center;
  box-shadow: inset 0 0 0 1px transparent;
}

.compareCardSelector {
  width: 100%;
  min-height: 146px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  padding: 16px 10px 12px;
  box-shadow: inset 0 0 0 1px transparent;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
  cursor: pointer;

  img {
    width: min(100%, 180px);
    object-fit: contain;
    filter: drop-shadow(20px 26px 24px rgba(0, 0, 0, 0.28));
  }

  &:hover,
  &.is-active {
    transform: translateY(-4px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
    box-shadow:
      inset 0 0 0 1px var(--compare-accent),
      0 24px 40px rgba(2, 10, 22, 0.34);
  }
}

.compareCardCta {
  margin-top: -6px;
  align-self: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #d5213b;
  color: #ffffff;
  border-color: rgba(213, 33, 59, 1);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
}

.compareCardHead__title {
  font-size: clamp(18px, 1.35vw, 24px);
  font-weight: 600;
  line-height: 1.08;
}

.compareCardHead small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compareCardHead .botaoPrimario:hover {
  background-color: #eb2f4d;
  border-color: #eb2f4d;
  color: #ffffff;
}

[data-card-key].is-selected {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 0 0 1px var(--compare-accent);
}

.compareValue {
  display: inline-flex;
}

.compareValue--price {
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1.04;
  letter-spacing: -0.05em;
  font-weight: 700;
  color: rgba(255, 255, 255, 1);
}

.compareDot,
.compareChip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
}

.compareDot::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-right: 8px;
  flex: 0 0 10px;
  border-radius: 50%;
}

.compareDot--on {
  background: rgba(76, 214, 139, 0.14);
  color: #e3fff0;

  &::before {
    background: #4cd68b;
    box-shadow: 0 0 0 4px rgba(76, 214, 139, 0.18);
  }
}

.compareDot--off {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.68);

  &::before {
    background: rgba(255, 255, 255, 0.26);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
  }
}

.compareChip {
  background: rgba(122, 167, 255, 0.14);
  color: #e8f1ff;
  border: 1px solid rgba(122, 167, 255, 0.24);
}

.compareNotes {
  display: none;
}

.compare-page .secao3 {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  z-index: 1;
}

/* MEDIA QUERIES */

@media screen and (max-width: 820px) {
  .secao2 + .secao3 {
    margin-top: -6px;
  }

  header {
    padding: 5%;

    nav {
      display: none;
    }

    .headerActions {
      display: none;
    }

    .brandSlot {
      display: flex;
    }

    .menuHamburguer {
      display: block;
    }
  }

  .botaoPrimario {
    border-radius: 4px;
    padding: 16px 24px;
  }

  .slide {
    flex-wrap: wrap;
    padding: 110px 0 0;
    align-items: flex-start;
    justify-content: flex-start;

    .imgCirc {
      position: absolute;
      left: -43vw;
      top: auto;
      bottom: -12vw;
      width: 58vw;
      height: 58vw;
      margin: 0;
      z-index: 0;
    }

    .produtos {
      position: absolute;
      left: 50%;
      right: auto;
      top: auto;
      bottom: 16vw;
      width: 78vw;
      min-width: 78vw;
      min-height: 42vw;
      justify-content: center;
      transform: translateX(-50%);
      margin-bottom: 0;
      z-index: 2;

      img {
        width: 41vw;
      }

      img:first-child {
        width: 52vw;
      }

      img:nth-child(2) {
        width: 36vw;
        right: -5vw;
        top: 9vw;
      }

      img:nth-child(3) {
        display: none;
      }
    }

    .conteudo {
      width: 100%;
      margin: 0 5%;
      min-height: auto;
      padding-bottom: 66vw;
      flex: auto;
      order: -1;
      z-index: 2;

      h1 {
        font-size: clamp(42px, 11vw, 66px);
        white-space: normal;
      }

      p {
        width: min(76vw, 23rem);
        min-height: auto;
        padding-bottom: 0;
      }

      .botaoPrimario {
        margin-top: 24px;
      }
    }
  }

  .navSlides {
    left: 5%;
    right: 5%;
    width: auto;
    justify-content: flex-end;
    gap: 0;
    bottom: 64vw;
    top: auto;

    .bullets {
      display: none;
    }

    .botoesNav {
      margin-top: 0;
    }
  }

  .slide:nth-child(2) {
    h1 {
      font-size: 11vw;
    }
  }

  .slide:nth-child(3) {
    h1 {
      font-size: clamp(42px, 11.5vw, 64px);
    }
  }

  .imgCirc__spark {
    width: 10px;
    height: 10px;
  }

  .imgCirc--signature .imgCirc__layer--poster {
    width: 50%;
    left: 44%;
    bottom: -3%;
  }

  .imgCirc--starwars .imgCirc__layer--deathstar {
    width: 44%;
    left: 6%;
  }

  .imgCirc--starwars .imgCirc__layer--vader {
    width: 96%;
    left: 13%;
    bottom: -4%;
  }

  .linhaVetorial svg{
    bottom: 0;
    top: auto;
    left: -16vw;
    width: 150vw;
    transform: translateY(2px);
  }

  .secao3{
    min-height: auto;
    padding: 16% 0 9%;
    

    .secao3__titulo{
      font-size: clamp(40px, 9vw, 66px);
      max-width: 84vw;
    }

    .botaoSecao3{
      flex-direction: column;
      gap: 4px;
      margin-top: 12px;
      img{
        position: relative;
        left: auto;
        transform: rotate(150deg);
        width: 10vw;
      }

      .botaoPrimario{
        margin: auto;
      }
    }

    .secao3__personagem--left{
      width: 31vw;
      left: -4vw;
      bottom: 10vw;
      opacity: 0.72;
    }

    .secao3__personagem--right{
      width: 30vw;
      right: -6vw;
      bottom: 11vw;
      opacity: 0.66;
    }

    footer{
      justify-content: center;
      padding-bottom: 0;

      .devArt .logotipo{
        gap: 2.6vw;
        margin-bottom: 3vw;
        img{
          width: 14vw;
        }
        h3{
          font-size: clamp(18px, 4.6vw, 28px);
        }
        p{
          font-size: clamp(13px, 3vw, 18px);
        }
      }
    }
  }
  .creditos{
    display: block;
    font-size: clamp(14px, 3.3vw, 18px);
    padding: 0 8vw;
  }

  .compare-page {
    background-color: #06101f;
  }

  .compareMain {
    padding: 124px 5% 46px;
  }

  .compareHero__top {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .compareIntro {
    h1 {
      font-size: clamp(36px, 8.6vw, 54px);
      max-width: 9ch;
    }

    p {
      max-width: 24ch;
      font-size: clamp(15px, 4vw, 18px);
    }
  }

  .compareCharacter {
    min-height: 140px;
  }

  .compareCharacter__image {
    right: 2vw;
    width: min(50vw, 210px);
  }

  .compareBoard {
    padding: 14px;
    border-radius: 24px;
  }

  .compareTable {
    min-width: 880px;

    th,
    td {
      padding: 18px 16px;
    }

    tbody th,
    .compareTable__featureCell {
      min-width: 220px;
      width: 220px;
    }
  }

  .compareCardHead {
    min-height: 236px;
    border-radius: 20px;

    gap: 10px;
  }

  .compareCardSelector {
    min-height: 126px;

    img {
      width: min(100%, 146px);
    }
  }

  .compareCardCta {
    padding: 9px 16px;
    font-size: 13px;
  }

  .secao2 {
    min-height: auto;
    padding: 10% 5% calc(120px + 10vw);
  }

  .beneficiosGrid {
    margin-top: clamp(20px, 6vw, 40px);
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .beneficioCard,
  .beneficioCard--streaming,
  .beneficioCard--plataforma,
  .beneficioCard--bradesco,
  .beneficioCard--visa {
    width: 100%;
    min-height: auto;
    grid-column: auto;
    justify-self: stretch;
    transform: none;
    margin-top: 0;
  }

  .beneficioCard {
    padding: 22px 20px 26px;
    border-radius: 22px;

    h3 {
      max-width: none;
      font-size: clamp(28px, 7.2vw, 42px);
    }

    p {
      max-width: none;
      font-size: clamp(15px, 3.9vw, 18px);
    }
  }

  .beneficioCard__badge {
    width: 74px;
    height: 74px;
    margin-bottom: 18px;
  }
}