/* Ángel de la guarda — presentación al templo: alas, estrellas y luz dorada. Va después de
   kit/base.css y kit/religioso.css. Solo var(--mi-*) / var(--k-*); nunca {{ theme.x }} aquí. */

.an-hero {
  background:
    radial-gradient(50% 30% at 50% 34%, color-mix(in srgb, var(--k-accent) 30%, transparent), transparent 72%),
    linear-gradient(color-mix(in srgb, var(--k-secondary) 60%, var(--k-bg)), var(--k-bg) 80%);
}
.an-star { position: absolute; width: 20px; --k-orn-3: var(--k-accent); --k-orn-1: var(--k-surface); }
.an-star--a { top: 8%; left: 14%; }
.an-star--b { top: 16%; right: 12%; width: 26px; }
.an-star--c { top: 44%; right: 8%; width: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .an-star { animation: an-twinkle 3.6s ease-in-out infinite; }
  .an-star--b { animation-delay: -1.2s; }
  .an-star--c { animation-delay: -2.4s; }
}
@keyframes an-twinkle { 50% { opacity: .35; scale: .8; } }
.an-frame { position: relative; width: min(54vw, 230px); margin: 1.6rem auto .6rem; }
.an-frame::before { content: ""; position: absolute; top: -13%; left: 50%; width: 46%; height: 9%; translate: -50% 0; border: 3px solid var(--k-accent); border-radius: 50%; }
.rel:not(.rel--orn) .an-frame::before { display: none; }
.an-wings { position: absolute; top: -12%; left: 50%; width: 172%; translate: -50% 0; --k-orn-1: var(--k-surface); --k-orn-2: var(--k-accent); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .12)); }
.an-photo { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 50%; background: var(--k-soft); box-shadow: 0 0 0 6px var(--k-surface), 0 0 0 8px var(--k-accent), 0 26px 50px -30px rgba(0, 0, 0, .4); }
.an-photo img { width: 100%; height: 100%; object-fit: cover; }
.an .rel-name { font-size: clamp(3.6rem, 18vw, 6.6rem); font-weight: 400; line-height: 1.1; }
.an h2 { font-weight: 400; font-size: clamp(2.6rem, 10vw, 3.6rem); }
.an .rel-date { letter-spacing: .04em; }
.an .rel-countdown > div { background: var(--k-surface); }
.an .rel-welcome .k-divider { width: 36px; }
.an .rel-people .k-person__name { font-family: var(--k-font-body); }
.an .rel-card { border-radius: 26px; }
.an .rel-footer-orn { width: 96px; --k-orn-1: var(--k-primary); --k-orn-2: var(--k-secondary); }