/* Picnic — fiesta adolescente «aesthetic»: mantel de cuadros, fresas, flores, canasta y la foto como
   polaroid. Va después de kit/base.css y kit/fiesta.css. Solo var(--mi-*) / var(--k-*). */

.pn h2 { font-weight: 400; font-size: clamp(2.4rem, 9vw, 3.4rem); }
.pn-hero::before { content: ""; position: absolute; inset: 0 0 46%; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--k-primary) 13%, transparent) 0 22px, transparent 22px 44px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--k-primary) 13%, transparent) 0 22px, transparent 22px 44px);
  -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
.fs:not(.fs--orn) .pn-hero::before { display: none; }
.pn-hero > .pn-berry, .pn-hero > .pn-daisy { position: absolute; }
.pn-berry { width: 46px; }
.pn-berry--a { top: 11%; left: 5%; rotate: -16deg; }
.pn-berry--b { top: 46%; right: 5%; width: 36px; rotate: 14deg; }
.pn-daisy { width: 40px; --k-orn-2: var(--k-surface); --k-orn-1: var(--k-accent); }
.pn-daisy--a { top: 3%; right: 2%; }
.pn-daisy--b { top: 54%; left: 4%; width: 30px; }
.pn-polaroid { position: relative; width: min(60vw, 250px); margin: .8rem auto .4rem; padding: 12px 12px 40px; background: var(--k-surface); rotate: -3deg; box-shadow: 0 0 0 1px var(--k-line), 0 18px 40px -18px rgba(0, 0, 0, .35); }
.pn-polaroid:has(figcaption) { padding-bottom: 0; }
.pn-tape { position: absolute; z-index: 1; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; rotate: 4deg; background: color-mix(in srgb, var(--k-accent) 55%, transparent); }
.pn-photo { overflow: hidden; aspect-ratio: 4 / 5; background: var(--k-soft); }
.pn-photo img { width: 100%; height: 100%; object-fit: cover; }
.pn-polaroid figcaption { padding: .7rem 0 .9rem; color: var(--k-primary); font: italic 400 1.6rem/1 var(--k-font-title); }
.pn-basket { width: 96px; margin: -3.4rem 0 -.6rem; translate: 92px 0; --k-orn-2: color-mix(in srgb, var(--k-accent) 25%, var(--k-surface)); }
.pn .fs-name { font-weight: 400; font-size: clamp(3.4rem, 16vw, 6rem); }
.pn .fs-countdown > div { border-radius: 6px; }
.pn .k-card { border-radius: 6px; }
.pn .fs-welcome .k-divider { width: 40px; }
.pn .fs-footer-orn { width: 90px; --k-orn-2: color-mix(in srgb, var(--k-accent) 25%, var(--k-surface)); }