/* Atmosfera + reskin da landing e do caso jogavel.
   Carrega por ultimo de proposito: tudo aqui precisa ganhar do sales.css e do
   lab-case.css sem !important, entao os seletores sobem especificidade com
   .sales-active / .lab-active.

   DUAS REGRAS QUE ORGANIZAM O ARQUIVO:
   1. 99% do publico e mobile, e no celular a margem da tela NAO EXISTE. Entao
      todo efeito tem que viver DENTRO da coluna, nao em volta dela.
   2. Paleta clara: dossie de papel envelhecido sobre cortica. Nada de azul. */

:root {
  --dd-papel: #f2e7cf;
  --dd-papel-fundo: #e7d8b8;
  --dd-tinta: #2f241a;
  --dd-tinta-fraca: #6d5c45;
  --dd-latao: #9a6f22;
  --dd-barbante: #b4342a;
}

/* ====================== a mesa de cortica ============================= */

body.dd-desk {
  background:
    radial-gradient(ellipse 55% 42% at 14% -4%, #ffdda688, transparent 66%),
    radial-gradient(circle at 22% 32%, #00000012 0 2px, transparent 2px),
    radial-gradient(circle at 68% 71%, #00000010 0 3px, transparent 3px),
    radial-gradient(circle at 44% 88%, #0000000e 0 2px, transparent 2px),
    linear-gradient(168deg, #c89a62 0%, #b1824c 48%, #91663a 100%);
  background-size: auto, 19px 19px, 27px 27px, 23px 23px, auto;
}

.dd-atmo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  contain: strict;
}
.dd-atmo-canvas { display: block; width: 100%; height: 100%; opacity: .55; }

/* grao de papel */
.dd-atmo::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* pegadas: tinta marrom, porque agora o fundo e claro */
.dd-props { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a versao de DENTRO da coluna: no celular a margem nao existe, entao as
   pegadas tem que atravessar o proprio papel */
.dd-props--inline { z-index: -1; pointer-events: none; }
.dd-props--inline .dd-pegada { fill: #4a3119; }
.lab-case .dd-props--inline .dd-pegada { fill: #f3dbae; }
.dd-pegada { fill: #3a2616; }

/* luz da luminaria */
.dd-luz {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background: radial-gradient(ellipse 60% 70% at 12% -8%, transparent 30%, #5b3a1a26 72%, #3c250f3d 100%);
}

body.dd-desk .experience { z-index: 1; }

/* ====================== o dossie de papel ============================= */

body.dd-desk .experience.sales-active {
  background:
    linear-gradient(180deg, #f6ecd6e8 0%, #efe3c9ea 60%, #e9dbbdee 100%);
  box-shadow: 0 0 90px -20px #3a230d80;
}

/* textura e manchas DENTRO da coluna -- isto e o que o celular ve */
.sales-active .pv-page {
  position: relative;
  isolation: isolate;
}
.sales-active .pv-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* mancha de cafe */
    radial-gradient(circle at 86% 8%, transparent 42px, #8a5a2a1f 43px, #8a5a2a2b 48px, transparent 49px),
    radial-gradient(circle at 12% 46%, transparent 30px, #8a5a2a16 31px, #8a5a2a22 35px, transparent 36px),
    /* papel velho nas bordas */
    radial-gradient(ellipse 100% 40% at 50% 0%, #c9a06a30, transparent 60%),
    radial-gradient(ellipse 100% 40% at 50% 100%, #c9a06a30, transparent 60%),
    /* pauta leve de caderno */
    repeating-linear-gradient(0deg, transparent 0 33px, #9a7a4a14 33px 34px);
}

/* vinheta por cima */
.sales-active .pv-page::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: radial-gradient(ellipse 66% 70% at 50% 45%, transparent 46%, #40240c4d 100%);
}

/* ====================== tipografia ==================================== */

.sales-active .pv-page {
  color: var(--dd-tinta);
  --pv-gold: var(--dd-latao);
  --pv-line: #9a6f2230;
}

.sales-active .pv-eyebrow,
.sales-active .pv-case-tag,
.sales-active .pv-caption-arrow,
.sales-active .pv-sticker-note,
.sales-active .pv-library-number strong { color: var(--dd-latao); }

.sales-active .pv-sales-title,
.sales-active .pv-section-heading,
.sales-active .pv-offer-heading,
.sales-active .pv-opening-title,
.sales-active .pv-case-card h2,
.sales-active .pv-case-card h3,
.sales-active .pv-drug-card h3,
.sales-active .pv-footer > strong { color: #241a12; }

.sales-active .pv-hero .pv-sales-title em { color: #a8341f; font-style: italic; }

.sales-active .pv-lead,
.sales-active .pv-section-copy,
.sales-active .pv-audience,
.sales-active .pv-case-copy p,
.sales-active .pv-case-copy small,
.sales-active .pv-case-included,
.sales-active .pv-drug-card > p,
.sales-active .pv-drug-card > small,
.sales-active .pv-drug-availability,
.sales-active .pv-method-row p,
.sales-active .pv-faq-item p,
.sales-active .pv-faq-item summary,
.sales-active .pv-footer p,
.sales-active .pv-footer small,
.sales-active .pv-sample-caption p,
.sales-active .pv-sample-caption small,
.sales-active .pv-sample-note,
.sales-active .pv-payment-note,
.sales-active .pv-checkout-note,
.sales-active .pv-offer-scope,
.sales-active .pv-no-renewal,
.sales-active .pv-includes li,
.sales-active .pv-includes li > span,
.sales-active .pv-swipe-hint,
.sales-active .pv-library-banner > div > p:last-child,
.sales-active .pv-library-number > span,
.sales-active .pv-stats span { color: var(--dd-tinta-fraca); }

.sales-active .pv-stats strong,
.sales-active .pv-price strong { color: #241a12; }

.sales-active .pv-play-badge { color: #fff6e2; }
.sales-active .pv-play-badge > span { text-shadow: 0 2px 10px #000, 0 0 22px #000; }
.sales-active .pv-play-badge > b {
  background: #3a2616ee;
  border-color: #f0cd7a;
  color: #ffe9b6;
  box-shadow: 0 6px 28px #00000088, 0 0 0 6px #9a6f2222;
}

/* ====================== barra do topo ================================= */

.sales-active .topbar {
  background: #f6ecd6e8;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid #9a6f2230;
}
.sales-active .wordmark { color: #241a12; }
.sales-active .wordmark .glass { color: var(--dd-barbante); }
.sales-active .sales-nav-demo { color: var(--dd-latao); }
.sales-active .sound { border-color: #9a6f2245; color: #241a12; }

/* ====================== papeis pregados =============================== */

.sales-active .pv-case-card,
.sales-active .pv-drug-card,
.sales-active .pv-sample-card,
.sales-active .pv-faq-item,
.sales-active .pv-demo-stage {
  background: linear-gradient(170deg, #fdf7e8 0%, #f4e9d0 100%);
  border: 1px solid #9a6f2238;
  box-shadow: 0 1px 0 #fffdf5 inset, 0 14px 26px -16px #4a2d1099;
  color: var(--dd-tinta);
  position: relative;
}

.sales-active .pv-case-grid > *:nth-child(odd) { transform: rotate(-.6deg); }
.sales-active .pv-case-grid > *:nth-child(even) { transform: rotate(.55deg); }
.sales-active .pv-drug-grid > *:nth-child(3n) { transform: rotate(.6deg); }
.sales-active .pv-drug-grid > *:nth-child(3n+2) { transform: rotate(-.5deg); }

/* alfinete */
.sales-active .pv-case-card::before,
.sales-active .pv-drug-card::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  z-index: 4;
  background: radial-gradient(circle at 34% 30%, #ff9384, #b3291b 58%, #6f170f);
  box-shadow: 0 3px 6px #00000055, 0 0 0 1px #00000030;
}

/* fita crepe */
.sales-active .pv-case-card::after,
.sales-active .pv-drug-card::after {
  content: '';
  position: absolute;
  top: -11px;
  right: 16px;
  width: 78px;
  height: 26px;
  z-index: 3;
  transform: rotate(7deg);
  background: linear-gradient(180deg, #e3d4ad99, #cbb98d99);
  border-left: 1px dashed #00000018;
  border-right: 1px dashed #00000018;
  box-shadow: 0 2px 5px #4a2d1040;
}

/* ---- barbante vermelho, mais grosso ---- */
.dd-barbante { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.dd-barbante-linha {
  fill: none;
  stroke: var(--dd-barbante);
  stroke-width: 3.4;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 2px #00000055);
}

.sales-active .pv-case-tag {
  background: #9a6f2216;
  border: 1px solid #9a6f2240;
  color: #7d5718;
}
.sales-active .pv-case-try,
.sales-active .pv-text-link {
  background: #fffdf5;
  border: 1px solid #9a6f2250;
  color: #7d5718;
}

/* ====================== botoes ======================================== */

.sales-active .pv-button {
  background: linear-gradient(180deg, #b4342a, #8c2419);
  border: 1px solid #d4594a;
  color: #fff4e8;
  box-shadow: 0 10px 20px -12px #8c2419b0, 0 1px 0 #ffffff40 inset;
}
.sales-active .pv-button:hover { background: linear-gradient(180deg, #c33f33, #9c2a1d); }
.sales-active .pv-button:active { box-shadow: 0 3px 10px -8px #8c2419b0 inset; }

/* checkout ainda nao existe (sales-offer.js: checkoutUrl null) */
.sales-active .pv-buy:disabled {
  background: #efe3c9;
  border: 1px dashed #9a6f2270;
  color: #6d5c45;
  box-shadow: none;
  opacity: 1;
}

/* ====================== oferta e detalhes ============================= */

.sales-active .pv-offer-card {
  background: linear-gradient(170deg, #fdf7e8 0%, #f2e6cb 100%);
  border: 2px solid #9a6f2255;
  box-shadow: 0 1px 0 #fffdf5 inset, 0 22px 44px -24px #4a2d10a0;
}
.sales-active .pv-price > span:last-child { color: var(--dd-tinta-fraca); }

.sales-active .pv-method-icon {
  background: #fdf7e8;
  border: 1px solid #9a6f2240;
  box-shadow: 0 1px 0 #fffdf5 inset;
}

.sales-active .pv-example-stamp,
.sales-active .pv-closed-stamp {
  background: #b4342a12;
  border: 2px solid #b4342a;
  color: #8c2419;
}

.sales-active .pv-library-number { border-color: #9a6f2238; }

.sales-active .pv-rewards-art,
.sales-active .pv-hero-art,
.sales-active .pv-sample-art,
.sales-active .pv-drug-planned-art {
  background: #e9dbbd;
  border-color: #9a6f2238;
}
.sales-active .pv-case-art,
.sales-active .pv-sample-art img,
.sales-active .pv-hero-art img,
.sales-active .pv-art-file img { box-shadow: 0 12px 26px -16px #4a2d10aa; }

.sales-active .pv-art-file { background: #fdf7e8; border-color: #9a6f2238; }
.sales-active .pv-folder-tab {
  background: linear-gradient(180deg, #d9b25f, #b98f32);
  color: #2b1d08;
  border-color: #e8ca84;
}
.sales-active .pv-hero-seal {
  background: #b4342a14;
  border-color: #b4342a;
  color: #8c2419;
}

.sales-active .pv-page > section + section { border-top: 1px solid #9a6f2228; }

.sales-active button:focus-visible,
.sales-active a:focus-visible,
.sales-active summary:focus-visible { outline: 3px solid #b4342a; outline-offset: 3px; }

@media (min-width: 900px) {
  body.dd-desk .experience.sales-active {
    margin-block: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 0 #fffdf5 inset, 0 36px 70px -30px #3a230da0;
  }
}

/* ====================================================================== */
/* ====================== O CASO JOGAVEL ================================ */
/* Esta e a parte que o usuario abre ao clicar no exemplo. Antes nao tinha
   efeito nenhum: os suspeitos eram botoes chapados e o erro nao tinha peso. */

body.dd-desk .experience.lab-active { background: #1b1208 !important; }

/* o azul-marinho e o roxo do tema original saem; entra noite sepia */
body.dd-desk .lab-case {
  background:
    radial-gradient(ellipse at 50% 28%, #c88a4238, transparent 58%),
    radial-gradient(ellipse at 94% 0, #8a5a2a44, transparent 46%),
    linear-gradient(110deg, #231609f2, #2d1d0ef7);
}

.lab-case { position: relative; }

/* papel de inquerito atras do caso */
.lab-case::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 32px, #9a7a4a12 32px 33px),
    radial-gradient(circle at 88% 6%, transparent 38px, #8a5a2a1c 39px, #8a5a2a26 44px, transparent 45px);
}

.lab-case .lab-kicker { color: #f0c070; letter-spacing: 2px; }
.lab-case .lab-question { color: #fff3dd; }
.lab-case .lab-instruction { color: #d9c6a4; }

/* ---- o holofote segue o dedo / o mouse no tabuleiro ------------------- */
.lab-case .lab-proof,
.lab-case .lab-full-art { position: relative; }

/* ---- suspeitos: fichas presas, nao botoes ---------------------------- */
.lab-case .lab-suspect {
  position: relative;
  background: linear-gradient(170deg, #35230f, #241607);
  border: 1px solid #c8904060;
  box-shadow: 0 1px 0 #ffffff14 inset, 0 12px 22px -12px #000000b0;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, filter .25s;
  will-change: transform;
}
.lab-case .lab-suspect:nth-child(odd) { transform: rotate(-.7deg); }
.lab-case .lab-suspect:nth-child(even) { transform: rotate(.6deg); }

/* alfinete em cada ficha de suspeito */
.lab-case .lab-suspect::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  z-index: 3;
  background: radial-gradient(circle at 34% 30%, #ffb0a2, #b3291b 58%, #6f170f);
  box-shadow: 0 2px 5px #00000055;
}

@media (hover: hover) and (pointer: fine) {
  .lab-case .lab-suspect:hover {
    transform: translateY(-4px) rotate(0deg) scale(1.02);
    box-shadow: 0 1px 0 #ffffff1c inset, 0 20px 34px -14px #000000c0;
  }
}
.lab-case .lab-suspect:active { transform: translateY(1px) scale(.985); }

/* ---- o erro tem peso: a ficha treme, descora e e carimbada ----------- */
@keyframes dd-tremer {
  0%,100% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(-9px) rotate(-1.4deg); }
  30% { transform: translateX(8px) rotate(1.2deg); }
  45% { transform: translateX(-6px) rotate(-.9deg); }
  60% { transform: translateX(5px) rotate(.7deg); }
  80% { transform: translateX(-2px) rotate(-.3deg); }
}
.lab-case .lab-suspect.lab-rejected {
  animation: dd-tremer .45s cubic-bezier(.36,.07,.19,.97) both;
  filter: grayscale(.72) contrast(.92) brightness(.97);
  opacity: .62;
}
/* o X vermelho carimbado por cima da ficha descartada */
.lab-case .lab-suspect.lab-rejected::after {
  content: '';
  position: absolute;
  inset: 12%;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 3px), #b4342acc calc(50% - 3px), #b4342acc calc(50% + 3px), transparent calc(50% + 3px)),
    linear-gradient(to bottom left, transparent calc(50% - 3px), #b4342acc calc(50% - 3px), #b4342acc calc(50% + 3px), transparent calc(50% + 3px));
  animation: dd-carimbo .28s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes dd-carimbo {
  from { opacity: 0; transform: scale(2.2) rotate(-14deg); }
  to   { opacity: 1; transform: scale(1) rotate(-6deg); }
}

/* ---- acerto: a ficha acende e ganha halo ----------------------------- */
.lab-case .lab-suspect.correct,
.lab-case .lab-suspect.right {
  border-color: #2e7d4f;
  box-shadow:
    0 2px 0 #fffdf5 inset,
    0 0 0 3px #2e7d4f2e,
    0 18px 34px -14px #1d5a3899;
  animation: dd-pulsar 1.5s ease-out 2;
}
@keyframes dd-pulsar {
  0% { box-shadow: 0 2px 0 #fffdf5 inset, 0 0 0 0 #2e7d4f66, 0 18px 34px -14px #1d5a3899; }
  70% { box-shadow: 0 2px 0 #fffdf5 inset, 0 0 0 18px #2e7d4f00, 0 18px 34px -14px #1d5a3899; }
  100% { box-shadow: 0 2px 0 #fffdf5 inset, 0 0 0 0 #2e7d4f00, 0 18px 34px -14px #1d5a3899; }
}

/* ---- pistas: revelam com tinta se espalhando ------------------------- */
.lab-case .lab-letter,
.lab-case .lab-proof li {
  position: relative;
  animation: dd-tinta .5s ease-out both;
}
@keyframes dd-tinta {
  from { opacity: 0; filter: blur(5px); transform: translateY(7px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

/* ---- barra de progresso enche ---------------------------------------- */
.lab-case .lab-progress {
  background: #e3d4ad;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.lab-case .lab-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, #b4342a 0 10px, #9c2a1d 10px 20px);
  opacity: .22;
  animation: dd-listra 1.1s linear infinite;
}
@keyframes dd-listra { to { background-position: 28px 0; } }

/* ---- carimbo de caso encerrado --------------------------------------- */
.lab-case .lab-resolved-stamp {
  color: #8c2419;
  border: 3px solid #b4342a;
  animation: dd-bater .5s cubic-bezier(.2,1.5,.35,1) both;
}
@keyframes dd-bater {
  0%   { opacity: 0; transform: scale(3) rotate(-22deg); }
  55%  { opacity: 1; transform: scale(.92) rotate(-7deg); }
  70%  { transform: scale(1.04) rotate(-9deg); }
  100% { transform: scale(1) rotate(-8deg); }
}

.lab-case .lab-resolution { position: relative; }
.lab-case .lab-villain {
  border: 2px solid #2e7d4f;
  box-shadow: 0 0 0 4px #2e7d4f1f, 0 16px 30px -14px #1d5a3899;
}

.lab-case .lab-action,
.lab-case .lab-accusation {
  background: linear-gradient(180deg, #b4342a, #8c2419);
  border: 1px solid #d4594a;
  color: #fff4e8;
  box-shadow: 0 8px 18px -10px #8c2419b0, 0 1px 0 #ffffff40 inset;
}
.lab-case .lab-back,
.lab-case .lab-text-action { color: #7d5718; }


/* ====================== efeitos do caso jogavel ======================= */

/* holofote seguindo o dedo sobre o tabuleiro */
.dd-spot {
  position: absolute;
  top: 0; left: 0;
  width: 320px; height: 320px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  will-change: transform;
  background: radial-gradient(circle, #ffd79433 0%, #ffbb5a16 42%, transparent 70%);
}

/* flash de tela: vermelho no erro, dourado no acerto */
.dd-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 35%, var(--dd-flash-cor, #b4342a) 140%);
}

/* papeis voando no acerto */
.dd-scrap {
  position: absolute;
  width: 9px; height: 13px;
  pointer-events: none;
  z-index: 9;
  background: linear-gradient(160deg, #f6e7c4, #d9bc86);
  box-shadow: 0 1px 2px #00000060;
}
.dd-scrap:nth-child(odd) { background: linear-gradient(160deg, #f0c070, #b4832c); }

/* cursor piscando enquanto a pergunta e digitada */
.dd-digitando::after {
  content: '▌';
  margin-left: 2px;
  animation: dd-cursor .85s steps(1) infinite;
  color: #f0c070;
}
@keyframes dd-cursor { 50% { opacity: 0; } }

/* luz de interrogatorio na ficha sob o dedo */
.lab-case .lab-suspect.dd-interrogando {
  box-shadow:
    0 1px 0 #ffffff1c inset,
    0 0 0 2px #f0c07055,
    0 0 42px #ffbb5a40,
    0 20px 34px -14px #000000c0;
}
.lab-case .lab-suspect.dd-interrogando::after {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, #ffd79426, transparent 62%);
}

/* pegadas mais presentes */
.dd-pegada { opacity: .9; }
.dd-props--inline .dd-pegada { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* o flash e os papeis voando saem; o holofote fica, e cenario */
  .dd-flash, .dd-scrap { display: none; }
}

/* rastro de pegadas saindo do ponteiro */
.dd-rastro {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 55;
  pointer-events: none;
}
.dd-pegada-rastro { fill: #4a3119; }
/* no escuro do caso, as pegadas precisam clarear pra existir */
body:has(.lab-case) .dd-pegada-rastro { fill: #f3dbae; }



/* ====================== a dupla de detetives no topo ================== */

.pv-detectives {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 6px 16px 0;
  /* encosta no titulo logo abaixo em vez de empurrar ele pra fora da dobra */
  margin-bottom: -10px;
  overflow: hidden;
}
/* holofote de luminaria atras deles */
.pv-detectives::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -14%;
  width: 118%;
  height: 128%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse 50% 48% at 50% 42%, #ffe0a855, #ffd08c22 46%, transparent 72%);
}
/* sombra no chao, pra nao parecer recorte flutuando */
.pv-detectives::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 50%;
  width: 62%;
  height: 20px;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #4a2d1055, transparent 72%);
}
.pv-detectives-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 16px 22px #4a2d1045);
}

@media (min-width: 900px) {
  .pv-detectives { padding-top: 16px; margin-bottom: -22px; }
  .pv-detectives-art { max-width: 460px; }
}