/* Hacienda — mexicano contemporáneo. Sobrescribe el kit (kit/base.css).
   Solo var(--mi-*) / var(--k-*); nunca {{ theme.x }} aquí. */

.h {
  --k-orn-1: var(--k-primary);
  --k-orn-2: var(--k-secondary);
  --k-orn-3: var(--k-accent);
  --h-wall: color-mix(in srgb, var(--k-accent) 11%, var(--k-bg));
}
@supports not (color: color-mix(in srgb, red, blue)) { .h { --h-wall: var(--k-bg); } }
h2 { font-weight: 500; }
h2::after { content: ""; display: block; width: 46px; height: 3px; margin: .7rem auto 0; border-radius: 2px; background: var(--k-accent); }

/* Cenefa (máscara repetida, toma el color de la cenefa) */
.h-band { height: 30px; background: var(--k-secondary); -webkit-mask: url(../kit/orn/boda-cenefa.svg) left center / 60px 30px repeat-x; mask: url(../kit/orn/boda-cenefa.svg) left center / 60px 30px repeat-x; }

/* Portada en arco con marco de azulejo */
.h-hero { display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: clamp(28px, 7vw, 56px) var(--k-gap) clamp(48px, 10vw, 88px); overflow: hidden; text-align: center; }
.h-archway { position: relative; width: min(78vw, 360px); padding: 12px; border-radius: 999px 999px 0 0; background: repeating-conic-gradient(var(--k-secondary) 0 25%, var(--k-surface) 0 50%) 0 0 / 16px 16px; box-shadow: 0 30px 60px -38px rgba(0, 0, 0, .6); }
.h-photo { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; border: 4px solid var(--k-primary); background: var(--k-soft); }
.h-photo img { width: 100%; height: 100%; object-fit: cover; }
.h-flower { position: absolute; width: 58%; pointer-events: none; }
.h-flower--left { left: -32%; top: 4%; transform: rotate(-12deg) scaleX(-1); }
.h-flower--right { right: -30%; bottom: 10%; transform: rotate(8deg); }
.h:not(.h--orn) .h-flower, .h:not(.h--orn) .h-tile { display: none; }
.h-names { margin: 0; font-size: clamp(2.8rem, 12vw, 5.2rem); font-weight: 500; line-height: 1.02; }
.h-date { margin: 0; font-size: 1.05rem; letter-spacing: .04em; }
.h-countdown > div { border-radius: 4px; background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-secondary), 0 4px 0 var(--k-secondary); }

/* Bienvenida */
.h-tile { display: block; width: 64px; margin: 0 auto 1.2rem; }
.h-tile--small { width: 44px; margin-bottom: .8rem; }
.h-parents { display: grid; gap: .5rem; margin-top: 1.4rem; }
@media (min-width: 640px) { .h-parents { grid-template-columns: 1fr 1fr; } }
.h-parents p { margin: 0; font-weight: 700; }

/* Muros encalados alternos y tarjetas */
.h-wall { background: var(--h-wall); }
.h-card { padding: clamp(22px, 5vw, 32px); border-radius: 6px; background: var(--k-surface); box-shadow: inset 0 0 0 1px var(--k-secondary), 0 18px 40px -34px rgba(0, 0, 0, .5); }
.h-place { border-top: 6px solid var(--k-primary); }
.h-place h3 { font-size: 1.5rem; }
.h-note { color: var(--k-muted); font-style: italic; }

/* Itinerario: marcadores cuadrados tipo azulejo */
.h-timeline li::before { border-radius: 2px; transform: rotate(45deg); background: var(--k-primary); }

/* Padrinos */
.h-padrinos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.h-padrinos .k-person { margin: 0; }
.h-padrinos .k-person__name { font-size: 1.35rem; }

/* Historia */
.h-story { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.h-story li { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 640px) { .h-story li { grid-template-columns: 190px 1fr; gap: 1.8rem; } }
.h-story__photo { width: min(58vw, 190px); margin-inline: auto; padding: 6px; border-radius: 999px 999px 0 0; background: repeating-conic-gradient(var(--k-secondary) 0 25%, var(--k-surface) 0 50%) 0 0 / 10px 10px; }
.h-story__photo img { width: 100%; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; object-fit: cover; }
.h-story h3 { margin: .2rem 0; font-size: 1.4rem; }
.h-story p { margin: 0; color: var(--k-muted); }

/* Lluvia de sobres destacada */
.h-sobres { padding: clamp(24px, 6vw, 36px); border-radius: 6px; background: var(--k-primary); color: var(--k-on-primary); }
.h-sobres h3 { margin: 0 0 .5rem; font-size: 1.6rem; }
.h-sobres p { margin: 0; }
.h-rsvp { text-align: left; }
.h-share { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

/* Pie */
.h-footer { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.h-flower--footer { position: static; width: min(220px, 60%); transform: none; }
.h-hashtag { margin: 0; color: var(--k-primary); font-weight: 700; letter-spacing: .04em; }