/* /diagnostico-comercial — CSS só desta página (prefixo p-dc-). Clone da a referência
   Celular primeiro. Hero: a tela real do diagnóstico sai por baixo do texto e some no preto (reta no computador, dentro do
   celular no celular, como a InZone troca a plataforma pelo celular). "Veja como funciona": no celular, texto e cartão em
   sequência e centrados, como na referência; a partir de 768px, texto à esquerda e cartão à direita. Os dois cartões do
   "Por que" ficam lado a lado também em 360. Movimento só com transform/opacity; "menos movimento" para tudo o que repete. */

/* moldura de cartão da casa (borda degradê de 1px + fundo radial), a mesma família do .rd-borda */
.p-dc-k,.p-dc-c{
  border:1px solid transparent;
  background:radial-gradient(120% 120% at 0 0,#171717 0,#0d0d0d 60%,#0a0a0a 100%) padding-box,
             linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 45%,rgba(255,255,255,.1)) border-box}

/* ---------- hero: texto em cima, a tela saindo por baixo ---------- */
#topo{justify-content:flex-start;padding-bottom:0}
#topo .lp-hero-c{width:min(100%,1120px)}
#topo .lp-h1,#topo .lp-lede{max-width:860px}
#topo .lp-h1 .line.acc{color:var(--red-hi)}
#topo .lp-sub{justify-self:stretch;margin-top:clamp(4px,1.6vw,20px);font-size:inherit;color:inherit}
.p-dc-hm{position:relative;display:block;height:clamp(300px,calc(100svh - 470px),560px);
  -webkit-mask:linear-gradient(#000 52%,#0000 96%);mask:linear-gradient(#000 52%,#0000 96%)}
/* celular: a tela dentro da moldura (a tela vem depois no HTML e pinta por cima do vidro preto da moldura; a máscara recorta os cantos) do iPhone 17 Pro (a da extensão Mobile Simulator) */
.p-dc-dev{position:relative;display:block;margin-inline:auto;width:min(58vw,236px);aspect-ratio:878/1806}
.p-dc-mold{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.p-dc-tela{position:absolute;display:block;left:4.328%;top:1.6611%;width:91.5718%;height:96.6777%;overflow:hidden;background:#0b0c0e;
  -webkit-mask:url(../../assets/iphone-17-pro-tela.svg?v=1) 0 0/100% 100% no-repeat;mask:url(../../assets/iphone-17-pro-tela.svg?v=1) 0 0/100% 100% no-repeat}
.p-dc-tela img{display:block;width:100%;height:auto;margin-top:12%}
/* os quatro assuntos, em vidro, flutuando dos lados da tela */
.p-dc-pl{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;
  font-size:.875rem;line-height:1;font-weight:600;color:#fff;white-space:nowrap;
  background:rgba(18,18,18,.72);border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 32px -12px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-dc-pl svg{flex:none;width:28px;height:28px;padding:6px;border-radius:50%;color:var(--red-hi);background:rgba(217,45,32,.16)}
.p-dc-pl--1{left:max(0px,calc(50% - 190px));top:8%}
.p-dc-pl--2{right:max(0px,calc(50% - 190px));top:20%}
.p-dc-pl--3{left:max(0px,calc(50% - 196px));top:40%}
.p-dc-pl--4{right:max(0px,calc(50% - 200px));top:52%}

@media (min-width:768px){
  .p-dc-hm{height:clamp(320px,calc(100svh - 430px),560px)}
  .p-dc-dev{width:min(100%,980px);aspect-ratio:auto}
  .p-dc-mold{display:none}
  .p-dc-tela{position:relative;left:auto;top:auto;width:100%;height:auto;-webkit-mask:none;mask:none;border-radius:18px;
    box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 40px 120px -30px rgba(217,45,32,.4)}
  .p-dc-tela img{margin-top:0}
  .p-dc-pl{gap:10px;padding:8px 18px 8px 8px;font-size:1rem}
  .p-dc-pl svg{width:34px;height:34px;padding:8px}
  .p-dc-pl--1{left:0;top:10%}
  .p-dc-pl--2{right:0;top:22%}
  .p-dc-pl--3{left:2%;top:44%}
  .p-dc-pl--4{right:1%;top:56%}
}
/* a máscara do .p-dc-hm recorta na caixa dele: as pílulas ficam sempre dentro (nada de valor negativo) */

@media (prefers-reduced-motion:no-preference){
  .p-dc-dev{animation:p-dc-sobe 1s var(--ease) .15s both}
  .p-dc-pl{animation:p-dc-entra .7s var(--ease) both,p-dc-boia 5s ease-in-out 1.2s infinite}
  .p-dc-pl--1{animation-delay:.5s,1.2s}
  .p-dc-pl--2{animation-delay:.62s,1.9s}
  .p-dc-pl--3{animation-delay:.74s,1.5s}
  .p-dc-pl--4{animation-delay:.86s,2.3s}
}
@keyframes p-dc-sobe{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes p-dc-entra{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes p-dc-boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- 1. "Veja como funciona": quatro linhas, o mascote grudado à esquerda ---------- */
.p-dc-s1 .lp-cite{margin-bottom:clamp(40px,6vw,72px)}
.p-dc-como{position:relative}
.p-dc-masc{display:none}
.p-dc-ps{list-style:none;margin:0;padding:0;display:grid;gap:56px}
.p-dc-p{display:grid;justify-items:center;gap:24px;text-align:center;scroll-margin-top:96px}
.p-dc-x{display:grid;justify-items:center;gap:10px;max-width:36em}
.p-dc-n{font-size:.875rem;font-weight:600;letter-spacing:.08em;color:var(--red-hi)}
.p-dc-x h3{font-size:1.375rem;line-height:1.1;font-weight:600;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.p-dc-x p{font-size:1rem;line-height:1.5;color:var(--lp-mut);text-wrap:pretty}
.p-dc-k{width:min(100%,384px);margin:0;padding:14px;border-radius:28px}
.p-dc-kin{position:relative;display:block;aspect-ratio:var(--ar);border-radius:16px;overflow:hidden;background:#0b0c0e}
.p-dc-kin img{display:block;width:100%;height:100%;object-fit:cover}
/* a faixa acesa: linhas em cima e embaixo + um véu vermelho (a "zona" da InZone, na cor da marca) */
.p-dc-z{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);border-radius:14px;pointer-events:none;
  border-block:2px solid var(--red-hi);background:rgba(217,45,32,.14);box-shadow:0 0 28px -6px rgba(255,84,72,.55)}
.p-dc-z--chip{border-radius:999px;border:2px solid var(--red-hi)}
.p-dc-z--b,.p-dc-z--c{opacity:0}
.js-ok .p-dc-k .p-dc-z{opacity:0;transform:scaleX(.9)}
.js-ok .p-dc-k.in .p-dc-z{opacity:1;transform:none;transition:opacity .5s .45s,transform .7s var(--ease) .45s}
.js-ok .p-dc-k.in .p-dc-z--b,.js-ok .p-dc-k.in .p-dc-z--c{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .js-ok .p-dc-k.in .p-dc-z:not(.p-dc-z--a,.p-dc-z--b,.p-dc-z--c){animation:p-dc-pulsa 2.8s ease-in-out 1.3s infinite}
  .js-ok .p-dc-k.in .p-dc-z--a,.js-ok .p-dc-k.in .p-dc-z--b,.js-ok .p-dc-k.in .p-dc-z--c{transition:none;transform:none;animation:p-dc-anda 6s ease-in-out .45s infinite both}
  .js-ok .p-dc-k.in .p-dc-z--b{animation-delay:2.45s}
  .js-ok .p-dc-k.in .p-dc-z--c{animation-delay:4.45s}
}
@keyframes p-dc-pulsa{0%,100%{opacity:1}50%{opacity:.55}}
/* uma faixa por vez anda pelas opções: cada uma acende num terço do ciclo */
@keyframes p-dc-anda{0%{opacity:0;transform:scale(.97)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:scale(.99)}}

@media (min-width:768px){
  .p-dc-ps{gap:clamp(64px,8vw,96px)}
  .p-dc-p{grid-template-columns:minmax(0,1fr) 384px;align-items:center;justify-items:start;gap:clamp(32px,6vw,80px);text-align:left}
  .p-dc-x{justify-items:start}
  .p-dc-x h3{font-size:1.5rem}
  .p-dc-k{padding:20px;border-radius:40px}
}
/* o mascote 3D (a bússola do diagnóstico) grudado à esquerda, fora da coluna de 944, como o da InZone */
@media (min-width:1280px){
  .p-dc-masc{display:block;position:absolute;top:0;bottom:0;right:calc(100% + 16px);width:clamp(150px,13vw,210px);pointer-events:none}
  .p-dc-masc span{position:sticky;top:34vh;display:block}
  .p-dc-masc img{display:block;width:100%;height:auto;mix-blend-mode:lighten;
    -webkit-mask:radial-gradient(farthest-side at 50% 50%,#000 62%,#0000 100%);mask:radial-gradient(farthest-side at 50% 50%,#000 62%,#0000 100%)}
}
@media (min-width:1280px) and (prefers-reduced-motion:no-preference){
  .p-dc-masc img{animation:p-dc-boia 6s ease-in-out infinite}
}

/* ---------- 2. "Por que…?": o "2 min" gigante no pedestal + dois cartões + o botão ---------- */
.p-dc-num{width:min(100%,860px);margin:0 auto clamp(8px,2vw,24px)}
.p-dc-num img{display:block;width:100%;height:auto;mix-blend-mode:lighten;
  -webkit-mask:radial-gradient(68% 78% at 50% 50%,#000 64%,#0000 100%);mask:radial-gradient(68% 78% at 50% 50%,#000 64%,#0000 100%)}
.p-dc-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.p-dc-c{position:relative;display:grid;grid-template-rows:auto 1fr;justify-items:center;padding:16px 10px 0;border-radius:20px;text-align:center;contain:paint;isolation:isolate}
.p-dc-c h3{font-size:1rem;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.p-dc-c h3 span{display:block;margin-top:4px;font-size:.875rem;font-weight:500;color:var(--lp-mut)}
.p-dc-c-m{align-self:end;width:112%;margin:4px 0 -6%;pointer-events:none}
.p-dc-c-m img{display:block;width:100%;height:auto;mix-blend-mode:lighten;
  -webkit-mask:radial-gradient(farthest-side at 50% 52%,#000 60%,#0000 100%);mask:radial-gradient(farthest-side at 50% 52%,#000 60%,#0000 100%)}
.p-dc-cta{display:flex;justify-content:center;margin-top:clamp(28px,4vw,48px)}
@media (min-width:768px){
  .p-dc-duo{gap:16px}
  .p-dc-c{min-height:400px;padding:40px 32px 0;border-radius:40px}
  .p-dc-c h3{font-size:1.5rem;line-height:1.1}
  .p-dc-c h3 span{display:inline;margin:0;font-size:inherit;font-weight:inherit}
  .p-dc-c-m{width:92%;margin-bottom:-4%}
}

@media (prefers-reduced-motion:reduce){
  .js-ok .p-dc-k .p-dc-z{transform:none;transition:opacity .2s}
}

/* ---------- texto de busca: respiro entre o último parágrafo e a tabela ---------- */
#perfil .lp-tab-box{margin-top:clamp(28px,4vw,48px)}