/* ═══════════════════════════════════════════════════════════════
   MASTERCARD BLACK — CARTÕES PAGE
   Experiência de vídeo premium · 100vw × 100vh · sem scroll
   ═══════════════════════════════════════════════════════════════ */

/* ── Garante sem scroll em qualquer largura de notebook ── */
html,
body {
  overflow: hidden !important;
}

/* ── Neutraliza o canvas azulado do main.js na página cartões ── */
#bg-canvas {
  opacity: 0.12;
}

/* Override do breakpoint responsivo do style.css que força overflow:auto */
@media (max-width: 860px) {
  html,
  body {
    overflow: hidden !important;
  }
}

/* ════════════════════════════════
   WRAPPER PRINCIPAL
   ════════════════════════════════ */
.ct-wrap {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ════════════════════════════════
   HEADER
   ════════════════════════════════ */
.ct-header {
  flex-shrink: 0;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  border-bottom: 1px solid rgba(201, 169, 110, 0.10);
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.92) 0%,
    rgba(10, 10, 10, 0.20) 100%
  );
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  position: relative;
  z-index: 20;
}

/* Logo como link — herda estilos do style.css, só adiciona hover */
.ct-header .mc-logo {
  text-decoration: none;
  flex: 1;
  opacity: 0.88;
  transition: opacity 0.25s ease;
}

.ct-header .mc-logo:hover {
  opacity: 1;
}

/* Badge central */
.ct-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 20px;
  border: 1px solid rgba(201, 169, 110, 0.22);
  border-radius: 100px;
  background: rgba(201, 169, 110, 0.045);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
}

.ct-badge span {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

/* Espaçador espelho para centralizar o badge */
.ct-header-spacer {
  flex: 1;
}

/* ════════════════════════════════
   LAYOUT PRINCIPAL (linha)
   ════════════════════════════════ */
.ct-main {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 24px 40px 118px;
  position: relative;
  z-index: 10;
}

/* ════════════════════════════════
   COLUNA DO VÍDEO
   ════════════════════════════════ */
.ct-video-col {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Halo de glow por fora do frame (não causa overflow de página) */
.ct-video-halo {
  position: absolute;
  inset: -20px;
  border-radius: 28px;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    rgba(201, 169, 110, 0.07) 0%,
    transparent 70%
  );
  pointer-events: none;
  animation: halo-breathe 6s ease-in-out infinite;
}

@keyframes halo-breathe {
  0%, 100% { opacity: 0.6; transform: scale(0.98); }
  50%       { opacity: 1;   transform: scale(1.02); }
}

/* ── Frame principal do vídeo ── */
.ct-video-frame {
  position: relative;
  /* Proporção 16:9 — respeita o espaço disponível sem vazar */
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100%;
  /* Se a altura for o fator limitante, reduz a largura proporcionalmente */
  max-width: calc(100% * 16 / 9);
  margin: auto;
  border-radius: 18px;
  overflow: hidden;

  /* Borda dourada */
  border: 1px solid rgba(201, 169, 110, 0.22);

  /* Sombra premium em camadas */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.028),
    0 0 70px rgba(201, 169, 110, 0.09),
    0 20px 70px rgba(0, 0, 0, 0.88),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);

  /* Pulso suave da borda dourada */
  animation: frame-glow 5s ease-in-out infinite;
}

@keyframes frame-glow {
  0%, 100% {
    border-color: rgba(201, 169, 110, 0.18);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.025),
      0 0 55px rgba(201,169,110,0.07),
      0 20px 70px rgba(0,0,0,0.88),
      inset 0 1px 0 rgba(255,255,255,0.05);
  }
  50% {
    border-color: rgba(201, 169, 110, 0.48);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.04),
      0 0 90px rgba(201,169,110,0.20),
      0 20px 70px rgba(0,0,0,0.88),
      inset 0 1px 0 rgba(255,255,255,0.08);
  }
}

/* O elemento <video> */
.ct-video-frame video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Cantos dourados decorativos ── */
.vf-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 10;
  pointer-events: none;
  /* Leve pulso nos cantos em sincronia com o frame */
  animation: frame-glow 5s ease-in-out infinite;
}

.vf-corner.tl {
  top: 14px;
  left: 14px;
  border-top: 1.5px solid var(--gold-light);
  border-left: 1.5px solid var(--gold-light);
  border-radius: 3px 0 0 0;
}
.vf-corner.tr {
  top: 14px;
  right: 14px;
  border-top: 1.5px solid var(--gold-light);
  border-right: 1.5px solid var(--gold-light);
  border-radius: 0 3px 0 0;
}
.vf-corner.bl {
  bottom: 14px;
  left: 14px;
  border-bottom: 1.5px solid var(--gold-light);
  border-left: 1.5px solid var(--gold-light);
  border-radius: 0 0 0 3px;
}
.vf-corner.br {
  bottom: 14px;
  right: 14px;
  border-bottom: 1.5px solid var(--gold-light);
  border-right: 1.5px solid var(--gold-light);
  border-radius: 0 0 3px 0;
}

/* ── Scanlines sutis (aparência cinematográfica) ── */
.vf-scanlines {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.045) 3px,
    rgba(0, 0, 0, 0.045) 4px
  );
}

