/* ==========================================================================
   REDES EN EL HÉROE v1 · Dr. José · 28-oct-2026
   Celular y tableta (modo app). Escritorio no cambia (ya tiene redes abajo).
   Columna de botones de cristal a la izquierda del doctor (el diente va a la
   derecha). Celular: entrada escalonada y un brillo suave de vez en cuando.
   Tableta: más grandes, flotan despacio y el brillo recorre los íconos.
   "Reducir movimiento" apaga todo (regla global de css/hero.css).
   ========================================================================== */
.jose-hsoc{display:none}
@media (max-width:1024px),(max-aspect-ratio:10/11){
  .jose-hsoc{display:flex;flex-direction:column;gap:10px;position:absolute;z-index:6;left:var(--pad);top:calc(var(--sub-top) + 22px)}
  .jose-hsoc__a{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:16px;overflow:hidden;color:var(--navy);
    background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
    border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 22px -14px rgba(15,40,110,.65),inset 0 1px 0 #fff;
    animation:hsoc-in .6s var(--ease) backwards;animation-delay:calc(.9s + var(--i)*.09s);transition:transform .2s var(--ease),background-color .2s,color .2s}
  .jose-hsoc__a .jose-ic{width:22px;height:22px;stroke-width:1.9}
  .jose-hsoc__a--wa{background:linear-gradient(160deg,var(--blue-a),var(--blue-b));color:#fff;border-color:rgba(255,255,255,.35)}
  .jose-hsoc__a::after{content:"";position:absolute;inset:-40% auto -40% -60%;width:40%;rotate:20deg;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));
    animation:hsoc-shine 7s ease-in-out infinite;animation-delay:calc(3s + var(--i)*.25s)}
  .jose-hsoc__a:active{transform:scale(.92)}
}
/* tableta (sala de espera): más grandes y con más movimiento */
@media (min-width:600px) and (max-width:1024px) and (min-height:561px),
       (min-width:600px) and (max-aspect-ratio:10/11) and (min-height:561px){
  .jose-hsoc{gap:16px;left:calc(var(--pad) + 12px);top:calc(var(--sub-top) + 60px)}
  .jose-hsoc__a{width:68px;height:68px;border-radius:22px;
    animation:hsoc-in .8s var(--ease) backwards,hsoc-float 6s ease-in-out infinite;
    animation-delay:calc(.9s + var(--i)*.12s),calc(1.8s + var(--i)*.6s)}
  .jose-hsoc__a .jose-ic{width:32px;height:32px}
  .jose-hsoc__a--wa{animation:hsoc-in .8s var(--ease) backwards,hsoc-float 6s ease-in-out infinite,ring 2.6s ease-out infinite;
    animation-delay:calc(.9s + var(--i)*.12s),calc(1.8s + var(--i)*.6s),3s}
  .jose-hsoc__a::after{animation-duration:4.5s}
}
@keyframes hsoc-in{from{opacity:0;translate:-18px 0;scale:.85}}
@keyframes hsoc-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes hsoc-shine{0%,70%{left:-60%}100%{left:130%}}