/* Páginas de gracias (scripts/gracias.py). Sobre actividad.css: la portada de chocolate, centrada, con una
   tilde que se dibuja y granos de cacao que caen una sola vez. Con «reducir movimiento» todo queda quieto. */
.pg-cabeza { overflow: hidden; padding: 96px 0 72px; text-align: center; }
.pg-centro { position: relative; z-index: 2; max-width: 760px; }
.pg .pa-cabeza h1 { margin: 6px auto 18px; font-size: clamp(34px, 4.4vw, 58px); }
.pg-texto p { max-width: 640px; margin: 0 auto 12px; font-size: 19px; line-height: 1.6; color: #F3E3CF; }
.pg-texto p:first-child { color: #FFD9B0; font-weight: 600; }
.pg-horario { display: inline-flex; align-items: center; gap: 10px; margin: 18px auto 0; padding: 10px 18px; border-radius: 999px; background: rgba(255, 246, 234, .08); color: #E9D7C1; font-size: 15px; text-align: left; }
.pg-horario svg { flex: none; width: 22px; height: 22px; color: #F2B544; }
.pg-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.pg-ctas svg { width: 20px; height: 20px; }
.pg-inicio, .pg-inicio:visited { display: inline-block; margin-top: 26px; color: #E9D7C1; font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.pg-inicio:hover { color: #fff; }
.pg-otras { padding-top: 40px; padding-bottom: 96px; }

/* La tilde: un aro que se completa y una marca que se dibuja, después un latido */
.pg-check { display: block; width: 108px; height: 108px; margin: 0 auto 18px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pg-check__aro { stroke: #F2B544; stroke-width: 6; stroke-dasharray: 327; stroke-dashoffset: 0; }
.pg-check__tilde { stroke: #FFF6EA; stroke-width: 8; stroke-dasharray: 70; stroke-dashoffset: 0; }

/* Granos de cacao que caen detrás del texto, una sola vez */
.pg-lluvia { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pg-grano { position: absolute; top: -60px; left: var(--x); width: 26px; height: 36px; opacity: 0; transform: scale(var(--s)) rotate(var(--r)); }
.pg-grano svg { display: block; width: 100%; height: 100%; fill: #7A4A2A; }
.pg-grano:nth-child(3n) svg { fill: #A0673E; }
.pg-grano:nth-child(4n) svg { fill: #C98B5A; }
.pg-grano__raya { fill: none; stroke: rgba(255, 233, 205, .45); stroke-width: 1.4; }

@media (prefers-reduced-motion: no-preference) {
  .pg-check { animation: pg-latido .5s cubic-bezier(.3, 1.6, .5, 1) 1.15s both; }
  .pg-check__aro { animation: pg-trazo .9s cubic-bezier(.6, 0, .3, 1) .15s both; stroke-dashoffset: 327; }
  .pg-check__tilde { animation: pg-trazo-tilde .45s ease-out .8s both; stroke-dashoffset: 70; }
  .pg-centro > :not(.pg-check) { animation: pg-sube .7s cubic-bezier(.2, .7, .2, 1) both; }
  .pg-centro > .pa-sello { animation-delay: .35s; }
  .pg-centro > h1 { animation-delay: .45s; }
  .pg-centro > .pg-texto { animation-delay: .6s; }
  .pg-centro > .pg-horario { animation-delay: .75s; }
  .pg-centro > .pg-ctas { animation-delay: .9s; }
  .pg-centro > .pg-inicio { animation-delay: 1s; }
  .pg-grano { animation: pg-cae 3.4s cubic-bezier(.35, 0, .6, 1) var(--d) forwards; }
}
@keyframes pg-trazo { to { stroke-dashoffset: 0; } }
@keyframes pg-trazo-tilde { to { stroke-dashoffset: 0; } }
@keyframes pg-latido { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes pg-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pg-cae {
  0% { opacity: 0; transform: translateY(0) scale(var(--s)) rotate(var(--r)); }
  12% { opacity: .9; }
  80% { opacity: .75; }
  100% { opacity: 0; transform: translateY(680px) scale(var(--s)) rotate(calc(var(--r) + 140deg)); }
}

@media (max-width: 640px) {
  .pg-cabeza { padding: 64px 0 56px; }
  .pg-texto p { font-size: 17px; }
  .pg-ctas .pa-btn { width: 100%; }
  .pg-horario { border-radius: 16px; }
}