/* ── Vignette nas bordas (profundidade) ── */
.vf-vignette {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    transparent 55%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

/* ── Glow dourado na base (luxo) ── */
.vf-gold-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28%;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(201, 169, 110, 0.07) 0%,
    transparent 100%
  );
}

/* ════════════════════════════════
   COLUNA DO QR CODE
   ════════════════════════════════ */
.ct-qr-col {
  flex-shrink: 0;
  width: 196px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Card do QR — mesmo DNA dos nav-btn do index ── */
.ct-qr-card {
  position: relative;
  width: 100%;
  padding: 26px 20px 22px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  z-index: 0;

  /* Fundo metálico idêntico ao nav-btn */
  background: linear-gradient(
    150deg,
    #252528 0%,
    #181820 45%,
    #111114 75%,
    #1c1c20 100%
  );

  box-shadow:
    0 14px 50px rgba(0, 0, 0, 0.75),
    0 3px 10px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* Borda giratória dourada (análoga ao spin-border do index) */
.ct-qr-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    transparent 50deg,
    rgba(161, 120, 64, 0.7)  80deg,
    rgba(201, 169, 110, 0.95) 98deg,
    rgba(232, 201, 138, 1)    106deg,
    rgba(201, 169, 110, 0.95) 114deg,
    rgba(161, 120, 64, 0.7)  130deg,
    transparent 160deg,
    transparent 360deg
  );
  animation: spin-border 5.5s linear infinite;
  z-index: -1;
}

/* Máscara interna (igual ao nav-btn::after) */
.ct-qr-card::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: 21px;
  background: linear-gradient(
    150deg,
    #252528 0%,
    #181820 45%,
    #111114 75%,
    #1c1c20 100%
  );
  z-index: -1;
}

/* ── Mini logo Mastercard no topo do card ── */
.qrc-mc-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}

/* ── Linhas de acento douradas ── */
.qrc-line {
  width: 44px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold) 40%,
    var(--gold) 60%,
    transparent
  );
  flex-shrink: 0;
  opacity: 0.6;
}

/* ── Eyebrow text ── */
.qrc-eyebrow {
  font-size: 8.5px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin: 0;
}

/* ── Caixa branca do QR ── */
.qrc-box-outer {
  padding: 10px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(201, 169, 110, 0.30),
    0 0 26px rgba(201, 169, 110, 0.18),
    0 6px 20px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

/* Força o canvas/img do QRCode a ter display:block */
#qr-code canvas,
#qr-code img {
  display: block;
  border-radius: 3px;
}

/* ── Divisor com diamante ── */
.qrc-divider {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 6px;
}

.qrc-div-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 169, 110, 0.28)
  );
}

.qrc-div-line:last-child {
  background: linear-gradient(
    90deg,
    rgba(201, 169, 110, 0.28),
    transparent
  );
}

.qrc-diamond {
  font-size: 6.5px;
  color: var(--gold);
  opacity: 0.65;
  flex-shrink: 0;
}

/* ── Rótulo "Acesse aqui" ── */
.qrc-label {
  font-family: 'Playfair Display', serif;
  font-size: 15.5px;
  font-weight: 400;
  color: var(--white-soft);
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0;
}

/* ── URL exibida ── */
.qrc-url {
  font-size: 8px;
  color: rgba(240, 237, 232, 0.38);
  letter-spacing: 0.10em;
  text-align: center;
  word-break: break-all;
  margin: 0;
  line-height: 1.4;
}

/* ════════════════════════════════
   FADE-UP — delay extra para QR
   (d4 não existe no style.css)
   ════════════════════════════════ */
.d4 {
  animation-delay: 0.75s;
}

/* ════════════════════════════════
   BOTÃO RETORNAR — sutil, canto
   ════════════════════════════════ */
.ct-back-btn {
  position: fixed;
  bottom: 28px;
  left: 32px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 10px;
  border-radius: 100px;
  text-decoration: none;
  border: 1px solid rgba(201, 169, 110, 0.18);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: rgba(240, 237, 232, 0.42);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.25s ease,
    box-shadow 0.3s ease;
}

.ct-back-btn:hover {
  color: var(--gold-light);
  border-color: rgba(201, 169, 110, 0.45);
  background: rgba(20, 18, 14, 0.75);
  transform: translateX(-2px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}

.ct-back-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: inherit;
  transition: transform 0.25s ease;
}

.ct-back-btn:hover .ct-back-icon {
  transform: translateX(-2px);
}

/* ════════════════════════════════
   BARRA DE PROGRESSO — TIMER 45s
   ════════════════════════════════ */
.ct-timer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(201, 169, 110, 0.08);
  z-index: 60;
  overflow: hidden;
}

.ct-timer-fill {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    rgba(201, 169, 110, 0.25) 0%,
    rgba(201, 169, 110, 0.55) 50%,
    rgba(232, 201, 138, 0.70) 100%
  );
  box-shadow: 0 0 8px rgba(201, 169, 110, 0.4);
  /* A animação é controlada por JS via CSS custom property */
  transition: none;
}

/* ════════════════════════════════
   LINHA DOURADA HORIZONTAL
   no fundo da página (detalhe)
   ════════════════════════════════ */
.ct-wrap::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 169, 110, 0.18) 30%,
    rgba(201, 169, 110, 0.25) 50%,
    rgba(201, 169, 110, 0.18) 70%,
    transparent
  );
  pointer-events: none;
  z-index: 30;
}