/* Página Plataforma: quatro camadas, cada uma explicada por um diagrama animado.
   Reaproveita tipografia, botões e reveal de home.css. */

.pl-hero{display:grid;grid-template-columns:1fr .92fr;gap:60px;align-items:center}
.pl main>section.pl-hero{padding-top:44px;padding-bottom:76px}
.pl-stack-map{display:grid;gap:10px}
.pl-stack-map a{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:18px 22px;text-decoration:none;transition:transform .2s,border-color .2s,background .2s}
.pl-stack-map a:hover{transform:translateX(6px);border-color:var(--cyan);background:var(--surface-2)}
.pl-stack-map i{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--surface-2);color:var(--cyan);font-style:normal;font-size:12px;font-weight:800;letter-spacing:-.4px}
.pl-stack-map b{display:block;font-size:16.5px;letter-spacing:-.5px;color:var(--ink)}
.pl-stack-map span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.pl-stack-map em{margin-left:auto;font-style:normal;color:var(--cyan);font-size:18px}

.pl-layer{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center}
.pl-layer.is-flipped .pl-figure{order:-1}
.pl-num{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:800;letter-spacing:1.4px;color:var(--cyan);text-transform:uppercase;margin:0 0 18px}
.pl-num b{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);font-size:12px}
.pl-layer h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-1.8px;line-height:1.06;margin:0 0 14px}
.pl-layer p{color:var(--muted);font-size:16.5px;line-height:1.6;margin:0 0 24px;max-width:430px}
.pl-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.pl-chips li{border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:8px 14px;font-size:13px;color:var(--ink)}
.pl-chips li b{color:var(--cyan);font-weight:800}
.pl-figure{position:relative;border:1px solid var(--line);border-radius:20px;background:linear-gradient(155deg,var(--surface-2),var(--surface) 62%,var(--bg));padding:34px 34px 0;min-height:330px;display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;row-gap:28px;overflow:hidden}
.pl-figure::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 0%,rgba(163,140,255,.16),transparent 70%);pointer-events:none}
.pl-figure>.pl-cap{align-self:end;justify-self:stretch;width:calc(100% + 68px);max-width:none;margin:0 -34px;padding:12px 18px;font-size:11.5px;color:var(--muted);text-align:center;border-top:1px solid var(--line);background:var(--surface-2)}
/* A legenda ocupa uma linha do grid em vez de flutuar sobre a figura:
   absoluta, ela cobria o desenho sempre que a legenda quebrava em duas
   linhas ou o desenho crescia até o rodapé. */

/* 1 — integrações: canais orbitando o núcleo */

