/* ════════════════════════════════════════════════════════════════════
   CAMADA-MED · V87 SHORTCUTS GLASS
   Réplica do cartão do vídeo iOS Atalhos: lâmina de vidro escuro,
   cantos amplos, brilho percorrendo a borda em movimento lento e
   constante, frases alternando com fade, inclinação interativa.
   + Tira "Por dentro do material" com páginas reais.
════════════════════════════════════════════════════════════════════ */

/* ── LÂMINA DE VIDRO (o cartão do vídeo) ─────────────────────────── */
.v87-stage{ display:flex; justify-content:center; margin:24px 0 4px; perspective:1000px; }
.v87-glass{
  position:relative;
  width:100%; max-width:560px; min-height:188px;
  border-radius:46px;
  padding:46px 32px;
  display:flex; flex-direction:column; justify-content:center; gap:15px;
  text-align:center;
  background:
    radial-gradient(150% 100% at 50% -25%, rgba(96,112,104,.5), transparent 55%),
    radial-gradient(120% 80% at 50% 130%, rgba(40,52,46,.55), transparent 60%),
    linear-gradient(168deg, #17201C 0%, #0C1310 55%, #080D0B 100%);
  border:1px solid rgba(255,255,255,.055);
  box-shadow:
    0 34px 80px -32px rgba(0,0,0,.7),
    0 0 64px -20px rgba(231,199,102,.28),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -18px 40px -24px rgba(0,0,0,.6);
  transform-style:preserve-3d;
  will-change:transform;
}
/* anel de luz percorrendo a borda (conic + mask, ângulo animado via JS) */
.v87-glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1.6px; pointer-events:none;
  background: conic-gradient(from var(--v87a,0deg),
    transparent 0deg,
    rgba(255,255,255,.9) 12deg,
    rgba(251,239,196,.95) 24deg,
    rgba(255,255,255,.45) 38deg,
    transparent 72deg,
    transparent 158deg,
    rgba(231,199,102,.55) 196deg,
    rgba(255,255,255,.3) 214deg,
    transparent 252deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  filter: drop-shadow(0 0 10px rgba(251,239,196,.4));
}
/* luz suave descendo do topo (como no vídeo) */
.v87-glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(60% 42% at 50% 0%, rgba(255,255,255,.10), transparent 70%);
}
.v87-title{
  margin:0;
  font-family:Inter,-apple-system,sans-serif;
  font-weight:600;
  font-size:clamp(19px, 4.8vw, 24px);
  line-height:1.3;
  letter-spacing:-.012em;
  color:#F2EFE6;
}
.v87-sub{
  margin:0;
  font-family:Inter,-apple-system,sans-serif;
  font-weight:400;
  font-size:clamp(14px, 3.7vw, 16.5px);
  line-height:1.45;
  color:#BDB8AA;
  transition:opacity .42s ease, transform .42s ease;
}
.v87-sub.v87-out{ opacity:0; transform:translateY(9px); }

