/* Festival — fiesta adolescente de noche: atardecer en franjas, palmeras, line-up de cartel y
   pulsera de acceso. Va después de kit/base.css y kit/fiesta.css. Solo var(--mi-*) / var(--k-*). */

.fe h2 { font-weight: 400; font-size: clamp(2.6rem, 10vw, 3.8rem); letter-spacing: .04em; }
.fe-hero { background: linear-gradient(var(--k-secondary), color-mix(in srgb, var(--k-secondary) 40%, var(--k-bg)) 45%, var(--k-bg) 80%); }
.fe-hero > .fe-palm { position: absolute; top: 18%; width: 118px; }
.fe-palm .k-orn { color: var(--k-bg); }
.fe-palm--l { left: -34px; rotate: -6deg; }
.fe-palm--r { right: -34px; scale: -1 1; rotate: 6deg; }
.fe-frame { position: relative; width: min(58vw, 250px); margin: 2rem auto 2rem; }
.fe-frame::before, .fe-frame::after { content: ""; position: absolute; border-radius: 50%; }
.fe-frame::before { inset: -12%; background: linear-gradient(var(--k-primary), var(--k-accent)); box-shadow: 0 0 60px 6px color-mix(in srgb, var(--k-accent) 40%, transparent); }
.fe-frame::after { inset: 50% -12% -12%; border-radius: 0 0 999px 999px; background: repeating-linear-gradient(transparent 0 12px, var(--k-bg) 12px 17px); }
.fs:not(.fs--orn) .fe-frame::after { display: none; }
.fe-photo { position: relative; z-index: 1; overflow: hidden; aspect-ratio: 1; border-radius: 50%; background: var(--k-soft); box-shadow: 0 0 0 5px var(--k-bg); }
.fe-photo img { width: 100%; height: 100%; object-fit: cover; }
.fe-age { position: absolute; z-index: 2; top: -12%; right: -16%; background: var(--k-accent); color: var(--fs-on-accent); box-shadow: 0 0 0 5px var(--k-bg); }
.fe .fs-name { font-weight: 400; font-size: clamp(4.6rem, 26vw, 8.4rem); line-height: .9; letter-spacing: .02em; text-transform: uppercase; color: var(--k-primary); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fe .fs-name { background: linear-gradient(var(--k-primary), var(--k-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.fe .fs-when { text-transform: uppercase; letter-spacing: .12em; font-size: .92rem; }
.fe .fs-countdown > div { background: transparent; box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-primary) 60%, transparent); }
/* Itinerario como line-up de cartel */
.fe .fs-plan .k-timeline::before, .fe .fs-plan .k-timeline li::before { display: none; }
.fe .fs-plan .k-timeline li { display: block; padding: .5rem 0; text-align: center; }
.fe .fs-plan .k-timeline time { display: block; text-align: center; letter-spacing: .14em; }
.fe .fs-plan .k-timeline h3 { font: 400 clamp(2.2rem, 10vw, 3.2rem)/1 var(--k-font-title); text-transform: uppercase; }
.fe .fs-plan .k-timeline li:nth-child(even) h3 { color: var(--k-accent); }
/* Confirmación como pulsera de acceso */
.fe .fs-rsvp { position: relative; overflow: hidden; padding-top: 2.6rem; }
.fe .fs-rsvp::before { content: ""; position: absolute; inset: 0 0 auto; height: 20px; background: repeating-linear-gradient(45deg, var(--k-primary) 0 10px, var(--k-accent) 10px 20px); }
.fe .k-card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-primary) 40%, transparent); }
.fe .fs-soft { background: color-mix(in srgb, var(--k-secondary) 35%, var(--k-bg)); }
.fe .fs-welcome .k-divider { width: 44px; }
.fe .fs-welcome .k-divider .k-orn, .fe .fs-footer-orn .k-orn { color: var(--k-accent); }
.fe .fs-footer-orn { width: 64px; }