/* Vitral — presentación al templo: arco con vitral en tonos joya y una estrella dorada.
   Va después de kit/base.css y kit/religioso.css. Solo var(--mi-*) / var(--k-*). */

.vi { --k-orn-1: var(--k-primary); --k-orn-2: var(--k-secondary); --k-orn-3: var(--k-accent); }
.vi-hero { background: linear-gradient(color-mix(in srgb, var(--k-secondary) 55%, var(--k-bg)), var(--k-bg) 70%); }
.vi-window { width: 68px; --k-orn-1: var(--k-primary); }
.vi-frame { width: min(68vw, 300px); margin: .4rem auto .6rem; padding: 12px; border-radius: 999px 999px 18px 18px; background: repeating-conic-gradient(from -90deg at 50% 32%, var(--k-text) 0 1.2deg, var(--k-primary) 1.2deg 12deg, var(--k-text) 12deg 13.2deg, var(--k-accent) 13.2deg 24deg, var(--k-text) 24deg 25.2deg, var(--k-secondary) 25.2deg 36deg); box-shadow: inset 0 0 0 2px var(--k-text), 0 0 0 2px var(--k-text), 0 30px 60px -34px rgba(0, 0, 0, .5); }
.rel:not(.rel--orn) .vi-frame { background: var(--k-primary); }
.vi-photo { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 999px 999px 8px 8px; background: var(--k-soft); box-shadow: 0 0 0 2px var(--k-text); }
.vi-photo img { width: 100%; height: 100%; object-fit: cover; }
.vi .rel-name { font-size: clamp(2.4rem, 11vw, 4.4rem); letter-spacing: .08em; }
.vi-star { width: 28px; margin-top: -.4rem; }
.vi .rel-date { color: var(--k-primary); font-weight: 600; letter-spacing: .06em; }
.vi h2 { letter-spacing: .06em; }
.vi .rel-welcome .k-divider { width: 34px; }
.vi .rel-card { position: relative; overflow: hidden; }
.vi .rel-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--k-primary) 33%, var(--k-accent) 0 66%, var(--k-secondary) 0); }
.vi .rel-footer-orn { width: 56px; }