.article-notifications { margin: 32px 0 26px; padding: 26px; border: 1px solid #8c3239; border-radius: 16px; background: linear-gradient(125deg, #251014, #100e10); text-align: center; }
body .introduccion .article-notifications h2 { margin: 0 0 10px; padding: 0; border: 0; font-size: clamp(1.3rem, 3vw, 1.7rem); }
body .introduccion .article-notifications p { text-align: center; margin: 0 auto 20px; max-width: 620px; }
.article-notifications__button { gap: 10px; cursor: pointer; max-width: 100%; }
.article-notifications__button svg { flex-shrink: 0; }
.article-notifications__button:focus-visible { outline: 3px solid #f0c9cd; outline-offset: 4px; }
.article-notifications__button:disabled { cursor: default; opacity: .8; transform: none; }
body .introduccion .article-notifications .article-notifications__status { margin: 14px auto 0; color: #d4c6c9; font-size: .88rem; line-height: 1.5; }
@media(max-width: 480px) { .article-notifications { padding: 22px 14px; } .article-notifications__button { width: 100%; padding: 12px; } }

.article-notifications__button:not(:disabled) { animation: notificationGlow 2.6s ease-in-out infinite; }
.article-notifications__button:not(:disabled) svg { transform-origin: 50% 15%; animation: notificationBell 4.8s ease-in-out infinite; }
.article-notifications__button:hover:not(:disabled) { filter: brightness(1.18); }
@keyframes notificationGlow { 0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,.38), 0 0 0 0 rgba(225,42,59,0); } 50% { box-shadow: 0 8px 26px rgba(160,0,18,.45), 0 0 0 5px rgba(225,42,59,.16), 0 0 28px rgba(225,42,59,.3); } }
@keyframes notificationBell { 0%, 8%, 24%, 100% { transform: rotate(0); } 11%, 17% { transform: rotate(14deg); } 14%, 20% { transform: rotate(-14deg); } }
@media(prefers-reduced-motion: reduce) { .article-notifications__button:not(:disabled), .article-notifications__button:not(:disabled) svg { animation: none; } }

.article-notifications__button:active:not(:disabled) { transform: scale(.96); }
.article-notifications__button.is-activated:disabled { opacity: 1; background: linear-gradient(135deg, #780009, #c90014); border-color: #ff929b; color: #fff; box-shadow: 0 0 0 4px rgba(225,42,59,.12), 0 0 26px rgba(225,42,59,.3); animation: notificationActivated .45s ease-out; }
.article-notifications__button.is-activated svg { display: block; color: #fff; fill: #fff; stroke: #fff; filter: drop-shadow(0 0 4px rgba(255,255,255,.35)); }
.article-notifications__button.is-activated::before { content: none; }
@keyframes notificationActivated { 0% { transform: scale(.95); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
@media(prefers-reduced-motion: reduce) { .article-notifications__button.is-activated:disabled { animation: none; } .article-notifications__button:active:not(:disabled) { transform: none; } }

/* Shared appearance for music, technology and festival article layouts. */
.article-notifications { box-sizing: border-box; clear: both; color: #fff; }
.article-notifications h2 { margin: 0 0 10px; padding: 0; border: 0; color: #fff; font: 800 clamp(1.3rem, 3vw, 1.7rem)/1.3 Arial, Helvetica, sans-serif; text-align: center; }
.article-notifications p { max-width: 620px; margin: 0 auto 20px; color: #e6dddd; font: 400 1rem/1.65 Arial, Helvetica, sans-serif; text-align: center; }
.article-notifications .article-notifications__button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 12px 20px; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; background: linear-gradient(135deg, #500b0b, #b30000); color: #fff; font: 800 1rem/1.2 Arial, Helvetica, sans-serif; text-decoration: none; transition: transform .2s ease, filter .2s ease; }
.article-notifications .article-notifications__button svg { width: 22px; height: 22px; margin: 0; }
.article-notifications .article-notifications__status { margin: 14px auto 0; color: #d4c6c9; font-size: .88rem; line-height: 1.5; }
.article-notifications .article-notifications__button.is-activated:disabled { background: linear-gradient(135deg, #780009, #c90014); border-color: #ff929b; }
@media(prefers-reduced-motion: reduce) { .article-notifications .article-notifications__button { transition: none; } }