.pl-orbit{position:relative;width:290px;height:290px;display:grid;place-items:center}
.pl-orbit-ring{position:absolute;inset:34px;border:1px dashed rgba(148,150,196,.35);border-radius:50%}
.pl-orbit-ring:nth-of-type(2){inset:0;border-style:solid;border-color:rgba(148,150,196,.16)}
.pl-core{position:relative;z-index:2;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;text-align:center;background:linear-gradient(150deg,var(--surface-2),var(--surface));border:1px solid var(--cyan);box-shadow:0 0 0 8px rgba(127,227,251,.07),0 18px 40px -20px rgba(127,227,251,.6)}
.pl-core b{font-size:13px;letter-spacing:-.4px;line-height:1.2}
.pl-core span{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.pl-satellites{position:absolute;inset:0;animation:pl-spin 34s linear infinite}
.pl-sat{position:absolute;top:50%;left:50%;width:114px;margin:-17px 0 0 -57px;display:flex;align-items:center;justify-content:center;gap:6px;height:34px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:11.5px;font-weight:700;color:var(--ink);box-shadow:0 10px 22px -14px var(--shadow-hard)}
.pl-sat i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--cyan)}
.pl-sat span{animation:pl-spin-back 34s linear infinite}
.pl-sat.s1{transform:rotate(0deg) translateY(-124px)}
.pl-sat.s2{transform:rotate(72deg) translateY(-124px)}
.pl-sat.s3{transform:rotate(144deg) translateY(-124px)}
.pl-sat.s4{transform:rotate(216deg) translateY(-124px)}
.pl-sat.s5{transform:rotate(288deg) translateY(-124px)}
.pl-sat.s1 span{animation-name:pl-spin-back-0}
.pl-sat.s2 span{animation-name:pl-spin-back-72}
.pl-sat.s3 span{animation-name:pl-spin-back-144}
.pl-sat.s4 span{animation-name:pl-spin-back-216}
.pl-sat.s5 span{animation-name:pl-spin-back-288}
@keyframes pl-spin{to{transform:rotate(360deg)}}
@keyframes pl-spin-back-0{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes pl-spin-back-72{from{transform:rotate(-72deg)}to{transform:rotate(-432deg)}}
@keyframes pl-spin-back-144{from{transform:rotate(-144deg)}to{transform:rotate(-504deg)}}
@keyframes pl-spin-back-216{from{transform:rotate(-216deg)}to{transform:rotate(-576deg)}}
@keyframes pl-spin-back-288{from{transform:rotate(-288deg)}to{transform:rotate(-648deg)}}

/* 2 — cognição: peças convergindo para a resposta */

.pl-brain{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;width:100%}
.pl-parts{display:grid;gap:10px}
.pl-part{border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:12px 14px;font-size:13px;position:relative;overflow:hidden}
.pl-part b{display:block;font-size:10.5px;letter-spacing:1px;color:var(--cyan);font-weight:800;margin-bottom:4px}
.pl-part span{color:var(--muted);font-size:12.5px}
.pl-part::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cyan);opacity:.25;animation:pl-feed 5.2s ease-in-out infinite}
.pl-part:nth-child(2)::before{animation-delay:.6s}
.pl-part:nth-child(3)::before{animation-delay:1.2s}
.pl-part:nth-child(4)::before{animation-delay:1.8s}
@keyframes pl-feed{0%,70%,100%{opacity:.22}12%{opacity:1;box-shadow:0 0 14px rgba(127,227,251,.9)}}
.pl-merge{width:56px;height:150px;position:relative}
.pl-merge svg{width:100%;height:100%}
.pl-merge path{fill:none;stroke:var(--line);stroke-width:1.4}
.pl-merge .beam{stroke:var(--cyan);stroke-width:2;stroke-dasharray:14 150;stroke-dashoffset:164;animation:pl-beam 5.2s linear infinite}
.pl-merge .beam.b2{animation-delay:.6s}
.pl-merge .beam.b3{animation-delay:1.2s}
.pl-merge .beam.b4{animation-delay:1.8s}
@keyframes pl-beam{to{stroke-dashoffset:0}}
.pl-answer{border:1px solid var(--cyan);border-radius:14px;background:#212553;padding:18px;box-shadow:0 0 0 6px rgba(127,227,251,.06)}
.pl-answer b{display:block;font-size:10.5px;letter-spacing:1px;color:var(--cyan);margin-bottom:8px}
.pl-answer p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink);max-width:none}
.pl-answer .pl-cursor{display:inline-block;width:7px;height:14px;background:var(--cyan);vertical-align:-2px;margin-left:2px;animation:pl-caret 1s steps(2) infinite}
@keyframes pl-caret{50%{opacity:0}}

/* 3 — orquestração: a esteira de middlewares */

