/* Jardín de olivos — lujo discreto botánico. Sobrescribe el kit (kit/base.css).
   Solo var(--mi-*) / var(--k-*); nunca {{ theme.x }} aquí. */

.j {
  --j-vellum: color-mix(in srgb, var(--k-surface) 70%, transparent);
  --k-orn-1: var(--k-primary);
  --k-orn-2: var(--k-secondary);
  --k-orn-3: var(--k-accent);
  background:
    radial-gradient(90% 50% at 50% 0%, color-mix(in srgb, var(--k-secondary) 35%, transparent), transparent 70%),
    var(--k-page-bg);
  background-size: auto, var(--k-page-bg-size);
}
@supports not (color: color-mix(in srgb, red, blue)) { .j { --j-vellum: var(--k-surface); } }

h2 { font-weight: 400; }

/* Portada */
.j-hero { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: clamp(40px, 9vw, 72px) var(--k-gap) clamp(48px, 10vw, 88px); overflow: hidden; text-align: center; }
.j-frame { position: relative; width: min(74vw, 340px); margin: .4rem auto 0; }
.j-photo { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 999px 999px 14px 14px; background: var(--k-soft); box-shadow: 0 0 0 6px var(--k-surface), 0 0 0 7px var(--k-secondary), 0 30px 60px -36px rgba(0, 0, 0, .55); }
.j-photo img { width: 100%; height: 100%; object-fit: cover; }
.j-frame--ovalo .j-photo { border-radius: 50%; }
.j-frame--circulo .j-photo { aspect-ratio: 1; border-radius: 50%; }
.j-branch { position: absolute; width: 78%; pointer-events: none; }
.j-branch--left { left: -30%; bottom: -6%; }
.j-branch--right { right: -30%; top: 8%; transform: scale(-1, -1); }
.j:not(.j--orn) .j-branch { display: none; }
.j-mono { display: grid; place-items: center; width: 64px; height: 64px; margin-top: 1rem; border: 1px solid var(--k-accent); border-radius: 50%; color: var(--k-accent); font: 400 1.05rem/1 var(--k-font-title); letter-spacing: .04em; white-space: nowrap; }
.j-names { margin: .2rem 0 0; font-size: clamp(2.8rem, 13vw, 5.6rem); font-weight: 400; line-height: 1.05; }
.j-date { margin: 0; font-family: var(--k-font-body); font-size: 1.05rem; font-style: italic; letter-spacing: .02em; }
.j-countdown > div { background: var(--j-vellum); box-shadow: 0 0 0 1px var(--k-secondary); }
.j-countdown strong { font-family: var(--k-font-body); font-weight: 600; }
/* La letra de títulos (a menudo manuscrita) solo en nombres y encabezados grandes. */
.j-place h3, .j-story h3, .j-sobres h3 { font-family: var(--k-font-body); font-weight: 600; }

/* Bienvenida y tarjetas «papel vegetal» */
.j-vellum { position: relative; padding: clamp(24px, 6vw, 40px); border-radius: 22px; background: var(--j-vellum); box-shadow: 0 0 0 1px var(--k-secondary), 0 24px 50px -40px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.j-sprig { display: block; width: 46px; margin: 0 auto 1rem; color: var(--k-primary); }
.j-sprig--small { width: 34px; margin-bottom: .6rem; }
.j-message { margin: 0 auto; max-width: 30em; font-family: var(--k-font-body); font-size: clamp(1.1rem, 4.4vw, 1.3rem); font-style: italic; line-height: 1.55; }
.j-parents { display: grid; gap: .6rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--k-secondary); }
@media (min-width: 640px) { .j-parents { grid-template-columns: 1fr 1fr; } }
.j-parents p { margin: 0; font-weight: 600; }
.j-soft { background: color-mix(in srgb, var(--k-secondary) 22%, transparent); }
.j-place h3 { font-size: 1.4rem; }
.j-note { color: var(--k-muted); font-style: italic; }

/* Padrinos */
.j-padrinos { display: grid; gap: 1.6rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.j-padrinos .k-person { margin: 0; padding-bottom: 1.2rem; border-bottom: 1px solid var(--k-secondary); }
.j-padrinos .k-person__name { font-size: 1.5rem; }

/* Historia: fotos en arco alternadas */
.j-story { display: grid; gap: 2.4rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.j-story li { display: grid; gap: 1.2rem; align-items: center; }
@media (min-width: 640px) {
  .j-story li { grid-template-columns: 200px 1fr; gap: 2rem; }
  .j-story li:nth-child(even) { grid-template-columns: 1fr 200px; }
  .j-story li:nth-child(even) .j-story__photo { order: 2; }
}
.j-story__photo { width: min(60vw, 200px); margin-inline: auto; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 999px 999px 12px 12px; box-shadow: 0 0 0 5px var(--k-surface), 0 0 0 6px var(--k-secondary); }
.j-story__photo img { width: 100%; height: 100%; object-fit: cover; }
.j-story h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.j-story p { margin: 0; color: var(--k-muted); }

/* Regalos, confirmación, compartir */
.j-sobres h3 { font-size: 1.3rem; }
.j-sobres p { margin: 0; color: var(--k-muted); }
.j-rsvp { text-align: left; }
.j-share { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

/* Pie */
.j-footer { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding-top: 3rem; }
.j-branch--footer { position: static; width: min(260px, 70%); transform: none; }
.j-hashtag { margin: 0; color: var(--k-primary); font-weight: 600; letter-spacing: .04em; }