/* ============================================================
 * Redes sociais + animações da página inicial
 * As animações só rodam quando o dono deixa ligado em Personalização
 * (classe .hs-anim no <body>) e respeitam "reduzir movimento".
 * ========================================================== */

/* ---------- Botões de redes ---------- */
.hs-redes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.hs-rede{--brand:#E5C158;position:relative;display:inline-flex;align-items:center;height:46px;min-width:46px;border-radius:99px;
  border:1px solid var(--hm-line,rgba(255,255,255,.08));background:color-mix(in srgb,var(--color-text) 3.5%,transparent);color:var(--color-text);text-decoration:none;
  transition:transform .28s cubic-bezier(.2,1.3,.4,1),border-color .25s,background .25s,box-shadow .3s;-webkit-tap-highlight-color:transparent}
.hs-rede::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--brand) 32%,transparent),transparent 70%);opacity:0;transition:opacity .25s}
.hs-ico{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center;font-size:17px;color:var(--brand);transition:color .25s,transform .3s}
.hs-lbl{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.02em;
  transition:max-width .38s ease,opacity .25s ease,padding .38s ease}
.hs-rede:hover,.hs-rede:focus-visible{transform:translateY(-4px);border-color:var(--brand);
  background:color-mix(in srgb,var(--brand) 13%,transparent);box-shadow:0 12px 30px color-mix(in srgb,var(--brand) 30%,transparent);outline:none}
.hs-rede:hover::before,.hs-rede:focus-visible::before{opacity:1}
.hs-rede:hover .hs-lbl,.hs-rede:focus-visible .hs-lbl{max-width:140px;opacity:1;padding-right:16px}
.hs-rede:hover .hs-ico,.hs-rede:focus-visible .hs-ico{color:var(--color-text);transform:scale(1.12) rotate(-6deg)}
.hs-rede:active{transform:translateY(-1px) scale(.95)}

/* variantes */
.hs-card{justify-content:flex-start;margin-top:14px;gap:10px}
.hs-foot{margin:0 0 14px;gap:8px}
.hs-foot .hs-rede{height:38px;min-width:38px}
.hs-foot .hs-ico{width:36px;height:36px;font-size:14px}
.hs-titulo{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--hm-mut,rgba(255,255,255,.55));margin:22px 0 0}
.hs-titulo + .hs-redes{margin-top:10px}
.hs-rodape{font-size:11px;color:var(--hm-mut,rgba(255,255,255,.55));margin-bottom:6px}
.hm-solo{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
.hm-foot .hm-wrap{display:flex;flex-direction:column;align-items:center}

/* ---------- Animações (ligadas em Personalização) ---------- */
@keyframes hsUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hsPop{0%{opacity:0;transform:translateY(16px) scale(.6)}70%{opacity:1;transform:translateY(-3px) scale(1.06)}100%{opacity:1;transform:none}}
@keyframes hsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hsShine{to{background-position:200% center}}
@keyframes hsGlow{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:.95;transform:translateX(-46%) scale(1.12)}}
@keyframes hsRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 42%,transparent)}70%,100%{box-shadow:0 0 0 12px transparent}}
@keyframes hsSweep{0%{transform:translateX(-120%) skewX(-18deg)}60%,100%{transform:translateX(220%) skewX(-18deg)}}

/* fundo com brilho que se mexe devagar */
.hs-anim .hm-hero{position:relative;overflow:hidden}
.hs-anim .hm-hero::before{content:"";position:absolute;left:50%;top:6%;width:560px;height:560px;max-width:120vw;transform:translateX(-50%);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--hm-acc,#E5C158) 24%,transparent),transparent);filter:blur(34px);
  animation:hsGlow 9s ease-in-out infinite;pointer-events:none;z-index:0}
.hs-anim .hm-hero-in{position:relative;z-index:1}

