/* Seção do QR Code com copy longa e visual do aplicativo. */
.qrcode-section {
  padding: 124px 0 118px;
  overflow: visible;
}

/* Shell principal no mesmo grid largo usado pelas demais seções. */
.qrcode-shell {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 623px 609px;
  grid-template-areas: "copy visual";
  align-items: center;
  justify-content: center;
  column-gap: 48px;
}

/* Coluna textual com título, corpo e CTA. */
.qrcode-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 623px;
}

/**
 * @class .qrcode-title
 * @description Título com gradiente ciano-violeta aplicado no texto inteiro. Strong tags controlam o peso.
 */
.qrcode-title {
  width: 598px;
  margin: 0;
  background: linear-gradient(165.56deg, #57d4ff 0%, #845cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.356;
  letter-spacing: 0.76px;
}

/**
 * @class .qrcode-title strong
 * @description Palavras destacadas dentro do título, mantém o gradiente mas com peso bold.
 */
.qrcode-title strong {
  font-weight: 700;
}

/**
 * @class .qrcode-body
 * @description Container para os parágrafos descritivos da seção.
 */
.qrcode-body {
  width: 623px;
  color: #64748b;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.47;
}

.qrcode-body p {
  margin: 0;
}

.qrcode-body p+p {
  margin-top: 29px;
}

.qrcode-body strong {
  font-weight: 700;
}

/**
 * @class .qrcode-cta
 * @description CTA escuro mantendo a largura do componente do Figma.
 */
.qrcode-cta {
  justify-self: start;
}

.qrcode-cta__label {
  width: 240px;
}

/**
 * @class .qrcode-visual
 * @description Composição visual principal contendo o backdrop, card do QR e o mockup.
 */
.qrcode-visual {
  grid-area: visual;
  position: relative;
  width: 609px;
  height: 720px;
  overflow: visible;
}

/**
 * @class .qrcode-backdrop
 * @description Superfície roxa arredondada que serve de fundo para o visual.
 */
.qrcode-backdrop {
  position: absolute;
  left: 0;
  top: 21.944%;
  z-index: 0;
  width: 76.355%;
  height: 71.806%;
  border-radius: 69px;
  background: #845cff;
}

/**
 * @class .qrcode-card
 * @description Cartão branco que abriga o código QR, posicionado em overlay parcial sobre o celular.
 */
.qrcode-card {
  position: absolute;
  left: 57.964%;
  top: 29.722%;
  z-index: 1;
  width: 42.036%;
  height: 30.278%;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/**
 * @class .qrcode-phone-frame
 * @description Moldura do iPhone Pro com overflow controlado para enquadrar o mockup.
 */
.qrcode-phone-frame {
  position: absolute;
  left: -4.5%;
  bottom: 6.25%;
  z-index: 3;
  width: 76.373%;
  height: 90.438%;
  overflow: hidden;
  border-radius: 49.247px;
}

/**
 * @class .qrcode-phone
 * @description Imagem do celular com posicionamento preciso via porcentagem.
 */
.qrcode-phone {
  position: absolute;
  left: 28px;
  bottom: 0;
  z-index: 1;
  width: 94%;
  height: auto;
}

/**
 * @class .qrcode-swoosh
 * @description Detalhe visual (bracket amarelo) que emoldura o cartão do QR Code.
 */
.qrcode-swoosh {
  position: absolute;
  z-index: 4;
  left: 92.118%;
  top: 26.944%;
  width: 7.553%;
  height: 34.861%;
  display: block;
  transform: scaleX(-1);
  transform-origin: center;
}

/**
 * @class .qrcode-qr
 * @description Container para os pedaços do QR Code, reconstruído via SVGs.
 */
.qrcode-qr {
  position: relative;
  z-index: 2;
  width: 75.781%;
  aspect-ratio: 1;
}

/**
 * @class .qrcode-qr__piece
 * @description Estilo base para cada camada/pedaço do QR Code.
 */
.qrcode-qr__piece {
  position: absolute;
  display: block;
  image-rendering: crisp-edges;
  transform-origin: center;
}

.qrcode-qr__piece--base {
  inset: 0;
  width: 100%;
  height: 100%;
}

.qrcode-qr__piece--pattern {
  left: 10.714%;
  top: 10.714%;
  width: 78.571%;
  height: 78.571%;
}

.qrcode-qr__piece--finder-tl,
.qrcode-qr__piece--finder-tr,
.qrcode-qr__piece--finder-bl {
  width: 22%;
  height: 22%;
}

.qrcode-qr__piece--finder-tl {
  left: 10.714%;
  top: 10.714%;
}

.qrcode-qr__piece--finder-tr {
  left: 67.289%;
  top: 10.714%;
}

.qrcode-qr__piece--finder-bl {
  left: 10.714%;
  top: 67.289%;
}

.qrcode-qr__piece--inner-tl,
.qrcode-qr__piece--inner-tr,
.qrcode-qr__piece--inner-bl {
  width: 9.429%;
  height: 9.429%;
}

.qrcode-qr__piece--inner-tl {
  left: 16.998%;
  top: 16.998%;
}

.qrcode-qr__piece--inner-tr {
  left: 73.575%;
  top: 16.998%;
}

.qrcode-qr__piece--inner-bl {
  left: 16.998%;
  top: 73.575%;
}

/**
 * @media tablet
 * @description Empilha a seção em coluna com reordenação: título → visual → body → CTA.
 */
@media (max-width: 1180px) {
  .qrcode-section {
    padding: 98px 0 104px;
  }

  .qrcode-shell {
    width: min(720px, calc(100% - 48px));
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: none;
    column-gap: 0;
    gap: 32px;
    justify-items: center;
  }

  .qrcode-copy {
    display: contents;
  }

  .qrcode-title,
  .qrcode-body {
    width: 100%;
  }

  .qrcode-title {
    order: 1;
    max-width: 598px;
    font-size: 34px;
    letter-spacing: 0.68px;
    text-align: center;
  }

  .qrcode-visual {
    grid-area: auto;
    order: 2;
    width: min(100%, 480px);
    height: auto;
    aspect-ratio: 609 / 720;
  }

  .qrcode-backdrop {
    border-radius: 48px;
  }

  .qrcode-card {
    border-radius: 24px;
  }

  .qrcode-phone-frame {
    border-radius: 38px;
  }

  .qrcode-body {
    order: 3;
    max-width: 623px;
    font-size: 18px;
    text-align: center;
  }

  .qrcode-body p+p {
    margin-top: 24px;
  }

  .qrcode-cta {
    order: 4;
    margin: 0 auto;
  }
}

/**
 * @media mobile
 * @description Adapta o conjunto para uma coluna compacta com reordenação via display:contents.
 */
@media (max-width: 480px) {
  .qrcode-section {
    padding: 84px 0 96px;
  }

  .qrcode-shell {
    width: min(335px, calc(100% - 40px));
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    justify-items: center;
  }

  .qrcode-copy {
    display: contents;
  }

  .qrcode-title {
    order: 1;
    width: 100%;
    max-width: 313px;
    font-size: 28px;
    letter-spacing: 0.56px;
    text-align: center;
    margin: 0;
  }

  .qrcode-visual {
    grid-area: auto;
    order: 2;
    width: 100%;
    max-width: 313px;
    height: auto;
    aspect-ratio: 609 / 720;
    margin: 0;
  }

  .qrcode-backdrop {
    border-radius: 36px;
  }

  .qrcode-phone {
    left: 14px;
  }

  .qrcode-card {
    border-radius: 18px;
    top: 95px;
  }

  .qrcode-phone-frame {
    border-radius: 26px;
  }

  .qrcode-swoosh {
    width: 6%;
    height: 28%;
  }

  .qrcode-body {
    order: 3;
    width: 100%;
    max-width: 313px;
    font-size: 16px;
    text-align: center;
    margin: 0;
  }

  .qrcode-body p+p {
    margin-top: 19px;
  }

  .qrcode-cta {
    order: 4;
    width: 272.308px;
  }

  .qrcode-cta__label {
    width: 198.879px;
  }
}