/* /suporte — o que o kit não cobre nas páginas about/support + about/contacts da a referência: o hero com a mídia à esquerda e o texto
   com a lista de contatos à direita (aqui o fone 3D em contraluz no lugar da moça, e os canais reais no lugar de telefone e
   endereço), os cartões 2 × N de "Mantenha o contato nas redes sociais" (aqui: tipo de dúvida → onde resolver) com o celular
   real grudado à esquerda, e o globo com a fileira de rostos e o "+" (aqui: os medalhões das telas que respondem).
   Celular copia a composição do computador: a mídia do hero no alto com o texto por cima do esmaecido (como a a referência no celular),
   o celular ao lado do título, os cartões em 2 colunas com a copy curta e a fileira de círculos inteira numa linha.
   Só transform/opacity na animação; menos movimento no fim. */

.p-sup-cel{display:none}
@media (max-width:47.99rem){.p-sup-pc{display:none}.p-sup-cel{display:inline}}

/* ---------- hero: a mídia ocupa o alto (celular) ou a esquerda (computador); o texto e os canais por cima do escuro ---------- */
.lp-hero--janela{justify-content:flex-end;padding-top:clamp(240px,46svh,420px);padding-bottom:72px}
.lp-hero--janela .lp-persp{position:absolute;left:0;right:0;top:0;z-index:-1;width:auto;height:min(64svh,620px);margin:0;perspective:none;
  -webkit-mask:linear-gradient(#000 42%,#0000 96%);mask:linear-gradient(#000 42%,#0000 96%)}
.lp-hero--janela .lp-persp-in{height:100%;transform:none;border-radius:0;overflow:visible;box-shadow:none}
.lp-hero--janela .lp-persp-in img{width:100%;height:100%;object-fit:cover;object-position:16% 50%;transform-origin:30% 50%;animation:p-sup-resp 14s ease-in-out infinite alternate}
@keyframes p-sup-resp{from{transform:scale(1)}to{transform:scale(1.045)}}
.lp-hero--janela .lp-hero-c{gap:14px}
.lp-hero--janela .lp-lede{max-width:30em}

/* os canais (a lista "telefone / endereço" da a referência): ícone, linha e legenda */
.p-sup-canais{display:grid;gap:4px;width:min(100%,380px);margin-inline:auto;text-align:left}
.lp-hero .lp-sub .p-sup-canal{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;min-height:56px;padding:6px 10px 6px 6px;border-radius:16px;color:#fff;text-decoration:none;transition:background-color .2s,transform .18s var(--ease)}
.p-sup-canal:active{transform:scale(.98)}
.p-sup-canal-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--red-hi);box-shadow:0 0 0 1px rgba(255,255,255,.16) inset;background:rgba(255,255,255,.03)}
.p-sup-canal-ic .ic{width:20px;height:20px}
.p-sup-canal-x{display:grid;gap:2px;min-width:0}
.p-sup-canal-x b{font-size:1rem;line-height:1.25;font-weight:600;color:#fff}
.p-sup-canal-x small{font-size:.875rem;line-height:1.3;color:var(--lp-mut2);overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){.lp-hero .lp-sub .p-sup-canal:hover{background-color:rgba(255,255,255,.05)}}

@media (min-width:1024px){
  .lp-hero--janela{align-items:stretch;justify-content:center;padding:112px var(--pad) 96px;text-align:left}
  .lp-hero--janela .lp-persp{right:auto;bottom:0;width:58%;height:auto;
    -webkit-mask:radial-gradient(120% 92% at 18% 46%,#000 46%,#0000 80%);mask:radial-gradient(120% 92% at 18% 46%,#000 46%,#0000 80%)}
  .lp-hero--janela .lp-persp-in img{object-position:6% 50%}
  .lp-hero--janela .lp-hero-c{justify-items:start;width:min(470px,40%);margin-left:max(54%,calc(50% + 40px));gap:18px}
  .lp-hero--janela .lp-bc{justify-content:flex-start}
  .lp-hero--janela .lp-lede{max-width:none}
  .lp-hero--janela .hero-cta{justify-content:flex-start}
  .p-sup-canais{margin:10px 0 0 -6px;width:100%}
}
@media (min-width:1024px) and (max-height:760px){.lp-hero--janela .lp-hero-c{gap:12px}.p-sup-canal{min-height:50px}}

/* ---------- 2. cada dúvida tem um lugar: celular grudado à esquerda, título e cartões 2 × 3 à direita ---------- */
.p-sup-onde{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);grid-template-areas:"m h" "m p" "c c";gap:14px 16px;align-items:center;max-width:944px;margin-inline:auto}
.p-sup-onde-m{grid-area:m;align-self:start}
.p-sup-onde-x{display:contents}
.p-sup-onde-x .lp-h2{grid-area:h;align-self:end;font-size:clamp(1.75rem,1rem + 3.4vw,3.5rem);line-height:1}
.p-sup-onde-x .lp-p{grid-area:p;align-self:start}
.p-sup-onde-cel{width:100%;max-width:300px;margin-inline:auto;filter:drop-shadow(0 30px 60px rgba(217,45,32,.22))}
.p-sup-cards{grid-area:c;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}
.p-sup-cards li{display:grid}
.p-sup-c{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:14px;min-height:178px;padding:18px 16px 12px;border:1px solid transparent;border-radius:28px;color:#fff;
  background:radial-gradient(100% 190% at 15% 0,#171717 0,#101010 66%) padding-box,linear-gradient(148deg,#333 14%,#111 81%) border-box;
  transition:transform .25s var(--ease)}
.p-sup-c:active{transform:scale(.98)}
.p-sup-c-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;box-shadow:0 0 0 2px #fff inset}
.p-sup-c-ic .ic{width:20px;height:20px}
.p-sup-c-x{display:grid;align-content:end;gap:2px}
.p-sup-c-x b{font-size:1.0625rem;line-height:1.1;font-weight:600;letter-spacing:-.01em}
.p-sup-c-o{font-size:1.0625rem;line-height:1.1;font-weight:600;letter-spacing:-.01em;color:var(--lp-mut)}
.p-sup-c-d{display:none;margin-top:8px;font-size:.9rem;line-height:1.4;color:var(--lp-mut2)}
.p-sup-c-go{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:.9rem;font-weight:600;color:var(--red-hi)}
.p-sup-c-go .rd-seta{width:7px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}

@media (min-width:48rem){
  .p-sup-onde{grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);grid-template-areas:none;gap:0 clamp(32px,6vw,80px);align-items:start}
  .p-sup-onde-m{grid-area:auto;position:sticky;top:max(96px,calc(50svh - 330px));align-self:start}
  .p-sup-onde-x{display:grid;gap:24px;align-content:start}
  .p-sup-onde-x .lp-h2,.p-sup-onde-x .lp-p,.p-sup-cards{grid-area:auto}
  .p-sup-cards{gap:16px;margin-top:16px}
  .p-sup-c{min-height:218px;gap:12px;padding:28px 28px 14px;border-radius:40px}
  .p-sup-c-d{font-size:.875rem;margin-top:6px}
  .p-sup-c-x b,.p-sup-c-o{font-size:1.5rem;line-height:1}
  .p-sup-c-d{display:block}
}
/* o "Descobrir" da a referência: aparece ao passar o mouse (no toque fica sempre à vista) */
@media (hover:hover) and (pointer:fine){
  .p-sup-c-go{opacity:.0;transform:translateY(6px);transition:opacity .25s,transform .25s var(--ease)}
  .p-sup-c:hover .p-sup-c-go,.p-sup-c:focus-visible .p-sup-c-go{opacity:1;transform:none}
  .p-sup-c:hover{transform:translateY(-3px)}
  .p-sup-c:hover .p-sup-c-ic{color:var(--red-hi);box-shadow:0 0 0 2px var(--red-hi) inset}
}

/* ---------- 3. o planeta com a fileira de medalhões e o "+" do Suporte (o globo da a referência) ---------- */
/* o planeta é maior que a tela de propósito (150vw no celular): recorta só na horizontal, o brilho de cima e de baixo segue livre */
.p-sup-s-gl{padding-block:clamp(72px,12vw,200px);overflow-x:clip}
.p-sup-gl{position:relative;isolation:isolate;display:grid;justify-items:center;gap:clamp(20px,2.4vw,28px);text-align:center}
.p-sup-gl-bg{position:absolute;left:50%;top:50%;z-index:-1;width:min(150vw,1440px);transform:translate(-50%,-50%);pointer-events:none;opacity:.9;
  -webkit-mask:radial-gradient(closest-side,#000 55%,#0000);mask:radial-gradient(closest-side,#000 55%,#0000)}
.p-sup-gl-bg img{display:block;width:100%;height:auto}
.p-sup-gl .lp-h2{max-width:13em}
.p-sup-gl-fila{--d:56px;--o:12px;display:flex;justify-content:center;padding-left:var(--o)}
.p-sup-gl-fila li{position:relative;margin-left:calc(var(--o)*-1);transition:transform .5s var(--ease),opacity .5s var(--ease);transition-delay:calc(var(--i)*60ms)}
.p-sup-gl-fila img,.p-sup-gl-mais a{display:block;width:var(--d);height:var(--d);border-radius:50%;object-fit:cover;object-position:50% 50%;
  box-shadow:0 0 0 3px #000,0 0 0 4px rgba(255,255,255,.18);background:#0b0b0b}
.p-sup-gl-fila li>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.p-sup-gl-mais a{display:grid;place-items:center;background:var(--red-d);color:#fff;transition:transform .2s var(--ease)}
.p-sup-gl-mais .ic{width:45%;height:45%}
.p-sup-gl-mais a:active{transform:scale(.96)}
.p-sup-gl-leg{max-width:34em;font-size:1rem;line-height:1.5;color:var(--lp-mut2)}
.p-sup-gl-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:1rem;font-weight:600;color:var(--red-hi)}
.p-sup-gl-link .rd-seta{width:7px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
.js-ok .p-sup-gl-fila:not(.in) li{opacity:0;transform:translateX(calc(var(--i)*-14px))}
@media (min-width:48rem){.p-sup-gl-fila{--d:128px;--o:56px}.p-sup-gl .lp-h2{font-size:clamp(2rem,1.2rem + 2.2vw,2.5rem)}}
@media (hover:hover) and (pointer:fine){
  .p-sup-gl-fila li:hover{transform:translateY(-8px);z-index:2}
  .p-sup-gl-mais a:hover{transform:rotate(90deg)}
}

@media (prefers-reduced-motion:reduce){
  .lp-hero--janela .lp-persp-in img{animation:none}
  .js-ok .p-sup-gl-fila:not(.in) li{transform:none}
  .p-sup-gl-fila li,.p-sup-c,.p-sup-c-go{transition:opacity .3s}
}