/* entrada em sequência dos elementos do topo */
.hs-anim .hm-hero-in>*:not(.hm-hero-logo):not(.hs-redes){opacity:0;animation:hsUp .7s cubic-bezier(.2,.8,.2,1) forwards}
.hs-anim .hm-hero-in>.hm-owner{animation-delay:.02s}
.hs-anim .hm-hero-in>.hm-live,.hs-anim .hm-hero-in>.hm-chip{animation-delay:.10s}
.hs-anim .hm-hero-in>.hm-title{animation-delay:.18s}
.hs-anim .hm-hero-in>.hm-copy{animation-delay:.28s}
.hs-anim .hm-hero-in>.hm-cta{animation-delay:.38s}
.hs-anim .hm-hero-in>.hm-points{animation-delay:.48s}
.hs-anim .hm-hero-logo{animation:hsFloat 6s ease-in-out infinite}
.hs-anim .hs-redes{opacity:0;animation:hsUp .5s ease .5s forwards}

/* palavra em destaque com brilho passando */
.hs-anim .hm-title em{background:linear-gradient(90deg,var(--hm-acc,#E5C158) 0%,color-mix(in srgb,var(--hm-acc,#E5C158) 45%,#fff) 50%,var(--hm-acc,#E5C158) 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:hsShine 5s linear infinite}

/* redes: entram "pulando" uma depois da outra e ficam pulsando de leve */
.hs-anim .hs-rede{opacity:0;animation:hsPop .6s cubic-bezier(.2,1.2,.4,1) forwards;animation-delay:calc(.7s + var(--i,0) * .08s)}
.hs-anim .hs-rede::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  animation:hsRing 3.4s ease-out infinite;animation-delay:calc(1.8s + var(--i,0) * .5s)}
.hs-anim .hs-rede:hover::after,.hs-anim .hs-rede:focus-visible::after{animation:none}
.hs-anim .hs-foot .hs-rede::after{display:none}

/* botão principal com brilho varrendo */
.hs-anim .hm-btn-p{position:relative;overflow:hidden}
.hs-anim .hm-btn-p::after{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120%) skewX(-18deg);
  animation:hsSweep 4.2s ease-in-out 1.6s infinite;pointer-events:none}

/* itens do "destaques" com leve subida ao passar o mouse */
.hs-anim .hm-points li{transition:transform .25s ease,color .25s ease}
.hs-anim .hm-points li:hover{transform:translateY(-2px);color:var(--color-text)}
.hs-anim .hm-points li i{color:var(--hm-acc,#E5C158);transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.hs-anim .hm-points li:hover i{transform:scale(1.25) rotate(-8deg)}

/* aparecer ao rolar (o JS marca os elementos com data-reveal) */
.hs-anim.hs-js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.hs-anim.hs-js [data-reveal].hs-in{opacity:1;transform:none}
.hs-anim .hm-card,.hs-anim .hm-tm{transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.hs-anim .hm-card:hover,.hs-anim .hm-tm:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.16);box-shadow:0 16px 40px rgba(0,0,0,.28)}

@media (hover:none){
  /* no celular não existe "passar o mouse": o nome da rede fica escondido e o toque abre direto */
  .hs-rede:hover{transform:none;box-shadow:none}
}
@media (max-width:480px){
  .hs-redes{gap:10px}
  .hs-rede{height:44px;min-width:44px}
  .hs-ico{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .hs-anim *,.hs-anim *::before,.hs-anim *::after{animation:none!important;transition:none!important}
  .hs-anim .hm-hero-in>*,.hs-anim .hs-rede,.hs-anim .hs-redes{opacity:1!important;transform:none!important}
  .hs-anim.hs-js [data-reveal]{opacity:1;transform:none}
}

/* ---------- Aba "Meus agendamentos" (cliente com ou sem conta) ---------- */
.hm-nav-link{color:var(--hm-mut);font-size:12px;font-weight:600;padding:8px 14px;border-radius:99px;text-decoration:none;transition:color .2s,background .2s}
.hm-nav-link:hover{color:var(--color-text);background:color-mix(in srgb,var(--color-text) 6%,transparent)}
/* colunas da barra inferior: ver assets/mobile_v3.css (distribui 3 a 7 itens) */
.hm-tabbar a.hm-tab-link{color:var(--hm-mut);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:16px;font-size:11px;font-weight:600;letter-spacing:.02em;text-decoration:none;min-height:44px;-webkit-tap-highlight-color:transparent}
.hm-tabbar a.hm-tab-link i{font-size:16px}
.hm-tabbar a.hm-tab-link:active{background:color-mix(in srgb,var(--color-text) 7%,transparent);color:var(--hm-acc)}