.pl-belt{width:100%;display:grid;gap:14px}
.pl-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pl-stage{border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:14px 10px;text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);transition:color .3s,border-color .3s,background .3s;animation:pl-stage 6s ease-in-out infinite}
.pl-stage:nth-child(2){animation-delay:.7s}
.pl-stage:nth-child(3){animation-delay:1.4s}
.pl-stage:nth-child(4){animation-delay:2.1s}
.pl-stage:nth-child(5){animation-delay:2.8s}
.pl-stage b{display:block;font-size:9.5px;letter-spacing:.9px;color:var(--purple);margin-bottom:6px}
@keyframes pl-stage{0%,55%,100%{background:var(--surface);border-color:var(--line);color:var(--muted)}12%{background:#242858;border-color:var(--cyan);color:var(--ink)}}
.pl-packet{position:relative;height:22px}
.pl-packet i{position:absolute;top:4px;left:0;width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px rgba(127,227,251,.9);animation:pl-travel 6s ease-in-out infinite}
@keyframes pl-travel{0%{left:0;opacity:0}6%{opacity:1}80%{left:calc(100% - 14px);opacity:1}92%,100%{left:calc(100% - 14px);opacity:0}}
.pl-fallback{display:flex;align-items:center;gap:12px;border:1px dashed var(--line);border-radius:11px;background:rgba(40,43,86,.5);padding:13px 16px;font-size:12.5px;color:var(--muted)}
.pl-fallback b{color:var(--ink);font-weight:700}
.pl-fallback i{width:9px;height:9px;border-radius:50%;background:var(--warn);flex:none;animation:pl-pulse 2.4s ease-in-out infinite}
@keyframes pl-pulse{50%{opacity:.25}}

/* 4 — infraestrutura: inquilinos isolados */

.pl-tenants{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.pl-tenant{border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:16px 14px;display:flex;flex-direction:column}
.pl-tenant b{display:block;font-size:12.5px;letter-spacing:-.3px}
.pl-tenant ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.pl-tenant li{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}
.pl-tenant li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);flex:none}
.pl-tenant.is-locked{position:relative;overflow:hidden}
.pl-tenant.is-locked::after{content:"acesso negado";margin:12px -14px -16px;width:calc(100% + 28px);padding:6px;text-align:center;font-size:10px;font-weight:800;letter-spacing:.6px;color:var(--bad);background:var(--bad-tint);border-top:1px solid var(--bad-line);opacity:0;animation:pl-deny 6.5s ease-in-out infinite}
/* A faixa ocupa o rodapé do cartão pelo fluxo, não por cima dele:
   absoluta, ela cobria a última linha da lista de dados. */
@keyframes pl-deny{0%,45%,100%{opacity:0}55%,80%{opacity:1}}
.pl-breach{position:relative;height:26px;margin-top:2px}
.pl-breach i{position:absolute;top:9px;left:16%;height:2px;width:0;background:linear-gradient(90deg,rgba(248,113,113,0),var(--bad));animation:pl-breach 6.5s ease-in-out infinite}
@keyframes pl-breach{0%,40%{width:0}52%{width:34%}64%,100%{width:34%;opacity:0}}

@media(max-width:980px){
  .pl-hero,.pl-layer{grid-template-columns:1fr;gap:38px}
  .pl-layer.is-flipped .pl-figure{order:0}
  .pl-figure{min-height:290px;padding:26px 26px 0;row-gap:22px}.pl-figure>.pl-cap{width:calc(100% + 52px);margin:0 -26px}
}
@media(max-width:760px){
  .pl-orbit{width:250px;height:250px}
  .pl-sat{width:98px;margin-left:-49px;font-size:10.5px}
  .pl-sat.s1,.pl-sat.s2,.pl-sat.s3,.pl-sat.s4,.pl-sat.s5{transform:rotate(var(--a,0deg)) translateY(-105px)}
  .pl-sat.s2{--a:72deg}.pl-sat.s3{--a:144deg}.pl-sat.s4{--a:216deg}.pl-sat.s5{--a:288deg}
  .pl-brain{grid-template-columns:1fr;gap:12px}
  .pl-merge{width:100%;height:44px;transform:rotate(90deg) scale(.6)}
  .pl-track{grid-template-columns:repeat(2,1fr)}
  .pl-tenants{grid-template-columns:1fr}
  .pl-tenant.is-locked::after{margin:10px 0 0;width:100%;border:1px solid var(--bad-line);border-radius:6px}
}
@media(prefers-reduced-motion:reduce){
  .pl-satellites,.pl-sat span,.pl-part::before,.pl-merge .beam,.pl-stage,.pl-packet i,.pl-fallback i,.pl-tenant.is-locked::after,.pl-breach i,.pl-answer .pl-cursor{animation:none}
  .pl-merge .beam{stroke-dasharray:none;stroke-dashoffset:0;opacity:.55}
  .pl-tenant.is-locked::after{opacity:1}
}