/* A abertura: enquanto a página carrega, a marca (o 7 e a palavra ENCANTOS)
   no centro e um anel verde girando embaixo. Some sozinha quando a página
   fica pronta (window.fecharAbertura), ou depois de alguns segundos. */
.abertura{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:#fff;transition:opacity .35s ease,visibility .35s ease}
.abertura.saindo{opacity:0;visibility:hidden}
.abertura-marca{display:flex;align-items:center;gap:12px;animation:aberturaEntra .5s ease both}
.abertura-marca .a7{width:64px;height:64px;display:block}
.abertura-marca .apalavra{height:34px;width:auto;display:block}
/* o anel: um degradê verde em volta, com o miolo vazado, girando */
.abertura-anel{width:38px;height:38px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(69,217,126,0) 0 18%,#45D97E 60%,#0E7A5A 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 4px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 4px));
  animation:aberturaGira .85s linear infinite}
@keyframes aberturaGira{to{transform:rotate(360deg)}}
@keyframes aberturaEntra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:420px){
  .abertura-marca .a7{width:52px;height:52px}
  .abertura-marca .apalavra{height:27px}
}
@media (prefers-reduced-motion: reduce){ .abertura-anel{animation-duration:2.4s} .abertura-marca{animation:none} }