:root { --bg:#f6f2ec; --paper:#fbf9f5; --ink:#1f1b17; --muted:#7a7267; --line:#dcd3c6; --gold:#b08b57; --serif:"Cormorant Garamond",Georgia,serif; --sans:"Montserrat","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box } html { scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--ink); font:300 16px/1.7 var(--sans); -webkit-font-smoothing:antialiased }
a { color:inherit }
.eyebrow { font:400 11px/1 var(--sans); letter-spacing:.32em; text-transform:uppercase; color:var(--muted) } .eyebrow.gold { color:var(--gold) }
nav { position:fixed; inset:0 0 auto 0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:18px 24px; font:400 11px/1 var(--sans); letter-spacing:.28em; text-transform:uppercase; mix-blend-mode:multiply }
nav a { text-decoration:none; color:var(--ink); opacity:.75 } nav a:hover { opacity:1 } nav .links { display:flex; gap:28px }
.hero { min-height:100svh; display:grid; place-items:center; padding:96px 16px 64px; position:relative } .hero.compact { min-height:62svh }
.frame { position:absolute; inset:16px; border:1px solid var(--line); pointer-events:none } .frame::after { content:""; position:absolute; inset:6px; border:1px solid var(--line) }
.hero-inner { text-align:center; max-width:820px; animation:rise 1.2s ease both }
.names { font:300 clamp(56px,11vw,128px)/1 var(--serif); letter-spacing:.18em; text-transform:uppercase; margin:22px 0 0; text-indent:.18em } .hero.compact .names { font-size:clamp(40px,7vw,84px) }
.amp { display:block; font:italic 400 clamp(30px,4.5vw,54px)/1 var(--serif); color:var(--gold); letter-spacing:0; text-transform:none; margin:6px 0; text-indent:0 }
.when { margin-top:34px; font:400 12px/1.9 var(--sans); letter-spacing:.28em; text-transform:uppercase; color:var(--muted) }
.where { font:italic 400 22px/1.4 var(--serif); color:var(--muted); margin-top:6px }
.para { font:italic 400 24px/1.4 var(--serif); color:var(--ink); margin:28px auto 0; max-width:560px }
.countdown { display:flex; justify-content:center; gap:clamp(18px,5vw,48px); margin-top:48px } .countdown div { text-align:center }
.countdown b { display:block; font:300 clamp(34px,5vw,52px)/1 var(--serif) } .countdown span { display:block; margin-top:8px; font:400 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--muted) }
.cue { position:absolute; bottom:34px; left:0; right:0; text-align:center; font:400 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--muted) } .cue::after { content:""; display:block; width:1px; height:36px; background:var(--line); margin:12px auto 0 }
section { max-width:1040px; margin:0 auto; padding:96px 16px } section.narrow { max-width:720px }
.section-head { text-align:center; max-width:560px; margin:0 auto 56px }
h2 { font:300 clamp(36px,5vw,52px)/1.1 var(--serif); margin:14px 0 18px; letter-spacing:.02em }
.lede { font:italic 400 20px/1.5 var(--serif); color:var(--muted); margin:0 } .rule { width:48px; height:1px; background:var(--gold); margin:22px auto 0 }
.btn-line { display:inline-block; padding:12px 26px; border:1px solid var(--ink); font:400 11px/1 var(--sans); letter-spacing:.28em; text-transform:uppercase; text-decoration:none; transition:background .25s,color .25s } .btn-line:hover { background:var(--ink); color:var(--bg) }
.btn-fill { display:inline-block; background:var(--ink); color:var(--bg); border:1px solid var(--ink); padding:16px 44px; font:400 11px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background .25s,color .25s } .btn-fill:hover { background:transparent; color:var(--ink) }
/* Invitación */
.two { display:grid; grid-template-columns:1fr 1fr; gap:18px } .place { background:var(--paper); border:1px solid var(--line); padding:36px 32px; text-align:center }
.place .eyebrow { color:var(--gold) } .place h3 { font:400 32px/1.1 var(--serif); margin:14px 0 4px } .place .hora { font:300 clamp(30px,4vw,40px)/1 var(--serif); margin:10px 0 14px } .place p { color:var(--muted); margin:0 0 22px }
.timeline { list-style:none; margin:0; padding:0; max-width:420px; margin-inline:auto } .timeline li { display:grid; grid-template-columns:72px 1fr; gap:22px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line) } .timeline li:last-child { border:0 }
.timeline b { font:300 26px/1 var(--serif); color:var(--gold) } .timeline span { font:400 20px/1.3 var(--serif) }
.dress { text-align:center } .dress .big { font:300 clamp(40px,6vw,64px)/1.1 var(--serif); margin:10px 0 14px } .dress p { color:var(--muted); max-width:520px; margin:0 auto; font:italic 400 19px/1.5 var(--serif) }
.hotels { display:flex; flex-wrap:wrap; justify-content:center; gap:18px } .hotel { flex:0 1 320px; background:var(--paper); border:1px solid var(--line); padding:28px } .hotel h3 { font:400 26px/1.2 var(--serif); margin:0 0 8px } .hotel p { color:var(--muted); margin:0 0 18px; font-size:15px }
.faq { max-width:640px; margin-inline:auto } .faq details { border-bottom:1px solid var(--line); padding:16px 0 } .faq summary { cursor:pointer; list-style:none; font:400 21px/1.3 var(--serif); display:flex; justify-content:space-between; gap:16px } .faq summary::after { content:"+"; color:var(--gold); font:300 26px/1 var(--serif) } .faq details[open] summary::after { content:"–" } .faq p { color:var(--muted); margin:10px 0 0 }
.cta { text-align:center; background:var(--paper); border:1px solid var(--line); padding:56px 24px } .cta h2 { margin-top:10px } .cta p { color:var(--muted); font:italic 400 20px/1.5 var(--serif); margin:0 0 28px }
/* Regalos */
.filters { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin:-24px 0 40px } .filters button { background:none; border:0; padding:8px 0; font:400 11px/1 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--muted); cursor:pointer; border-bottom:1px solid transparent } .filters button[aria-pressed="true"] { color:var(--ink); border-bottom-color:var(--gold) }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px }
.card { position:relative; background:var(--paper); border:1px solid var(--line); padding:30px 28px 28px; display:flex; flex-direction:column; min-height:230px; transition:transform .35s ease,box-shadow .35s ease } .card:hover { transform:translateY(-3px); box-shadow:0 18px 40px -28px rgba(31,27,23,.45) }
.card .cat { font:400 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--gold) } .card h3 { font:400 27px/1.2 var(--serif); margin:14px 0 6px } .card .monto { font:300 15px/1 var(--sans); letter-spacing:.06em; color:var(--muted) }
.card .btn { margin-top:auto; align-self:flex-start; padding-top:22px } .btn span { display:inline-block; padding:12px 26px; border:1px solid var(--line); color:var(--muted); font:400 11px/1 var(--sans); letter-spacing:.28em; text-transform:uppercase }
.card.regalado { background:transparent } .card.regalado h3,.card.regalado .monto { color:var(--muted) } .seal { position:absolute; top:18px; right:18px; font:italic 400 15px/1 var(--serif); color:var(--gold) }
.skeleton { height:230px; border:1px solid var(--line); background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent) var(--paper); background-size:200% 100%; animation:shimmer 1.4s infinite }
.progress { text-align:center; margin-top:44px; font:italic 400 18px/1.5 var(--serif); color:var(--muted) }
/* RSVP */
.rsvp { max-width:640px } form { display:grid; grid-template-columns:1fr 1fr; gap:28px 32px } .full { grid-column:1/-1 }
label { display:block; font:400 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:10px }
input,textarea { width:100%; background:transparent; border:0; border-bottom:1px solid var(--line); padding:10px 0; font:400 20px/1.4 var(--serif); color:var(--ink); border-radius:0; outline:none; transition:border-color .25s } input:focus,textarea:focus { border-bottom-color:var(--ink) } textarea { resize:vertical; min-height:56px }
.choice { display:flex; gap:28px; padding-top:6px } .choice label { display:flex; align-items:center; gap:10px; margin:0; cursor:pointer; font:400 17px/1 var(--serif); letter-spacing:0; text-transform:none; color:var(--ink) } .choice input { width:14px; height:14px; accent-color:var(--ink); margin:0 }
form .btn-fill { grid-column:1/-1; justify-self:center; margin-top:8px }
footer { text-align:center; padding:48px 16px 56px; color:var(--muted); font:italic 400 18px/1.5 var(--serif) } footer .eyebrow { display:block; margin-top:10px } footer a { text-decoration:none }
@keyframes rise { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } } @keyframes shimmer { from { background-position:200% 0 } to { background-position:-200% 0 } }
@media (max-width:640px) { nav { padding:16px } nav .links { gap:18px } form,.two { grid-template-columns:1fr; gap:24px } .frame { inset:10px } section { padding:72px 16px } .card { min-height:0 } }
@media (max-height:820px) { .cue { display:none } .hero { padding-bottom:48px } }
@media (prefers-reduced-motion:reduce) { .hero-inner,.skeleton { animation:none } html { scroll-behavior:auto } .card { transition:none } }
/* Hero con foto */
.hero.photo { background-size:cover; background-position:center; color:#fbf9f5 }
.hero.photo::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,16,12,.25) 0%,rgba(20,16,12,.35) 55%,rgba(20,16,12,.7) 100%) }
.hero.photo .hero-inner,.hero.photo .cue { position:relative }
.hero.photo .eyebrow,.hero.photo .when,.hero.photo .where,.hero.photo .countdown span,.hero.photo .cue { color:rgba(251,249,245,.78) }
.hero.photo .amp { color:#d9c7a7 } .hero.photo .cue::after { background:rgba(251,249,245,.4) }
.frame.light { border-color:rgba(251,249,245,.35) } .frame.light::after { border-color:rgba(251,249,245,.35) }
nav.on-photo { mix-blend-mode:normal } nav.on-photo a { color:#fbf9f5; opacity:.85 }
/* Padres */
.padres { text-align:center; padding-bottom:40px } .padres .para { margin-top:0 }
.padres-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:40px auto 0; max-width:640px }
.padres-grid .eyebrow { margin-bottom:12px } .padres-grid div p { margin:0; font:400 21px/1.5 var(--serif) }
.invitan { font:italic 400 22px/1.4 var(--serif); color:var(--muted); margin:40px 0 0 }
/* Nosotros */
.nosotros-grid { display:grid; grid-template-columns:5fr 6fr; gap:48px; align-items:center }
.nosotros-grid img { width:100%; aspect-ratio:4/5; object-fit:cover; border:1px solid var(--line); padding:8px; background:var(--paper) }
.nosotros .story { font:italic 400 21px/1.55 var(--serif); color:var(--muted); margin:0 }
/* Vestimenta */
.dress { text-align:center } .dress .section-head { margin-bottom:28px }
.paleta { display:flex; justify-content:center; gap:14px; margin:0 0 22px } .paleta span { width:44px; height:44px; border-radius:50%; border:1px solid rgba(0,0,0,.08); box-shadow:inset 0 0 0 3px var(--bg) }
.evitar { font:italic 400 18px/1.5 var(--serif); color:var(--muted); margin:0 0 26px }
/* Hoteles */
.hotel .zona { font:400 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:12px }
footer a { text-decoration:underline; text-underline-offset:4px }
@media (max-width:760px) { .nosotros-grid { grid-template-columns:1fr; gap:28px } .padres-grid { grid-template-columns:1fr } nav .links a:nth-child(2),nav .links a:nth-child(3) { display:none } }
.cta h2 { font-size:clamp(28px,3.6vw,40px); max-width:720px; margin-inline:auto }
/* v3: referencia Ovation */
:root { --rose:#f1e4dd; --green:#2f3b2f }
.split { display:grid; grid-template-columns:1fr 1fr; min-height:100svh; padding:72px 24px 24px; gap:0 }
.split-photo img { width:100%; height:100%; object-fit:cover; display:block; min-height:420px }
.split-panel { position:relative; background:var(--rose); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:64px 40px; overflow:hidden }
.split-panel .branch { position:absolute; width:120px; left:28px; bottom:20px; color:var(--gold); opacity:.6 }
.split-panel .names { font-size:clamp(44px,6vw,84px); margin-top:18px } .split-panel .amp { font-size:clamp(26px,3vw,40px) }
.frase { font:italic 400 24px/1.3 var(--serif); color:var(--muted); margin:22px 0 4px } .split-panel .where { margin-top:0 }
.split-panel .countdown { margin:32px 0 36px } .split-panel .countdown b { font-size:clamp(30px,3.2vw,44px) }
body.v3 nav { mix-blend-mode:normal }
.historia-grid { display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:center } .historia .story { font:italic 400 21px/1.55 var(--serif); color:var(--muted); margin:0 }
.collage { position:relative; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(6,60px); gap:0 }
.collage img { width:100%; height:100%; object-fit:cover; border:6px solid var(--paper); box-shadow:0 18px 40px -28px rgba(31,27,23,.5) }
.collage img:nth-child(1) { grid-area:1/1/6/5 } .collage img:nth-child(2) { grid-area:4/4/7/7; z-index:1 } .collage img:nth-child(3) { grid-area:1/5/3/7 }
.band { background:var(--green); color:#f6f2ec; text-align:center; padding:40px 16px; display:flex; justify-content:center; align-items:baseline; gap:22px; flex-wrap:wrap }
.band span { font:300 clamp(34px,6vw,72px)/1 var(--serif); letter-spacing:.2em; text-transform:uppercase } .band i { font:italic 400 clamp(28px,4vw,48px)/1 var(--serif); color:#d9c7a7 } .band em { font:400 11px/1 var(--sans); letter-spacing:.32em; text-transform:uppercase; color:rgba(246,242,236,.7); flex-basis:100%; margin-top:10px }
.circles { display:flex; flex-wrap:wrap; justify-content:center; gap:36px 28px }
.circle { text-align:center; width:160px } .circle .ico { width:104px; height:104px; border-radius:50%; border:1px solid var(--line); background:var(--paper); display:grid; place-items:center; margin:0 auto 16px; color:var(--gold) } .circle .ico svg { width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round }
.circle b { display:block; font:300 26px/1 var(--serif); color:var(--gold) } .circle span { display:block; font:400 19px/1.3 var(--serif); margin-top:6px }
.masonry { columns:3; column-gap:14px } .masonry img { width:100%; display:block; margin-bottom:14px; border:1px solid var(--line) } .masonry img:nth-child(3n+2) { filter:grayscale(1) }
.cta.rose { background:var(--rose); border-color:transparent }
@media (max-width:860px) { .split { grid-template-columns:1fr; padding:64px 16px 16px } .split-photo img { max-height:52svh; min-height:0 } .split-panel { padding:40px 20px } .historia-grid { grid-template-columns:1fr; gap:36px } .collage { grid-template-rows:repeat(6,44px) } .masonry { columns:2 } }
@media (max-width:640px) { .masonry { columns:2; column-gap:10px } .masonry img { margin-bottom:10px } .circle { width:120px } .circle .ico { width:84px; height:84px } }
@media (max-width:860px) { .split-panel .branch { display:none } }