/* Modelo 01 · Olivar */
:root{
  --i-bg:#EFEBDD; --i-ink:#2F3522; --i-acc:#6F7B45; --i-soft:#E3DFCB; --i-line:#C9C7A8;
  --i-display:'Marcellus',Georgia,serif; --i-body:'Spectral',Georgia,serif; --i-script:'Pinyon Script',cursive;
  --ol-olive:#3B4128; --ol-ochre:#B5893F;
  --stage-bg:#2F3522; --stage-ink:#EFEBDD;
}
body{font-size:18px;font-weight:300}
.stage__hint{font-family:var(--i-script);font-size:clamp(34px,8vw,48px)}

.ol-letter{height:100%;display:flex;flex-direction:column;align-items:center;padding-top:7%;gap:2px;color:var(--i-ink);background:var(--i-bg)}
.ol-letter__br{width:44%;color:var(--i-acc)}
.ol-letter__names{font-family:var(--i-script);font-size:9cqw;line-height:1.1}
.ol-letter__names i{font-family:var(--i-display);font-style:normal;font-size:.5em;color:var(--i-acc)}
.ol-letter__date{font-family:var(--i-display);font-size:2.6cqw;letter-spacing:.24em}

.inv{max-width:640px;margin:0 auto;padding:0 24px;overflow:hidden}

.ol-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:76px 0 56px}
.ol-arch{width:min(340px,78vw);aspect-ratio:3/4;border-radius:999px 999px 6px 6px;overflow:hidden;box-shadow:0 0 0 1px var(--i-line),0 0 0 10px var(--i-bg),0 0 0 11px var(--i-line)}
.ol-arch img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 2.4s var(--ease-out)}
html.is-opened .ol-arch img{transform:scale(1)}
.ol-br{width:220px;max-width:64%;color:var(--i-acc)}
.ol-br--hero{margin-top:-30px;position:relative;width:260px;max-width:72%}
.ol-kick{font-style:italic;font-size:19px;margin:4px 0 8px;color:var(--i-acc)}
.ol-names{font-family:var(--i-script);font-size:clamp(64px,17vw,96px);line-height:1;margin:22px 0 6px}
.ol-names span{display:block}
.ol-names .ol-amp{font-family:var(--i-display);font-size:.34em;color:var(--i-acc);margin:6px 0 2px}
.ol-date{font-family:var(--i-display);font-size:22px;letter-spacing:.28em;font-variant-numeric:lining-nums}
.ol-city{font-style:italic;font-size:19px;margin-top:6px;color:var(--i-acc)}

.ol-sec{padding:64px 0;text-align:center;position:relative}
.ol-sec+.ol-sec::before{content:"";position:absolute;top:0;left:50%;width:7px;height:7px;background:var(--i-acc);transform:translate(-50%,-50%) rotate(45deg);box-shadow:-60px 0 0 -3px var(--i-line),60px 0 0 -3px var(--i-line)}
.ol-h{font-family:var(--i-script);font-size:clamp(46px,12vw,60px);line-height:1;color:var(--i-acc);margin-bottom:28px}
.ol-h3{font-family:var(--i-display);font-size:14px;letter-spacing:.3em;text-transform:uppercase;margin:44px 0 16px}
.ol-welcome p{font-size:clamp(21px,5.4vw,25px);font-style:italic;line-height:1.5;max-width:30ch;margin:0 auto}

.ol-cd{max-width:420px;margin:0 auto}
.ol-cd .cd__u{padding:18px 4px 14px;border:1px solid var(--i-line);border-radius:999px 999px 4px 4px}
.ol-cd b{font-family:var(--i-display)!important}
.ol-long{margin:22px 0 12px;font-style:italic;font-size:19px}

/* Programa: la rama */
.ol-tree{position:relative;max-width:520px;margin:0 auto}
.ol-stem{position:absolute;left:50%;top:0;width:2px;margin-left:-1px;height:100%;background:var(--i-acc);transform:scaleY(0);transform-origin:50% 0}
.ol-tree ol{list-style:none;margin:0;padding:8px 0;display:flex;flex-direction:column;gap:34px;position:relative}
.ol-step{display:grid;grid-template-columns:1fr 1fr;column-gap:72px;align-items:start;position:relative;text-align:right}
.ol-step time{grid-column:1;font-family:var(--i-display);font-size:30px;color:var(--i-ochre,#B5893F);color:var(--ol-ochre);line-height:1.1;font-variant-numeric:lining-nums}
.ol-step h3{grid-column:2;grid-row:1;text-align:left;font-family:var(--i-display);font-size:21px;line-height:1.2}
.ol-step p{grid-column:2;text-align:left;font-size:16px;font-style:italic;opacity:.85}
.ol-leaf{position:absolute;top:12px;left:50%;width:26px;color:var(--i-acc)}
.ol-leaf--l{transform-origin:100% 50%;transform:translateX(-100%) rotate(24deg)}
.ol-leaf--r{transform-origin:0 50%;transform:rotate(-24deg)}

/* Lugares */
.ol-places{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ol-place{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 18px 26px;border:1px solid var(--i-line);border-radius:999px 999px 6px 6px;background:color-mix(in srgb,var(--i-soft) 45%,transparent)}
.ol-place__lbl{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--i-acc);font-family:var(--i-display)}
.ol-place h3{font-family:var(--i-display);font-size:22px;line-height:1.2;margin-top:6px}
.ol-place p{font-size:16px;font-style:italic}
.ol-place .maplink{margin-top:auto;padding-top:10px}

/* Galería en arcos */
.ol-gallery{grid-template-columns:repeat(6,1fr);gap:10px}
.ol-gallery .gal__item{grid-column:span 3;border-radius:999px 999px 4px 4px;aspect-ratio:3/4}
.ol-gallery .gal__item:first-child{grid-column:span 6;aspect-ratio:16/10;border-radius:4px}

.ol-dl{margin:0 auto;max-width:460px;display:grid;gap:22px;text-align:center}
.ol-dl dt{font-family:var(--i-display);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--i-acc);margin-bottom:4px}
.ol-dl dd{margin:0}
.ol-stay{max-width:440px;margin:0 auto;text-align:center}
.ol-stay strong{font-family:var(--i-display);font-weight:400;font-size:19px}
.ol-stay span{font-style:italic;font-size:16px}

.ol-rsvp .rsvp{max-width:440px;margin:0 auto}
.ol-rsvp .rsvp label,.ol-rsvp .rsvp legend{font-family:var(--i-display);font-weight:400;letter-spacing:.2em}
.rsvp__opts span{font-family:var(--i-display)}
.rsvp__send{font-family:var(--i-display);font-weight:400;letter-spacing:.24em;background:var(--i-acc)!important}
.rsvp-done h3{font-family:var(--i-script)!important;font-size:44px!important;color:var(--i-acc)}

.ol-end{padding:56px 0 110px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.ol-end__names{font-family:var(--i-script);font-size:54px;line-height:1.1;margin-top:10px}
.ol-end__tag{font-family:var(--i-display);letter-spacing:.2em;color:var(--i-acc);font-size:15px}
.ol-made{margin-top:28px;font-size:13px;opacity:.6}

@media (max-width:520px){
  .ol-places{grid-template-columns:1fr}
  .ol-step{column-gap:64px}
  .ol-step time{font-size:24px}
  .ol-step h3{font-size:18px}
  .ol-step p{font-size:15px}
}