@import url('https://fonts.googleapis.com/css2?family=Ballet:opsz@16..72&family=Cormorant+Infant:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Italianno&display=swap');
:root{--serif:'Cormorant Infant',Georgia,serif;--script:'Italianno','Great Vibes',cursive;--paper:#f4ebdc;--wine:#420d0c}
.topbar{background:#250b09;color:#dbc296;border-color:#99774566}.monogram{color:#e6cd9c}.topbar-date{letter-spacing:3.5px}.hero{min-height:1020px;max-height:none;height:1050px;background:#240a08}.hero-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-2}.hero:before{background:linear-gradient(90deg,#1d0708e6,transparent 28%,transparent 72%,#1d0708e6);opacity:1;z-index:-1}.hero:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 25%,#1c05061a 80%);z-index:-1;pointer-events:none}.hero-frame{inset:20px;z-index:0;pointer-events:none}.hero-content{max-width:720px;padding:265px 30px 80px}.hero-eyebrow{font-size:9px;letter-spacing:3px;margin:0 0 25px;color:#e5cda0}.small-title{font-size:10px;letter-spacing:4px;color:#e7d0aa}h1{font-family:'Ballet','Great Vibes',cursive;font-size:126px;font-weight:400;line-height:1.5;letter-spacing:-3px;margin:-8px 0 -8px;color:#ffeac6;text-shadow:0 2px 15px #160303,0 0 35px #180303}.hero-subtitle{font-size:24px;line-height:1.45;color:#f5e4cc;text-shadow:0 2px 6px #1a0303;margin:19px 0}.hero-date{font-size:27px;margin:25px 0;color:#f8e4c2}.hero-rule{opacity:.85}.button-gold{background:linear-gradient(115deg,#b48b49,#ecd19b 48%,#c9a366);border:1px solid #f7dba3;box-shadow:0 5px 25px #10030266;font-size:10px;letter-spacing:1.7px}.hero-footnote{bottom:44px;color:#ead3a9;text-shadow:0 2px 5px #000}.intro{position:relative}.intro h2,.closing h2{font-size:64px;font-weight:400;line-height:1.05}.intro-text{font-family:var(--serif);font-size:21px;line-height:1.6;max-width:590px}.family p:not(.eyebrow){font-size:29px}.signature{font-size:46px}.countdown-section h2{font-size:49px;font-weight:400}.event h3{font-size:49px}.event-icon{color:#b78a45}.events h2{font-size:64px;font-weight:400}.theme-section{padding:0;grid-template-columns:1.15fr 1fr;gap:0;background:#250e0b}.theme-art{min-height:520px;height:100%;border:0;border-radius:0;overflow:hidden}.theme-art:before{z-index:1;inset:18px;border-radius:0;pointer-events:none;border-color:#e8c38466}.theme-art img{max-width:none;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:56% center;transform:none;filter:none}.theme-copy{padding:55px 55px 55px 65px}.theme-copy h2{font-size:47px;font-weight:400}.theme-copy>p:not(.eyebrow){font-family:var(--serif);font-size:21px;line-height:1.5;color:#d3bd9e}.closing-name{font-family:'Ballet','Great Vibes',cursive;font-size:84px;line-height:1.7;margin:15px 0 0}.closing>p:not(.eyebrow){font-family:var(--serif);font-size:21px}.closing{padding-bottom:55px}.eyebrow{letter-spacing:3px}
@media(min-width:1000px){.hero{background-image:linear-gradient(90deg,#240a0899,#240a08f5 27%,#240a08f5 73%,#240a0899),url('venetian-detail.png');background-size:cover;background-position:center}.hero-scene{width:760px;left:50%;transform:translateX(-50%);object-fit:cover}}
@media(max-width:700px){.topbar-date{font-size:7px;letter-spacing:2px}.hero{height:880px;min-height:880px}.hero-scene{object-fit:cover}.hero:before{background:linear-gradient(0deg,#2605050a,#2605050a)}.hero-frame{inset:11px}.hero-content{padding:210px 20px 90px;max-width:390px}.hero-eyebrow{font-size:7px;letter-spacing:1.8px;margin-bottom:20px}.small-title{font-size:9px;letter-spacing:2px}h1{font-size:94px;line-height:1.55;letter-spacing:-3px;margin:0 -8px -5px}.hero-subtitle{font-size:22px;margin:17px 0}.hero-date{font-size:23px;margin:22px 0}.hero-date span{margin:0 9px}.hero-footnote{bottom:35px;font-size:6px;letter-spacing:1.8px}.button-gold{min-height:46px;padding:14px 23px}.intro h2,.closing h2{font-size:48px}.intro-text{font-size:20px;line-height:1.5}.family p:not(.eyebrow){font-size:28px}.signature{font-size:41px}.countdown-section h2{font-size:39px}.events h2{font-size:50px}.event h3{font-size:44px}.theme-section{grid-template-columns:1fr;padding:0;gap:0}.theme-art{max-width:none;min-height:340px;aspect-ratio:1.15;height:auto}.theme-copy{padding:40px 25px 48px}.theme-copy h2{font-size:44px}.theme-copy>p:not(.eyebrow){font-size:20px}.closing-name{font-size:78px}.closing>p:not(.eyebrow){font-size:19px}}
@media(max-width:360px){h1{font-size:82px}.hero-eyebrow{font-size:6px}.hero-content{padding-left:15px;padding-right:15px}.hero-subtitle{font-size:20px}}

/* Video de fondo del contador con una capa negra ligera. */
.countdown-section {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#151210;
  text-shadow:0 1px 4px #00000080;
}
.countdown-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  pointer-events:none;
}
.countdown-section::before {
  content:'';
  position:absolute;
  inset:0;
  background:rgb(0 0 0 / 30%);
  z-index:-1;
  pointer-events:none;
}

/* Fondo de máscaras para todo el apartado de la invitación, sin filtros. */
.intro.paper {
  background:url('mascara1.jpg') center 42%/cover;
  color:var(--ink);
  text-shadow:none;
}
.intro-panel {
  max-width:920px;
  margin:0 auto;
  padding:clamp(28px,5vw,60px) clamp(16px,4vw,54px);
  background:rgb(244 235 220 / 92%);
  border:1px solid #d7b576a6;
}
.intro-panel > .eyebrow {
  margin-top:0;
  font-size:clamp(8px,1vw,10px);
  letter-spacing:1.8px;
}
.intro .eyebrow {color:#705139}
.intro h2,.intro h2 em,.intro .signature {color:var(--rust)}
.intro .intro-text {color:var(--ink)}

/* Nombres de la familia e ilustraciones. */
.family {
  max-width:1000px;
  grid-template-columns:minmax(0,1fr);
  row-gap:18px;
  text-align:center;
}
.family > div {min-width:0}
.family .eyebrow {color:#705139}
.family p.family-names {
  font:400 clamp(38px,5.5vw,60px)/1.35 var(--script);
  color:var(--wine);
  text-align:center;
  white-space:nowrap;
}
.family-conjunction {font-size:.65em}
.family-divider {margin:0;color:var(--gold)}
.event-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  height:120px;
  line-height:0;
}
.event-icon img {
  display:block;
  width:120px;
  height:120px;
  object-fit:contain;
  filter:brightness(0) saturate(100%) invert(23%) sepia(48%) saturate(1468%) hue-rotate(336deg) brightness(89%) contrast(89%);
}

/* Botones planos en rojo quemado con contorno dorado. */
.events .button-outline {
  min-width:176px;
  min-height:48px;
  justify-content:center;
  padding:14px 32px;
  border:1px solid var(--gold);
  border-radius:32px;
  background:var(--rust);
  color:#f6e5c4;
  font-size:12px;
  font-weight:500;
  letter-spacing:1.2px;
  text-shadow:none;
  box-shadow:none;
  transform:none;
  transition:background-color .25s;
}
.events .button-outline:hover {
  background:#8b3428;
  transform:none;
}
.events .button-outline:active {
  background:#632017;
  transform:none;
}

/* Celebración en papel marfil con rosas y hojas doradas en las esquinas. */
.events.paper {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:76px clamp(24px,6vw,88px) 92px;
  background-color:#f5ecde;
}
.events::before,.events::after {
  content:'';
  position:absolute;
  width:clamp(190px,26vw,360px);
  aspect-ratio:1;
  background:url('event-floral-corner.webp') center/contain no-repeat;
  pointer-events:none;
  z-index:-1;
}
.events::before {top:-20px;left:-30px}
.events::after {bottom:-20px;right:-30px;transform:rotate(180deg)}
.events > .eyebrow {margin-top:0;color:#755238}
.events h2 {color:var(--wine)}
.events .event-grid {
  gap:26px;
  margin-top:36px;
  border:0;
}
.events .event {
  padding:40px 24px 44px;
  background:rgb(255 247 233 / 94%);
  border:1px solid #b89a61b3;
  border-radius:3px;
}
.events .event .eyebrow {color:#755238}
.events .event h4 {color:#4f3529}
.events .location {color:#6b5847}

/* Despedida en rojo quemado, con flores y velas debajo del texto. */
.closing.paper {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:76px 24px 240px;
  background:radial-gradient(ellipse at 50% 20%,#7b3025,#541b16 65%,#40120f);
  color:#f7e6cb;
}
.closing::before {
  content:'';
  position:absolute;
  inset:18px;
  border:1px solid #d7b57666;
  pointer-events:none;
}
.closing::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:clamp(220px,32vw,460px);
  background:url('closing-red-bg.webp') center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(transparent,#000 26%);
  mask-image:linear-gradient(transparent,#000 26%);
  pointer-events:none;
  z-index:-1;
}
.closing .eyebrow {
  max-width:360px;
  margin:0 auto;
  color:#e2c38a;
  font-size:9px;
  letter-spacing:2px;
}
.closing h2,.closing h2 em {color:#f7e6cb}
.closing > p:not(.eyebrow) {
  max-width:430px;
  margin:18px auto;
  color:#e6d0b4;
}
.closing .closing-name {color:#ebcc93}
.closing .closing-date {color:#ead4b0}
.closing .back-top {
  color:#ecd3a3;
  border-color:#d5ac65;
  background:#531914;
}
@media(max-width:700px) {
  .events.paper {padding:72px 22px 76px}
  .events::before {top:-6px;left:-8px}
  .events::after {bottom:-6px;right:-8px}
  .events .event-grid {gap:22px}
  .events .event {padding:34px 18px 38px}
  .closing.paper {padding:60px 24px 210px}
}

/* Caligrafía y entradas suaves para los apartados. */
main section h2, main .event h3 {
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(46px,6vw,72px);
  line-height:1.12;
  letter-spacing:0;
}
main section h2 em {font-style:normal}
main .event h3 {font-size:clamp(44px,5vw,60px)}
.section-enter {animation:section-enter .9s cubic-bezier(.2,.65,.3,1) both}
.hero-content.invitation-enter {animation:invitation-enter 1.2s ease-out both}
@keyframes section-enter {
  from {opacity:0;transform:translateY(24px)}
  to {opacity:1;transform:translateY(0)}
}
@keyframes invitation-enter {
  from {opacity:0;transform:translateY(12px) scale(.97)}
  to {opacity:1;transform:translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce) {
  .section-enter,.hero-content.invitation-enter {animation:none}
}
