:root{
  --ink:#0D0B09; --ink-2:#141110; --line:rgba(233,222,205,.14);
  --paper:#F5EFE7; --mute:#B9AE9D; --gold:#C9A96A; --gold-2:#E8CF9E;
  --r:16px; --pad:clamp(1.1rem,4vw,2.2rem);
}
@layer base, comp, fx;
@layer base{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:radial-gradient(120% 80% at 50% -10%,#1A1613 0%,var(--ink) 60%) fixed;
    color:var(--paper);font:400 clamp(1rem,.55vw + .9rem,1.08rem)/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    min-height:100svh;display:flex;flex-direction:column}
  h1,h2{line-height:1.08;letter-spacing:-.02em;margin:0 0 .5rem}
  h1{font-size:clamp(1.9rem,5vw,3.1rem);font-weight:640}
  h2{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:600}
  a{color:inherit}
  em{font-style:normal;background:linear-gradient(100deg,var(--gold-2),var(--gold));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .skip{position:absolute;left:-9999px}
  .skip:focus{left:1rem;top:1rem;z-index:9;background:var(--ink-2);padding:.6rem 1rem;border-radius:10px}
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
}
@layer comp{
  .pt-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
    gap:1rem;padding:.75rem var(--pad);background:rgba(13,11,9,.78);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:1px solid var(--line)}
  .pt-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:600;letter-spacing:-.01em}
  .pt-brand svg{width:34px;height:34px;display:block}
  .pt-word i{font-style:normal;background:linear-gradient(100deg,var(--gold-2),var(--gold));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .pt-nav{display:flex;align-items:center;gap:.9rem;font-size:.92rem;color:var(--mute)}
  .pt-nav a{text-decoration:none}
  .pt-nav a:hover,.pt-ghost:hover{color:var(--paper)}
  .pt-ghost{background:none;border:1px solid var(--line);color:var(--mute);border-radius:999px;
    padding:.35rem .9rem;font:inherit;font-size:.88rem;cursor:pointer;transition:color .2s,border-color .2s}
  .pt-ghost:hover{border-color:var(--gold)}
  main{flex:1;width:min(1120px,100%);margin-inline:auto;padding:clamp(2rem,6vw,4rem) var(--pad) 4rem}
  .pt-eyebrow{margin:0 0 .7rem;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
  .pt-lead{max-width:62ch;color:#D8CFC2;margin:.9rem 0 0}
  .pt-hero{margin-bottom:clamp(2rem,5vw,3.4rem)}
  .pt-flash{margin:0 0 1.6rem;padding:.7rem 1rem;border:1px solid rgba(201,169,106,.45);
    border-radius:12px;background:rgba(201,169,106,.08);color:var(--gold-2);font-size:.94rem}
  .pt-alerta{margin:1rem 0 0;font-size:.9rem;color:var(--mute)}
  .pt-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
    margin-bottom:clamp(2rem,5vw,3.4rem)}
  .pt-card{container-type:inline-size;border:1px solid var(--line);border-radius:var(--r);
    padding:clamp(1.1rem,2.4vw,1.6rem);background:linear-gradient(180deg,rgba(233,222,205,.045),rgba(233,222,205,.015))}
  .pt-kicker{margin:0 0 .45rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
  .pt-card p{margin:.4rem 0 0;color:#CDC3B5;font-size:.95rem}
  .pt-card.is-feito{border-color:rgba(201,169,106,.5)}
  .pt-card.is-feito .pt-kicker{color:var(--gold)}
  .pt-abrir{margin-top:1rem !important}
  .pt-link{background:none;border:0;padding:0;font:inherit;color:var(--gold);cursor:pointer;
    text-decoration:underline;text-underline-offset:3px}
  .pt-link:hover{color:var(--gold-2)}
  .pt-mods{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
  .pt-mods li{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
    padding:.5rem .7rem;border:1px solid var(--line);border-radius:10px;font-size:.9rem}
  .pt-mods em{font-style:normal;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
  .pt-mods li.is-live{border-color:rgba(201,169,106,.5)}
  .pt-mods li.is-live em{color:var(--gold)}
  .pt-mod.is-live{border-color:rgba(201,169,106,.42)}
  .pt-aula{max-width:70ch}
  .pt-bloco{margin:clamp(1.6rem,4vw,2.6rem) 0 0}
  .pt-bloco h2{color:var(--gold-2)}
  .pt-bloco p{margin:.9rem 0 0;color:#D8CFC2}
  .pt-fim{margin:clamp(2rem,5vw,3rem) 0 0;padding-top:1.6rem;border-top:1px solid var(--line)}
  .pt-auth{max-width:34rem;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.1rem,3vw,1.8rem);
    background:rgba(20,17,16,.6)}
  .pt-tabs{display:flex;gap:.4rem;margin-bottom:1.2rem}
  .pt-tabs button{flex:1;background:none;border:1px solid var(--line);border-radius:999px;color:var(--mute);
    padding:.5rem .8rem;font:inherit;font-size:.92rem;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
  .pt-tabs button[aria-selected="true"]{color:var(--ink);background:linear-gradient(100deg,var(--gold-2),var(--gold));
    border-color:transparent;font-weight:600}
  .pt-form{display:grid;gap:.85rem}
  /* display: grid ganha do [hidden] do UA — sem isto as abas aparecem juntas */
  .pt-form[hidden]{display:none}
  .pt-form label{display:grid;gap:.35rem;font-size:.85rem;color:var(--mute)}
  .pt-form small{color:#8E8477}
  .pt-form input[type=email],.pt-form input[type=text],.pt-form input[type=password]{
    width:100%;background:#100D0C;border:1px solid var(--line);border-radius:10px;color:var(--paper);
    padding:.7rem .8rem;font:inherit;font-size:1rem}
  .pt-tracks{border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;margin:0}
  .pt-tracks legend{padding:0 .35rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
  .pt-pick{display:flex;align-items:center;gap:.55rem;color:var(--paper);font-size:.95rem}
  .pt-pick input{accent-color:var(--gold);width:1.05rem;height:1.05rem}
  .pt-cta{margin-top:.3rem;border:0;border-radius:999px;padding:.85rem 1.2rem;font:inherit;font-weight:640;
    color:#231B10;background:linear-gradient(100deg,var(--gold-2),var(--gold));cursor:pointer;
    translate:var(--tx,0) var(--ty,0);transition:filter .2s}
  .pt-cta:hover{filter:brightness(1.06)}
  .pt-cta[disabled]{opacity:.6;cursor:progress}
  .pt-cta[data-done="1"]{background:none;border:1px solid var(--gold);color:var(--gold)}
  .pt-msg{margin:.2rem 0 0;min-height:1.2em;font-size:.88rem;color:var(--gold)}
  .pt-msg.is-err{color:#F0A9A0}
  .pt-panel{border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.1rem,3vw,1.7rem);
    background:rgba(20,17,16,.6)}
  .pt-panel dl{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));margin:1rem 0 0}
  .pt-panel dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
  .pt-panel dd{margin:.25rem 0 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
  .pt-note{margin:1.1rem 0 0;font-size:.82rem;color:var(--mute)}
  .pt-foot{border-top:1px solid var(--line);padding:1.4rem var(--pad);color:var(--mute);font-size:.86rem}
  .pt-foot p{margin:0}
}
@layer fx{
  @property --glow{syntax:'<number>';inherits:true;initial-value:0}
  .pt-card,.pt-bloco{opacity:.001;transform:translateY(14px);animation:pt-rise linear both;
    animation-timeline:view();animation-range:entry 0% cover 26%}
  @container card (min-width:0px){.pt-card h2{text-wrap:balance}}
  @keyframes pt-rise{to{opacity:1;transform:none}}
  body:has(.pt-form[data-busy]) .pt-cta{cursor:progress}
  @media (prefers-reduced-motion:reduce){
    .pt-card,.pt-bloco{opacity:1;transform:none;animation:none}
    *{transition-duration:.01ms !important}
  }
}

/* ── marca viva da B&G: palco 3D, holografia e o robô piscando ────────────── */
@property --bg-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --bg-beat{syntax:'<number>';inherits:true;initial-value:0}

.bg-stage{
  --rx:0deg; --ry:0deg; --px:50%; --py:50%;
  perspective:900px; perspective-origin:var(--px) var(--py);
  container-type:inline-size; width:100%; max-width:var(--bg-max,236px);
  margin:0 0 clamp(1rem,2.4vw,1.7rem);
}
.bg-stage--compact{--bg-max:132px;margin-bottom:.9rem}
.bg-stage-in{
  position:relative; transform-style:preserve-3d; will-change:transform;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.bg-art{display:block;transform-style:preserve-3d;transform:translateZ(26px)}
/* ── profundidade infinita DENTRO do escudo original ───────────────────────
   O mesmo contorno do escudo repetido sete vezes, afundando para o centro em
   fila contínua: quando um some no fundo, outro nasce na borda — o poço não
   tem fim porque o ciclo não tem fim. Recortado pelo clipPath da própria arte. */
.bg-well{fill:url(#bgWell)}
.bg-depth{filter:blur(.7px)}
.bg-ring-d{fill:none;stroke:#3ea6cd;stroke-width:1.5;opacity:0;
  transform-box:view-box;transform-origin:200px 318px;
  animation:bg-well 7s linear infinite}
.bg-ring-d--0{animation-delay:-0s}
.bg-ring-d--1{animation-delay:-1s}
.bg-ring-d--2{animation-delay:-2s}
.bg-ring-d--3{animation-delay:-3s}
.bg-ring-d--4{animation-delay:-4s}
.bg-ring-d--5{animation-delay:-5s}
.bg-ring-d--6{animation-delay:-6s}
@keyframes bg-well{
  0%{transform:scale(1.02);opacity:0}
  10%{opacity:.26}
  70%{opacity:.10}
  100%{transform:scale(.045);opacity:0}
}
.bg-art .bg-robot{width:100%;height:auto;display:block;--bgl-word:#F3ECE1;
  filter:drop-shadow(0 18px 34px rgba(0,140,190,.28))}
/* Profundidade DENTRO do desenho: grupo de SVG não entra no preserve-3d do HTML
   (translateZ ali arranca a peça do lugar — visto na prévia local), então o
   volume vem de paralaxe 2D no mesmo compasso da inclinação do palco. */
/* head e body já vinham com translate(200,130) e translate(200,255) no atributo:
   o CSS substitui o atributo, então a base entra de novo no calc. */
.bg-z-shield{transform:translate(calc(var(--nx,0) * -1.6px),calc(var(--ny,0) * -1.2px))}
.bg-z-head{transform:translate(calc(200px + var(--nx,0) * 4px),calc(130px + var(--ny,0) * 3px))}
.bg-z-body{transform:translate(calc(200px + var(--nx,0) * 2.2px),calc(255px + var(--ny,0) * 1.6px))}

/* halo: o brilho que respira junto com a antena */
.bg-halo{position:absolute;inset:-18% -14% -6%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,212,255,.30),rgba(0,150,210,.10) 58%,transparent 72%);
  filter:blur(12px);transform:translateZ(-46px);
  animation:bg-breathe 2.2s ease-in-out infinite}
/* anel de órbita futurista, no plano de trás */
.bg-ring{position:absolute;left:50%;top:46%;width:112%;aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;transform:translateZ(-60px) rotateX(74deg);
  border:1px solid rgba(0,212,255,.22);
  box-shadow:0 0 0 1px rgba(201,169,106,.10) inset,0 0 26px rgba(0,180,240,.14);
  animation:bg-spin 18s linear infinite}
/* holografia varrendo a superfície */
.bg-sheen{position:absolute;inset:0;pointer-events:none;transform:translateZ(42px);
  background:linear-gradient(var(--bg-ang),transparent 38%,rgba(190,240,255,.16) 48%,
    rgba(255,255,255,.30) 50%,rgba(190,240,255,.16) 52%,transparent 62%);
  mix-blend-mode:screen;opacity:.0;animation:bg-sheen 7s ease-in-out infinite}
/* piso: reflexo que ancora a peça no espaço */
.bg-floor{position:absolute;left:8%;right:8%;bottom:-9%;height:16%;transform:translateZ(-70px);
  background:radial-gradient(closest-side,rgba(0,190,255,.22),transparent 74%);filter:blur(7px)}

/* olhos e antena — o piscar que veio da logo original, agora dirigido pelo site */
@keyframes bgBlink{0%,90%,100%{opacity:1}93%,97%{opacity:.10}}
@keyframes bgAnt{0%,100%{opacity:.85}25%,75%{opacity:1}50%{opacity:.40}}
@keyframes bg-breathe{0%,100%{opacity:.55;transform:translateZ(-46px) scale(.94)}
  50%{opacity:1;transform:translateZ(-46px) scale(1.06)}}
@keyframes bg-spin{to{transform:translateZ(-60px) rotateX(74deg) rotate(360deg)}}
@keyframes bg-sheen{0%,62%{opacity:0;--bg-ang:0deg}72%{opacity:.9}100%{opacity:0;--bg-ang:220deg}}
.bg-eye{animation:bgBlink 5.2s ease-in-out infinite;transform-origin:center}
.bg-ant{animation:bgAnt 2.2s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(0,229,255,.9))}

@container (max-width:150px){.bg-ring,.bg-floor{display:none}}
@media (hover:none){.bg-sheen{animation-duration:9s}}
@media (prefers-reduced-motion:reduce){
  .bg-eye,.bg-ant,.bg-halo,.bg-ring,.bg-sheen{animation:none}
  .bg-ring-d{animation:none;opacity:.22}
  .bg-ring-d--0{transform:scale(1.00)}
  .bg-ring-d--1{transform:scale(0.87)}
  .bg-ring-d--2{transform:scale(0.74)}
  .bg-ring-d--3{transform:scale(0.61)}
  .bg-ring-d--4{transform:scale(0.48)}
  .bg-ring-d--5{transform:scale(0.35)}
  .bg-ring-d--6{transform:scale(0.22)}
  .bg-halo{opacity:.7}
  .bg-stage-in{transform:none;transition:none}
}