/* Jardín de mariposas — XV romántico encantado. Sobrescribe el kit (kit/base.css).
   Solo var(--mi-*) / var(--k-*); nunca {{ theme.x }} aquí. */

.m {
  --k-orn-1: var(--k-primary);
  --k-orn-2: var(--k-secondary);
  --k-orn-3: var(--k-accent);
  background:
    radial-gradient(60% 30% at 0% 10%, color-mix(in srgb, var(--k-secondary) 70%, transparent), transparent 70%),
    radial-gradient(60% 30% at 100% 30%, color-mix(in srgb, var(--k-accent) 22%, transparent), transparent 70%),
    var(--k-page-bg);
  background-size: auto, auto, var(--k-page-bg-size);
}
h2 { font-weight: 400; }

/* Portada: arco con mariposas en vuelo y flores silvestres */
.m-hero { display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: clamp(36px, 8vw, 64px) var(--k-gap) clamp(48px, 10vw, 88px); overflow: hidden; text-align: center; }
.m-frame { position: relative; width: min(70vw, 320px); margin: .6rem auto 0; }
.m-photo { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 999px 999px 18px 18px; background: var(--k-soft); box-shadow: 0 0 0 8px var(--k-surface), 0 0 0 9px var(--k-secondary), 0 30px 60px -34px rgba(0, 0, 0, .45); }
.m-photo img { width: 100%; height: 100%; object-fit: cover; }
.m-fly { position: absolute; width: 56px; }
.m-fly--a { top: 6%; left: -18%; transform: rotate(-18deg); }
.m-fly--b { top: 28%; right: -16%; width: 42px; transform: rotate(16deg); --k-orn-1: var(--k-accent); }
.m-fly--c { bottom: 28%; left: -12%; width: 32px; transform: rotate(-6deg); }
.m-flowers { position: absolute; right: -14%; bottom: -10%; width: 44%; }
.m-flowers--small { position: static; width: 80px; }
.m:not(.m--orn) .m-fly, .m:not(.m--orn) .m-flowers, .m:not(.m--orn) .m-divider { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .m-fly--a { animation: m-float 6s ease-in-out infinite; }
  .m-fly--b { animation: m-float 7s ease-in-out -2s infinite; }
}
@keyframes m-float { 50% { translate: 0 -10px; } }
.m-name { margin: .4rem 0 0; font-size: clamp(3.6rem, 18vw, 6.8rem); font-weight: 400; line-height: 1; }
.m-date { margin: 0; font-size: 1rem; letter-spacing: .04em; }
.m-countdown > div { box-shadow: 0 0 0 1px var(--k-secondary); }
.m-countdown strong { font-family: var(--k-font-body); font-weight: 600; }

/* Secciones */
.m-divider { width: 64px; }
.m .k-quote { font-family: var(--k-font-body); font-style: normal; font-size: clamp(1.1rem, 4.2vw, 1.3rem); line-height: 1.6; }
.m-parents { display: grid; gap: .3rem; margin: 1.4rem 0 0; font-weight: 600; font-size: 1.1rem; }
.m-parents .k-eyebrow { margin: 0; }
.m-soft { background: color-mix(in srgb, var(--k-secondary) 30%, transparent); }
.m-card { border-radius: 26px; }
.m-card h3 { font-family: var(--k-font-body); font-size: 1.3rem; font-weight: 600; }
.m-note { color: var(--k-muted); font-style: italic; }

/* Padrinos y chambelanes */
.m-people { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.m-people .k-person { margin: 0; }
.m-people .k-person__name { font-size: 1.8rem; }
.m-chambelanes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.m-chambelanes li { padding: .55rem 1.2rem; border-radius: 999px; background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-secondary); font-weight: 600; }

/* Regalos, confirmación, compartir */
.m .m-sobres { background: var(--k-primary); color: var(--k-on-primary); }
.m-sobres h3 { margin: 0 0 .4rem; font-family: var(--k-font-body); font-size: 1.35rem; font-weight: 700; }
.m-sobres p { margin: 0; }
.m-rsvp { text-align: left; }
.m-share { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.m-footer { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.m-hashtag { margin: 0; color: var(--k-primary); font-weight: 700; letter-spacing: .04em; }