/* p3group v3: fecho (agente VIDA). O giro da marca enorme, desenhado como tubo de neon,
   girando devagar atrás do título, com luz correndo pelos arcos. O preto ainda predomina. */
.fecho{--s:min(1060px,112vh,150vw);position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;
  display:grid;align-items:center;padding-block:clamp(120px,14vw,190px)}
.fecho-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;display:grid;place-items:center;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.fecho-chao{position:absolute;left:50%;bottom:-34%;width:150%;height:78%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,77,36,.2),rgba(255,77,36,.07) 46%,transparent 100%)}
.fecho-escala{position:relative;flex:none;width:var(--s);height:var(--s);will-change:transform,opacity}
.fecho-anel{position:absolute;inset:0;will-change:transform}

/* brilho difuso (bloom) do giro: a imagem original, bem desfocada */
.fecho-bloom{position:absolute;left:7%;top:5.5%;width:83.6%;height:86.3%;max-width:none;opacity:.3;filter:blur(46px)}
/* o tubo de neon: só o contorno das formas, com brilho */
.fecho-giro{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible;
  fill:rgba(255,77,36,.05);stroke:var(--tang);stroke-width:1.6px;
  filter:drop-shadow(0 0 5px rgba(255,77,36,.9)) drop-shadow(0 0 26px rgba(255,77,36,.45))}
.fecho-giro path,.fecho-giro circle{vector-effect:non-scaling-stroke}

/* cometas: um anel fino no raio médio dos arcos, com rastro em gradiente cônico, girando */
.fecho-cometa{position:absolute;inset:13.9%;border-radius:50%;animation:fecho-volta 16s linear infinite;animation-play-state:paused;
  background:conic-gradient(from 0deg,transparent 0 76%,rgba(255,77,36,.05) 80%,rgba(255,122,77,.7) 96%,var(--osso) 99.4%,transparent 99.6%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px),#000 calc(100% - 1px),transparent 100%);
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px),#000 calc(100% - 1px),transparent 100%);
  filter:drop-shadow(0 0 6px rgba(255,77,36,.95))}
.fecho-cometa.c2{animation-duration:27s;animation-delay:-11s;opacity:.75}
.fecho.ativo .fecho-cometa{animation-play-state:running}
@keyframes fecho-volta{to{transform:rotate(360deg)}}

/* ícones dentro das três bolas do giro (ficam em pé enquanto o giro roda) */
.fecho-no{position:absolute;display:grid;place-items:center;width:10.2%;height:10.2%;border-radius:50%;transform:translate(-50%,-50%);
  color:var(--tang-brilho);font-size:calc(var(--s) * .042);
  background:radial-gradient(circle at 50% 35%,rgba(255,77,36,.28),rgba(26,8,3,.92) 70%);
  border:1px solid rgba(255,122,77,.5);box-shadow:inset 0 1px 0 rgba(255,200,180,.3),0 0 30px -4px rgba(255,77,36,.7)}
.fecho-no .ic{filter:drop-shadow(0 0 6px rgba(255,77,36,.9))}
.fecho-no.n1{left:50%;top:14.29%}
.fecho-no.n2{left:19.07%;top:67.86%}
.fecho-no.n3{left:80.93%;top:67.86%}

/* conteúdo */
.fecho-cx{position:relative;display:grid;justify-items:center;text-align:center;gap:26px}
.fecho-cx::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:min(1100px,130%);height:150%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(6,6,7,.86),rgba(6,6,7,.6) 55%,transparent 100%)}
.fecho-tit{font:600 clamp(42px,7.4vw,118px)/.94 var(--sans);letter-spacing:-.058em;color:var(--osso);text-wrap:balance;max-width:14ch}
.fecho-tit .neon{display:inline-block}
.fecho-botoes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:14px}
.fecho-botoes .btn{min-height:54px;padding:0 28px;font-size:16.5px}

@media (max-width:900px){
  /* celular: o giro inteiro vira emblema em cima, girando; o título entra pela parte de baixo dele */
  .fecho{--s:min(86vw,420px);min-height:0;align-items:start;padding-block:32px 104px}
  .fecho-luz{place-items:start center;padding-top:32px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 40px,#000 82%,transparent 100%)}
  .fecho-chao{bottom:-20%;height:60%}
  /* o texto começa uns 16px abaixo do ponto mais baixo do giro (nós e arcos chegam a ~93% do emblema em qualquer ângulo) */
  .fecho-cx{padding-top:calc(var(--s) * .93 + 16px);gap:22px}
  .fecho-cx::before{top:calc(50% + var(--s) * .46);height:110%}
  .fecho-bloom{filter:blur(26px);opacity:.36}
  .fecho-giro{stroke-width:1.3px;filter:drop-shadow(0 0 4px rgba(255,77,36,.9)) drop-shadow(0 0 14px rgba(255,77,36,.45))}
  .fecho-cometa{-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px),#000 calc(100% - 1px),transparent 100%);
    mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px),#000 calc(100% - 1px),transparent 100%)}
  .fecho-tit{max-width:10ch}
  .fecho-botoes{flex-direction:column;align-items:stretch;width:100%;max-width:360px}
}

@media (prefers-reduced-motion:reduce){
  .fecho-cometa.c2{display:none}
}