/* Una comunidad, dos accesos directos con las marcas de cada canal. */
.community-join{box-sizing:border-box;max-width:720px;margin:20px auto 12px;padding:24px 22px 22px;border:1px solid #b9aa89;border-radius:6px;background:#fbf3df;color:#24483b;text-align:center}
.community-join h2{margin:0 0 20px;padding:0;font:700 clamp(1.25rem,3vw,1.65rem)/1.15 "League Spartan",sans-serif;letter-spacing:-.025em;text-transform:none}
.community-join-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:560px;margin:auto}
.community-join-button{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:72px;padding:12px 16px;box-sizing:border-box;border:1px solid #175537;border-radius:5px;background:#176940;color:#fff;text-decoration:none;font:700 1.05rem/1.15 "League Spartan",sans-serif;letter-spacing:0;box-shadow:0 4px 0 #123f29;animation:community-gentle-lift 5.6s ease-in-out infinite;transition:filter .2s}
.community-join-telegram{background:#12678d;border-color:#165572;box-shadow:0 4px 0 #11405a;animation-delay:-2.8s}
.community-brand-disc{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;box-sizing:border-box;border-radius:50%;background:#25d366;color:#fff}
.community-join-telegram .community-brand-disc{background:#2aabee}
.community-brand-disc .community-brand-mark{display:block;width:26px;height:26px;flex:none;fill:currentColor}
.community-join-arrow{margin-left:auto;font-size:1.2rem;opacity:.8}
.community-join-button:hover,.community-join-button:focus-visible{animation-play-state:paused;filter:brightness(1.08)}
.community-join-button:focus-visible{outline:3px solid #8d2531;outline-offset:5px}
@keyframes community-gentle-lift{0%,32%,100%{transform:translateY(0)}16%{transform:translateY(-3px)}}
@media(max-width:560px){.community-join{padding:20px 14px 19px;margin-top:16px}.community-join h2{margin-bottom:17px}.community-join-actions{gap:12px}.community-join-button{min-height:100px;flex-direction:column;gap:8px;padding:12px 8px;font-size:1rem}.community-join-arrow{display:none}.community-brand-disc{flex-basis:38px;width:38px;height:38px}.community-brand-disc .community-brand-mark{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.community-join-button{animation:none;transition:none}}

/* Logotipos originales tratados como sellos impresos de cómic de los años 50–60. */
.community-join .community-brand-disc{position:relative;isolation:isolate;overflow:visible;flex:0 0 58px;width:58px;height:58px;border:2px solid #172c26;border-radius:49% 51% 48% 52%;background:#f8e9c5;color:#214b36;box-shadow:3px 4px 0 #172c26,5px 6px 0 #b88b4d;transform:rotate(-7deg)}
.community-join-telegram .community-brand-disc{background:#f8e9c5;color:#254f60;border-radius:52% 48% 51% 49%;transform:rotate(7deg)}
.community-brand-disc::before{content:"";position:absolute;z-index:0;inset:3px;border:1px solid #172c2655;border-radius:50%;background:radial-gradient(circle,#70552c40 .7px,transparent .9px) right bottom/3px 3px;opacity:.7;pointer-events:none}
.community-join .community-brand-disc .community-brand-mark{position:relative;z-index:1;width:34px;height:34px;transform:rotate(7deg);filter:drop-shadow(1px 1px 0 #fff6df)}
.community-join-telegram .community-brand-disc .community-brand-mark{transform:rotate(-7deg)}
@media(max-width:560px){.community-join .community-brand-disc{flex-basis:50px;width:50px;height:50px;box-shadow:3px 3px 0 #172c26,5px 5px 0 #b88b4d}.community-join .community-brand-disc .community-brand-mark{width:29px;height:29px}}