/* ── POR DENTRO DO MATERIAL: páginas reais ──────────────────────── */
.v87-inside-sec{ padding:30px 22px 26px !important; margin-bottom:18px; }
.v87-pages{
  display:flex; gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px 4px 16px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.v87-pages::-webkit-scrollbar{ display:none; }
.v87-pages figure{
  flex:0 0 60%; max-width:238px; margin:0;
  scroll-snap-align:center;
  background:#FFFFFF;
  border-radius:14px;
  padding:7px 7px 10px;
  box-shadow:
    0 16px 36px -16px rgba(14,42,36,.5),
    0 0 0 1px rgba(184,134,42,.28),
    inset 0 1px 0 rgba(255,255,255,.9);
  transform:rotate(-1.2deg);
  transition:transform .25s ease;
}
.v87-pages figure:nth-child(even){ transform:rotate(1.3deg); }
.v87-pages figure:hover{ transform:rotate(0) scale(1.03); }
.v87-pages img{ width:100%; display:block; border-radius:9px; }
.v87-pages figcaption{
  padding-top:8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:#5A6B62; text-align:center; line-height:1.4;
}

/* ── acessibilidade ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .v87-sub{ transition:none !important; }
  .v87-glass{ transform:none !important; }
}


/* ── LIGHTBOX: popup de visualização das páginas com zoom ───────── */
.v87-pages figure{ cursor: zoom-in; }
.v87-lb{
  position:fixed; inset:0; z-index:99999;
  background: rgba(6,12,10,.88);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  display:flex; align-items:center; justify-content:center;
  padding:22px; overflow:auto;
  animation: v87lbIn .22s ease;
}
@keyframes v87lbIn{ from{opacity:0} to{opacity:1} }
.v87-lb img{
  max-width:min(92vw, 880px); max-height:86vh;
  border-radius:12px;
  box-shadow: 0 30px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(231,199,102,.4), 0 0 60px -10px rgba(231,199,102,.35);
  transition: transform .3s ease;
  cursor: zoom-in;
  touch-action: pinch-zoom;
}
.v87-lb img.v87-zoom{ transform: scale(2.1); cursor: zoom-out; }
.v87-lb .v87-x{
  position:fixed; top:16px; right:16px; z-index:2;
  width:46px; height:46px; border-radius:999px;
  background: rgba(251,239,196,.14);
  border:1px solid rgba(231,199,102,.55);
  color:#FBEFC4; font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 0 rgba(251,239,196,.3), 0 0 22px -6px rgba(231,199,102,.6);
  cursor:pointer;
}
.v87-lb .v87-hint{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(242,233,216,.75); white-space:nowrap;
}


/* ── ANEL DE LUZ VIAJANTE em todos os cartões e botões ──────────── */
.v87-ring{
  position:absolute; inset:0; border-radius:inherit;
  padding:1.5px; pointer-events:none; z-index:3;
  background: conic-gradient(from var(--ring-a,0deg),
    transparent 0deg,
    rgba(255,255,255,.9) 10deg,
    rgba(231,199,102,.95) 22deg,
    rgba(255,255,255,.45) 34deg,
    transparent 66deg,
    transparent 168deg,
    rgba(231,199,102,.55) 198deg,
    rgba(255,255,255,.28) 214deg,
    transparent 244deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  filter: drop-shadow(0 0 9px rgba(231,199,102,.5));
  opacity:.95;
}
/* botões: anel mais fino e brilhante */
.v70-gold-btn > .v87-ring{ padding:1.6px; filter: drop-shadow(0 0 15px rgba(251,239,196,.92)); }
.v70-btn.v70-secondary{ position:relative; }
.v70-btn.v70-secondary > .v87-ring{ padding:1.35px; opacity:.9; }

@media (prefers-reduced-motion: reduce){
  .v87-ring{ opacity:.45; } /* anel estático suave */
}


/* ── CTA dentro da lâmina + depoimentos rotativos ────────────────── */
.v87-cta{
  align-self:center; display:inline-block; margin-top:8px;
  padding:13px 24px; border-radius:999px;
  font-family:Inter,sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.12em; text-decoration:none; color:#241804 !important;
  background: linear-gradient(163deg, #FDF4CF 0%, #F2DE9A 26%, #DDB456 62%, #B8862A 100%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.95),
    inset 0 -3px 7px rgba(122,84,18,.42),
    0 8px 24px -8px rgba(184,134,42,.75),
    0 0 30px -4px rgba(251,239,196,.95);
  transition: transform .22s cubic-bezier(.2,.9,.3,1.4);
}
.v87-cta:hover{ transform: translateY(-2px) scale(1.015); }
.v87-cta:active{ transform: scale(.98); }
.v87-stars{
  font-size:14px; letter-spacing:.2em; text-align:center;
  background: linear-gradient(135deg,#B8862A,#E7C766,#FBEFC4);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 8px rgba(231,199,102,.5));
}
.v87-testi{ display:flex; flex-direction:column; gap:8px; }
.v87-a{
  font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.11em; text-transform:uppercase; color:#96A29A;
  transition: opacity .42s ease, transform .42s ease;
}
.v87-a.v87-out{ opacity:0; transform:translateY(9px); }