/* El último misterio se convierte en un amanecer; después, todo queda en calma. */
#celebracion-rosario {
  position: fixed;
  inset: 0;
  width: min(900px, calc(100vw - 36px));
  max-width: none;
  max-height: calc(100dvh - 36px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  color: #fff6df;
  border: 1px solid #e7c98787;
  border-radius: 24px;
  background: #102a3c;
  box-shadow: 0 25px 110px #0009, 0 0 90px #eac88319, inset 0 0 0 7px #caa8660b;
  text-align: center;
  isolation: isolate;
  scrollbar-width: thin;
  scrollbar-color: #a88b51 #152d3c;
}
#celebracion-rosario::backdrop {
  background: #03121ae6;
  backdrop-filter: blur(9px);
}
#celebracion-rosario .celebracion-cielo {
  position: absolute;
  inset: 0;
  z-index: -3;
  border-radius: inherit;
  background: linear-gradient(180deg, #0c22384d 0%, #132e4380 38%, #081d30eb 76%, #0a2235 100%), url('../assets/imagenes/inicio.webp') center 37% / cover;
  opacity: .68;
  pointer-events: none;
}
.celebracion-amanecer {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 21%, #ffe4a666, #edc87d16 27%, transparent 62%);
}
.celebracion-particulas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.celebracion-contenido {
  position: relative;
  padding: 38px 50px 34px;
}
.celebracion-lema {
  color: #eddaae;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
}
.celebracion-emblema {
  position: relative;
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  margin: 4px auto -5px;
}
.celebracion-aureola, .celebracion-onda, .celebracion-rayos {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
}
.celebracion-aureola {
  background: radial-gradient(circle, #fff7d12e 0%, #f7d88d26 24%, #f2c87514 47%, transparent 69%);
  box-shadow: inset 0 0 0 1px #ffe9b41c, 0 0 55px #f6d79114;
}
.celebracion-onda { border: 1px solid #ffe1a042; opacity: .38; transform: scale(.87); }
.celebracion-onda-dos { inset: 0; border-style: dotted; opacity: .18; transform: none; }
.celebracion-rayos {
  inset: -28px;
  opacity: .2;
  background: repeating-conic-gradient(from 4deg, transparent 0deg 15deg, #ffecc262 17deg, transparent 20deg 34deg);
  mask-image: radial-gradient(circle, transparent 17%, #000 32%, transparent 67%);
}
.celebracion-cruz {
  position: relative;
  width: 78px;
  height: 111px;
  filter: drop-shadow(0 0 9px #fff2b867) drop-shadow(0 0 26px #ffe09740);
}
.celebracion-grupo {
  margin: 2px 0 10px;
  color: #e2c994;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
}
#celebracion-titulo {
  margin: 0;
  color: #fff6e0;
  font: 400 clamp(33px, 4.8vw, 51px) / 1.12 Georgia, 'Times New Roman', serif;
  letter-spacing: -.7px;
  text-wrap: balance;
  text-shadow: 0 2px 14px #00162694;
}
#celebracion-descripcion {
  margin: 14px 0 0;
  color: #e4ddcd;
  font-size: 16px;
  line-height: 1.6;
  text-wrap: balance;
}
.celebracion-misterios {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 25px;
  width: max-content;
  margin: 29px auto 17px;
}
.celebracion-misterios::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, #d9b76848, #ffe4a780, #d9b76848);
}
.celebracion-medallon {
  position: relative;
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  border: 1px solid #f7d897;
  background: radial-gradient(circle at 32% 22%, #fff5d2, #edce87 28%, #b98a39 70%, #80582c);
  box-shadow: inset 0 0 0 3px #55380a30, 0 0 18px #edc87721;
}
.celebracion-medallon svg { width: 16px; height: 16px; fill: #6c4817; filter: drop-shadow(0 1px 0 #fff2c46b); }
.celebracion-deseo { color: #d4c4a0; font: italic 17px / 1.5 Georgia, 'Times New Roman', serif; }
.celebracion-acciones { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.celebracion-acciones button {
  min-height: 47px;
  padding: 13px 22px;
  border: 1px solid #cfb47c6b;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.3;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.celebracion-seguir { color: #f5e5c3; background: #102b3b91; }
.celebracion-seguir:hover { border-color: #f4d69b; background: #263e46; }
.celebracion-inicio { color: #233441; background: linear-gradient(135deg, #f2dba5, #d6b774); box-shadow: inset 0 1px 0 #fff1c99c, 0 3px 18px #0002; }
.celebracion-inicio span { margin-left: 8px; }
.celebracion-inicio:hover { background: #f2dba5; box-shadow: 0 0 22px #eed18c26; }
.celebracion-cerrar {
  position: absolute;
  z-index: 3;
  right: 14px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 11px;
  border: 1px solid #e9d5a32b;
  border-radius: 50%;
  color: #e2d6b7;
  background: #10283c5c;
}
.celebracion-cerrar svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.celebracion-cerrar:hover { color: #fff5dd; background: #10283cad; border-color: #e9d5a35b; }
#celebracion-rosario .celebracion-sonido {
  position: absolute;
  z-index: 3;
  left: 14px;
  top: 14px;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 9px;
  border-color: #e9d5a32b;
  border-radius: 50%;
  background: #10283c5c;
}
#celebracion-rosario button:focus-visible { outline: 2px solid #fff0c1; outline-offset: 4px; }

.celebracion-animando .celebracion-amanecer { animation: celebracion-amanecer 7.8s ease-out both; }
.celebracion-animando .celebracion-aureola { animation: celebracion-halo 7.8s ease-out both; }
.celebracion-animando .celebracion-rayos { animation: celebracion-rayos 7.8s ease-out both; }
.celebracion-animando .celebracion-onda-uno { animation: celebracion-onda 4.9s ease-out .7s both; }
.celebracion-animando .celebracion-onda-dos { animation: celebracion-onda 5.4s ease-out 1.4s both; }
.celebracion-animando .celebracion-cruz { animation: celebracion-cruz 2.4s cubic-bezier(.2,.75,.2,1) both; }
.celebracion-animando .celebracion-medallon { animation: celebracion-medallon 1.5s ease-out calc(.7s + var(--orden) * .48s) both; }
@keyframes celebracion-amanecer { 0% { opacity: .2; } 35% { opacity: 1; } 58% { opacity: 1; filter: brightness(1.12); } 100% { opacity: 1; filter: brightness(1); } }
@keyframes celebracion-halo { 0% { transform: scale(.55); opacity: 0; } 38% { transform: scale(1.3); opacity: 1; } 68% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes celebracion-rayos { from { transform: rotate(-8deg) scale(.8); opacity: 0; } 48% { opacity: .32; } to { transform: rotate(5deg) scale(1); opacity: .2; } }
@keyframes celebracion-onda { from { transform: scale(.4); opacity: 0; } 20% { opacity: .65; } to { transform: scale(1.7); opacity: 0; } }
@keyframes celebracion-cruz { from { transform: translateY(12px) scale(.82); opacity: .1; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes celebracion-medallon { from { transform: translateY(8px) scale(.82); filter: brightness(.65); opacity: .4; } 55% { filter: brightness(1.45); box-shadow: 0 0 28px #ffe5a17a; } to { transform: none; filter: brightness(1); opacity: 1; } }

@media (max-width: 560px) {
  #celebracion-rosario { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 18px; }
  .celebracion-contenido { padding: 38px 20px 27px; }
  .celebracion-lema { font-size: 8px; letter-spacing: 2.5px; padding: 0 29px; }
  .celebracion-emblema { width: 162px; height: 162px; margin: 6px auto 0; }
  .celebracion-cruz { width: 66px; height: 95px; }
  .celebracion-grupo { letter-spacing: 1.8px; font-size: 9px; }
  #celebracion-titulo { font-size: clamp(30px, 8.5vw, 42px); }
  #celebracion-descripcion { font-size: 14px; margin-top: 12px; }
  .celebracion-misterios { gap: 19px; margin: 26px auto 17px; }
  .celebracion-medallon { width: 32px; height: 32px; }
  .celebracion-medallon svg { width: 14px; height: 14px; }
  .celebracion-deseo { font-size: 16px; }
  .celebracion-acciones { margin-top: 25px; gap: 10px; flex-direction: column; }
  .celebracion-acciones button { width: min(100%, 290px); }
  .celebracion-cerrar { top: 8px; right: 8px; width: 38px; height: 38px; padding: 10px; }
  #celebracion-rosario .celebracion-sonido { top: 8px; left: 8px; width: 38px; height: 38px; min-height: 38px; padding: 8px; }
}
@media (max-height: 670px) and (min-width: 561px) {
  .celebracion-contenido { padding-top: 24px; padding-bottom: 24px; }
  .celebracion-emblema { width: 130px; height: 130px; margin: 0 auto; }
  .celebracion-cruz { width: 56px; height: 80px; }
  #celebracion-titulo { font-size: 38px; }
  #celebracion-descripcion { margin-top: 10px; }
  .celebracion-misterios { margin-top: 21px; margin-bottom: 12px; }
  .celebracion-acciones { margin-top: 20px; }
}
@media (max-height: 520px) {
  .celebracion-emblema { width: 110px; height: 110px; }
  .celebracion-cruz { width: 47px; height: 67px; }
  .celebracion-contenido { padding-top: 22px; padding-bottom: 22px; }
  .celebracion-lema { padding: 0 30px; }
}
@media (prefers-reduced-motion: reduce) {
  #celebracion-rosario *, #celebracion-rosario *::before { animation: none !important; transition: none !important; }
  .celebracion-particulas { display: none; }
}