/* Colores y tipografías compartidas. */
:root {
  --cream:#f7f3e9;
  --paper:#fffcf4;
  --olive:#454f36;
  --olive-dark:#303d2a;
  --sand:#e8dfcd;
  --ink:#333b2c;
  --muted:#626657;
  --gold:#b4a078;
  --line:#cfc9b8;
  --error:#933c2e;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',Arial,sans-serif;
  --ease:cubic-bezier(.2,.65,.3,1)
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scrollbar-gutter: stable
}
body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:17px/1.7 var(--sans)
}
[hidden] {
  display:none!important
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.12
}
h1 {
  font-size:clamp(30px,5vw,46px)
}
h2 {
  font-size:clamp(36px,5vw,62px);
  letter-spacing:-.035em;
  text-wrap:balance
}
h3 {
  font-size:25px
}
p+p {
  margin-top:16px
}
a {
  color:inherit
}

button,.button {
  min-height:56px;
  padding:15px 25px;
  border:1px solid var(--olive);
  background:var(--olive);
  color:var(--cream);
  font:500 16px/1.5 var(--sans);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  border-radius:3px;
  transition:background .25s,box-shadow .25s,transform .25s
}
button>span[aria-hidden],.button>span[aria-hidden],.text-link>span {
  transition:transform .25s
}
button:hover,.button:hover {
  background:var(--olive-dark);
  color:white;
  box-shadow:0 8px 20px #303d2a20;
  transform:translateY(-2px)
}
button:hover>span[aria-hidden],.button:hover>span[aria-hidden] {
  transform:translate(2px,-2px)
}
button:active,.button:active {
  transform:translateY(1px) scale(.98)
}
button:disabled {
  opacity:.65;
  cursor:wait;
  transform:none
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid #a16b28;
  outline-offset:5px
}
h2:focus,h3:focus {
  outline:none
}
.eyebrow {
  font-size:10px;
  font-weight:600;
  letter-spacing:.2em;
  line-height:1.8;
  margin-bottom:24px
}
.section {
  padding:84px 25px;
  position:relative
}
.centered {
  text-align:center
}
.centered>div {
  max-width:800px;
  margin-inline:auto
}
.olive {
  background:var(--olive-dark);
  color:var(--cream)
}
.sand {
  background:var(--sand)
}
.olive .eyebrow {
  color:#dbcfb6
}

/* Textura SVG local y portada con capas. */
.cover::before,.sand::before,.closing::before {
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/images/papier.svg');
  opacity:.16;
  pointer-events:none;
  z-index:0
}
.cover {
  overflow: clip;
  min-height:100svh;
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:56px 27px 36px;
  gap:16px;
  background:radial-gradient(ellipse at 50% 30%,#fffef7 0,#f4eddf 65%,#e6ddc9 100%)
}
.cover>:not(.cover-frame,.cover-branch) {
  position:relative;
  z-index:1
}
.cover-frame {
  position:absolute;
  inset:17px;
  border:1px solid #b4a07865;
  border-radius:170px 170px 2px 2px;
  pointer-events:none
}
.cover-branch {
  position:absolute;
  width:clamp(100px,21vw,230px);
  opacity:.24;
  pointer-events:none
}
.branch-left {
  left:-18px;
  top:9%;
  transform:rotate(25deg)
}
.branch-right {
  right:0;
  bottom:6%;
  transform:rotate(205deg)
}
.cover .eyebrow {
  max-width:290px;
  font-size:9px;
  margin:0 0 13px
}
.cover h1 {
  max-width:650px;
  text-wrap:balance
}
.cover #greeting-note {
  color:var(--muted);
  max-width:450px;
  font-size:15px;
  margin:0
}
.cover button {
  margin-top:13px;
  min-width:234px;
  box-shadow:0 8px 22px #454f3625
}
.cover .cover-date {
  font-size:9px;
  letter-spacing:.18em;
  margin:17px 0 0
}
.cover .cover-hint {
  font-size:10px;
  color:var(--muted);
  margin:0
}
.cover-hint span {
  padding-right:6px
}

.envelope {
  width: min(280px, 84vw);
  aspect-ratio: 330 / 215;
  margin: 38px 0 40px;
  box-shadow: 0 20px 30px -12px #463b3740, 0 2px 3px #51453122;
  transform: rotate(-4deg);
  border-radius: 3px;
  transition: transform 400ms var(--ease);
}
.envelope-art {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.opening .envelope {
  transform: translateY(-5px) rotate(-2deg) scale(1.02);
}
.cover.opening {
  opacity: 0;
  transition: opacity 350ms 300ms ease;
  pointer-events: none;
}
body.opening-invitation {
  overflow: hidden;
}
#invitation {
  animation: content-in 300ms ease both;
}
.has-opened .hero-copy {
  animation: scene-in 550ms var(--ease) both;
}
.has-opened .hero-visual {
  animation: photo-in 600ms 80ms var(--ease) both;
}
.scroll-cue {
  position: fixed;
  inset-inline: 0;
  bottom: max(82px, calc(env(safe-area-inset-bottom) + 70px));
  width: fit-content;
  margin-inline: auto;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 18px #303d2a12;
  pointer-events: none;
  font-size: 12px;
  animation: content-in 300ms ease both;
}
.scroll-cue-arrow {
  animation: scroll-nudge 1400ms ease-in-out 3;
}
@keyframes content-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes photo-in {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to { opacity: 1; transform: none; }
}
@keyframes scroll-nudge {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
}
.hero {
  overflow: clip;
  max-width:1220px;
  margin:auto;
  display:grid;
  gap:40px;
  padding-top:65px;
  padding-bottom:90px
}
.hero-copy {
  position:relative;
  z-index:2
}
.hero h2 {
  font-size:clamp(59px,9vw,116px);
  line-height:.99;
  letter-spacing:-.06em
}
.hero h2 span {
  font-style:italic;
  color:#9d865c;
  font-size:.68em;
  display:inline-block
}
.hero-date {
  margin-top:28px;
  font-size:12px
}
.hero-date span {
  padding:0 6px;
  color:#8d7955
}
.hero-copy>p:not(.eyebrow) {
  color:var(--muted)
}
.hero-copy>p+p {
  margin-top:8px;
  font:italic 23px/1.4 var(--serif)
}
.text-link {
  display:inline-flex;
  gap:35px;
  margin-top:24px;
  padding:10px 0;
  border-bottom:1px solid var(--olive);
  font-size:13px;
  text-decoration:none
}
.text-link:hover span {
  transform:translateY(3px)
}
.hero-visual {
  position:relative;
  padding:0 13px
}
.hero-visual::before {
  content:'';
  position:absolute;
  inset:-12px 0 36px 26px;
  border:1px solid #b4a078a0;
  border-radius:48% 48% 2px 2px;
  transform:rotate(6deg);
  pointer-events:none
}
.hero-visual::after {
  content:'';
  position:absolute;
  width:105px;
  height:160px;
  right:-12px;
  bottom:8px;
  background:url('assets/icons/rama.svg') center/contain no-repeat;
  transform:rotate(35deg);
  opacity:.7;
  pointer-events:none
}
.photo {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(ellipse at 65% 28%,#eeeadc,#c7cbb7 80%);
  color:var(--olive)
}
.photo-fallback {
  min-height:inherit;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:25px;
  text-align:center;
  position:relative
}
.photo-fallback::before {
  content:'';
  position:absolute;
  inset:23px;
  border:1px solid #f9f6ed88;
  border-radius:inherit;
  pointer-events:none
}
.photo-fallback::after {
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/icons/rama.svg') right bottom/60% no-repeat;
  opacity:.12;
  z-index:-1
}
.photo-main {
  min-height:390px;
  border-radius:48% 48% 2px 2px
}
.photo-main .photo-fallback::before {
  border-radius:48% 48% 0 0
}
.photo-monogram {
  font:italic 65px var(--serif);
  margin-bottom:24px
}
.photo-fallback>span:not(.photo-monogram) {
  font:23px/1.4 var(--serif);
  max-width:230px
}
.photo-fallback small {
  margin-top:24px;
  font-size:10px;
  letter-spacing:.05em
}
.real-photo {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.photo-side-note {
  position:absolute;
  right:-4px;
  top:38%;
  writing-mode:vertical-rl;
  font-size:8px;
  letter-spacing:.17em;
  z-index:2
}
.photo-caption {
  display:block;
  font:italic 15px/1.5 var(--serif);
  margin-top:16px;
  color:var(--muted)
}

#date {
  padding-block:100px;
  background:radial-gradient(ellipse at 10% 100%,#536043,transparent 70%),var(--olive-dark);
  border-radius:50% 50% 0 0 / 28px 28px 0 0
}
#date::before {
  content:'';
  position:absolute;
  top:25px;
  left:50%;
  height:34px;
  width:1px;
  background:#c2b48c80
}
.date-display {
  font:clamp(35px,6vw,50px)/1.3 var(--serif);
  margin:30px 0 10px
}
.date-display span {
  color:#b7a681;
  padding:0 5px
}
#date .date-display+p {
  font-size:13px;
  letter-spacing:.08em;
  color:#ddd6c5
}
.countdown {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  margin:45px auto 30px;
  max-width:620px
}
.countdown>div+div {
  border-left:1px solid #ffffff25
}
.countdown strong {
  display:block;
  font:clamp(39px,8vw,76px)/1.15 var(--serif);
  font-variant-numeric:tabular-nums
}
.countdown span {
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.1em;
  color:#e1dac6
}
#countdown-note {
  font:italic 19px var(--serif);
  color:#e1dac6
}

.locations {
  max-width:1040px;
  margin:auto;
  padding-block:85px 100px
}
.journey-heading {
  margin-bottom:55px
}
.journey-heading h2 {
  font-size:clamp(38px,5vw,60px)
}
.timeline {
  position:relative;
  margin-left:13px;
  padding-left:35px
}
.timeline::before {
  content:'';
  position:absolute;
  top:8px;
  bottom:40px;
  left:0;
  width:1px;
  background:linear-gradient(var(--gold),var(--line),transparent)
}
.location {
  position:relative;
  padding:0 0 65px
}
.location:last-child {
  padding-bottom:0
}
.timeline-marker {
  position:absolute;
  left:-51px;
  top:3px;
  width:33px;
  height:33px;
  background:var(--cream);
  border:1px solid var(--gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  font:10px var(--sans);
  color:var(--olive)
}
.event-time {
  font:32px/1.2 var(--serif);
  margin:12px 0 20px
}
.event-time span {
  font:13px var(--sans);
  color:var(--muted)
}
.location .eyebrow {
  margin-bottom:8px
}
.location h2 {
  font-size:39px;
  margin-bottom:12px
}
.location h3 {
  font-size:22px
}
.location>p:not(.eyebrow,.event-time) {
  margin:10px 0 24px;
  font-size:14px;
  color:var(--muted)
}
.line-icon {
  display:block;
  position:absolute;
  right:0;
  top:96px;
  color:var(--olive)
}
.line-icon svg {
  width:56px;
  height:56px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.2
}
.outline {
  background:transparent;
  color:var(--olive);
  font-size:14px
}
.location small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:12px
}

.story {
  display:grid;
  gap:47px;
  border-radius:46% 46% 0 0 / 22px 22px 0 0
}
.story>* {
  position:relative;
  z-index:1
}
.story-visual {
  padding-right:16px
}
.story-visual::before {
  content:'';
  position:absolute;
  top:15px;
  right:0;
  bottom:50px;
  left:14px;
  border:1px solid var(--gold);
  transform:rotate(4deg)
}
.photo-secondary {
  min-height:360px;
  border-radius:2px 80px 2px 2px;
  background:radial-gradient(ellipse at top left,#f8f1de,#b9bfab)
}
.story-copy h2 {
  font-size:clamp(40px,5vw,66px)
}
.story-copy p:not(.eyebrow) {
  margin-top:28px;
  max-width:480px;
  font-size:16px
}
.signature {
  display:block;
  font:italic 20px/1.5 var(--serif);
  margin-top:28px;
  color:var(--olive)
}
.attire {
  padding-block: 64px;
}
.attire p {
  max-width:490px;
  margin:24px auto;
  font-size:15px
}
.attire-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin:30px auto 0;
  max-width:540px
}
.attire-options>div+div {
  border-left:1px solid var(--line)
}
.attire-options svg {
  height:86px;
  width:70px;
  fill:none;
  stroke:var(--olive);
  stroke-width:1.25;
  margin-bottom:20px
}
.attire-options h3 {
  font-size:24px
}
.attire-options p {
  font-size:13px;
  margin:12px 0 0
}
.reply-intro {
  padding-block:105px 100px;
  overflow:hidden;
  background:radial-gradient(ellipse at 90% 0,#66705080,transparent 70%),var(--olive-dark);
  border-radius:50% 50% 0 0 / 30px 30px 0 0
}
.reply-intro::before {
  content:'';
  width:190px;
  height:270px;
  position:absolute;
  bottom:-60px;
  left:-65px;
  background:url('assets/icons/rama.svg') center/contain no-repeat;
  filter:brightness(0) invert(1);
  opacity:.12;
  transform:rotate(30deg)
}
.reply-intro p:not(.eyebrow) {
  max-width:460px;
  margin:26px auto 32px;
  font-size:16px;
  color:#e3dece
}
.light {
  background:var(--cream);
  color:var(--olive);
  border-color:var(--cream)
}
.light:hover {
  background:var(--sand);
  color:var(--olive)
}

.rsvp {
  animation:scene-in .65s var(--ease) both;
  scroll-margin-top:15px
}
.form-wrap {
  max-width:560px;
  margin:auto
}
.form-wrap>h2 {
  margin-bottom:20px
}
.demo-note {
  font-size:12px;
  color:var(--muted);
  margin-top:16px
}
form {
  margin-top:35px
}
fieldset {
  border:0;
  padding:0;
  margin:0 0 30px;
  min-width:0
}
legend,label[for] {
  font-weight:500;
  margin-bottom:16px;
  display:block
}
legend {
  font:24px/1.3 var(--serif)
}
.choice {
  padding:18px;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:12px;
  cursor:pointer;
  border-radius:4px;
  min-height:62px;
  background:#fffcf480;
  transition:background .2s,border-color .2s,box-shadow .2s
}
.choice:active {
  background: #e6e9dc;
}
.choice:hover {
  border-color:var(--olive)
}
.choice:has(input:checked) {
  border-color:var(--olive);
  background:#e6e9dc;
  box-shadow:inset 3px 0 var(--olive)
}
.choice:has(input:focus-visible) {
  outline:2px solid #a16b28;
  outline-offset:3px
}
.choice input {
  accent-color:var(--olive);
  width:21px;
  height:21px;
  flex-shrink:0
}
input[type=text] {
  font:18px var(--sans);
  background:var(--paper);
  border:1px solid var(--line);
  padding:18px;
  width:100%;
  border-radius:4px
}
input[aria-invalid=true] {
  border-color:var(--error)
}
#companion-group:not([hidden]),#companion-name-group:not([hidden]) {
  animation:field-in .3s var(--ease) both
}
.error {
  font-size:14px;
  color:var(--error);
  margin:8px 0
}
.error:empty {
  display:none
}
form button {
  width:100%;
  margin-top:18px
}
#submit-status {
  font-size:14px;
  margin-top:12px
}
.response-final {
  text-align:center;
  padding:40px 12px;
  position:relative;
  isolation:isolate;
  animation:scene-in .6s var(--ease) both
}
.response-final::before {
  content:'';
  position:absolute;
  inset:-10px;
  background:radial-gradient(ellipse,#e6e5cf99,transparent 70%);
  z-index:-1
}
.response-final h3 {
  font-size:36px;
  margin:26px 0
}
.check {
  display:inline-grid;
  place-items:center;
  border:1px solid var(--olive);
  border-radius:50%;
  width:72px;
  height:72px;
  color:var(--olive);
  animation:check-in .6s var(--ease) both
}
.check svg {
  width:48px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.check path {
  stroke-dasharray:45;
  stroke-dashoffset:0;
  animation:draw-check .7s .2s both
}
.botanical {
  display:block;
  width:55px;
  height:70px;
  margin:20px auto 0;
  opacity:.65
}
.response-final .signature {
  margin-top:12px
}

.closing {
  position:relative;
  display:grid;
  text-align:center;
  padding:70px 25px 100px;
  gap:48px;
  background:var(--cream);
  border-radius: 50% 50% 0 0 / 24px 24px 0 0;
  isolation:isolate
}
.closing>* {
  z-index:1
}
.closing-visual {
  max-width:300px;
  width:100%;
  margin:auto
}
.photo-final {
  min-height:295px;
  border-radius:150px 150px 2px 2px
}
.closing-copy {
  position:relative
}
.closing-branch {
  width:45px;
  height:70px;
  opacity:.6
}
.closing-monogram {
  font:62px/1 var(--serif);
  margin:20px 0 30px
}
.closing-monogram i {
  font-size:.7em;
  color:#927c55
}
.closing h2 {
  font-size:clamp(33px,4vw,48px);
  margin-bottom:30px
}
.closing h2+p {
  font:italic 22px var(--serif);
  margin-bottom:20px
}
.closing-copy>span {
  font-size:10px;
  letter-spacing:.18em
}
.music-toggle {
  position:fixed;
  right:16px;
  bottom:max(16px,env(safe-area-inset-bottom));
  min-height:48px;
  padding:11px 17px;
  gap:11px;
  border-radius:28px;
  box-shadow:0 4px 18px #0003;
  font-size:12px;
  z-index:5
}
.music-bars {
  height:19px;
  display:flex;
  gap:3px;
  align-items:center
}
.music-bars b {
  width:2px;
  height:6px;
  background:currentColor;
  border-radius:2px
}
.music-bars b:nth-child(2) {
  height:15px
}
.music-bars b:nth-child(3) {
  height:11px
}
.music-bars b:nth-child(4) {
  height:8px
}
[aria-pressed=true] .music-bars b {
  animation:equalizer 1.1s ease-in-out infinite alternate
}
[aria-pressed=true] .music-bars b:nth-child(2) {
  animation-delay:-.4s
}
[aria-pressed=true] .music-bars b:nth-child(3) {
  animation-delay:-.7s
}
.music-status {
  position:fixed;
  right:16px;
  bottom:76px;
  max-width:270px;
  background:var(--cream);
  font-size:12px;
  z-index:5;
  box-shadow:0 3px 14px #0002
}
.music-status:not(:empty) {
  padding:12px
}
.noscript {
  padding:24px;
  background:var(--sand)
}

/* Reveals consistentes;
   las fotos tienen una variación lateral breve. */
.motion-ready .reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s var(--ease),transform .65s var(--ease)
}
.motion-ready .story-visual.reveal,.motion-ready .closing-visual.reveal {
  transform:translate(-14px,10px) scale(.985)
}
.motion-ready .reveal.is-visible {
  opacity:1;
  transform:none
}
.location h2::after {
  content:'';
  display:block;
  width:45px;
  height:1px;
  margin-top:20px;
  background:var(--gold);
  transform:scaleX(1);
  transform-origin:left;
  transition:transform .7s .15s
}
.motion-ready .location:not(.is-visible) h2::after {
  transform:scaleX(0)
}

@keyframes scene-in {
  from {
  opacity:0;
  transform:translateY(12px)
}
to {
  opacity:1;
  transform:none
}

}
@keyframes field-in {
  from {
  opacity:0;
  transform:translateY(7px)
}
to {
  opacity:1;
  transform:none
}

}
@keyframes check-in {
  from {
  opacity:0;
  transform:scale(.85)
}
to {
  opacity:1;
  transform:scale(1)
}

}
@keyframes draw-check {
  from {
  stroke-dashoffset:45
}
to {
  stroke-dashoffset:0
}

}
@keyframes equalizer {
  from {
  transform:scaleY(.45)
}
to {
  transform:scaleY(1.1)
}

}

@media(min-width:760px) {
  .section {
  padding:110px 60px
}
.cover {
  padding-block:65px 45px
}
.cover-frame {
  inset:26px;
  border-radius:260px 260px 2px 2px
}
.cover .eyebrow {
  max-width:none
}
.envelope {
  width:330px;
  margin:45px 0 42px
}
.hero {
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:25px;
  padding-block:95px 125px
}
.hero h2 {
  position:relative;
  margin-right:-65px
}
.hero-visual {
  margin-top:35px
}
.photo-main {
  min-height:540px
}
.hero-visual::after {
  width:140px;
  height:200px
}
.photo-side-note {
  right:-8px
}
#date {
  border-radius:50% 50% 0 0 / 45px 45px 0 0;
  padding-block:115px
}
.locations {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:80px;
  padding-block:115px
}
.journey-heading {
  position:sticky;
  top:80px;
  align-self:start;
  margin:0
}
.timeline {
  padding-left:45px
}
.timeline-marker {
  left:-61px
}
.location {
  padding-bottom:90px
}
.line-icon {
  top:96px
}
.story {
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:75px;
  padding-inline:max(60px,calc((100vw - 1040px)/2))
}
.photo-secondary {
  min-height:480px
}
.story-copy {
  padding-block:20px
}
.closing {
  grid-template-columns:.8fr 1.2fr;
  align-items:center;
  padding:100px max(60px,calc((100vw - 1040px)/2)) 110px;
  gap:60px
}
.closing-visual {
  max-width:360px
}
.photo-final {
  min-height:430px
}

}

@media(max-width:359px) {
  .section {
  padding-inline:20px
}
.hero h2 {
  font-size:53px
}
.timeline {
  padding-left:29px
}
.timeline-marker {
  left:-45px
}
.line-icon svg {
  width:48px
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*::before,*::after {
  animation:none!important;
  transition:none!important
}
.motion-ready .reveal {
  opacity:1;
  transform:none
}
.location h2::after {
  transform:scaleX(1)
}

}


/* Fotografías aprobadas y familias de Alex y Lucy. */
.photo-main { min-height:0; aspect-ratio:4 / 5; }
.photo-main .real-photo { object-position:50% 50%; }
.photo-secondary { min-height:0; aspect-ratio:4 / 5; }
.photo-secondary .real-photo { object-position:50% 50%; }
.photo-final { min-height:0; aspect-ratio:4 / 5; }
.photo-final .real-photo { object-position:50% 50%; }
.families { padding-block:64px; }
.families-grid { display:grid; gap:32px; margin-top:36px; }
.families-grid h3 { font-size:22px; margin-bottom:14px; }
.families-grid p { font-size:16px; line-height:1.9; }
.location h3 { max-width:calc(100% - 54px); overflow-wrap:break-word; }
@media(min-width:760px) {
 .families-grid { grid-template-columns:1fr 1fr; gap:48px; }
 .families-grid>div+div { border-left:1px solid var(--line); padding-left:24px; }
}


/* ===== Refinamiento visual v3 ===== */
.cover {
  padding: 52px 22px 34px;
  background: radial-gradient(ellipse at 50% 20%, #fffdf8 0, #f7f0e2 64%, #e6ddc8 100%);
}
.cover-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 560px);
}
.cover h1 {
  max-width: 11ch;
  font-size: clamp(34px, 9.2vw, 54px);
  line-height: 1.06;
  text-wrap: balance;
}
.cover #greeting-note {
  max-width: 30ch;
  font-size: 15px;
}
.cover .cover-date {
  font-size: 11px;
  letter-spacing: .22em;
}
.cover .cover-hint {
  font-size: 11px;
}
.envelope-stage {
  position: relative;
  width: min(315px, 85vw);
  margin: 30px 0 34px;
  height: 258px;
}
.invitation-card {
  position: absolute;
  left: 50%;
  bottom: 70px;
  width: 76%;
  aspect-ratio: 5 / 7;
  transform: translateX(-50%) translateY(85px) scale(.84);
  opacity: 0;
  background: linear-gradient(180deg, #fffdf8 0, #f7f1e5 100%);
  border-radius: 20px 20px 10px 10px;
  border: 1px solid #d4c5a5;
  box-shadow: 0 20px 40px -14px #4337282e, 0 5px 14px #43372814;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.card-monogram {
  font: 400 clamp(30px, 8vw, 42px)/1 var(--serif);
  color: var(--olive);
}
.card-monogram i {
  font-style: italic;
  color: #9b8460;
}
.card-branch {
  width: 36px;
  height: 52px;
  opacity: .48;
}
.card-date {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--muted);
}
.envelope {
  position: absolute;
  inset: auto 0 0;
  width: min(295px, 100%);
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 22px 34px -16px #463b3740, 0 2px 3px #51453122;
}
.cover-copy > :not(.eyebrow):not(.envelope-stage) {
  position: relative;
  z-index: 1;
}
.cover.opening .cover-copy > :not(.envelope-stage) {
  animation: cover-copy-fade .45s .75s both;
}
.cover.opening .invitation-card {
  animation: card-rise 1.45s var(--ease) forwards;
}
.cover.opening .envelope {
  animation: envelope-rest 1.45s var(--ease) forwards;
}
.cover.opening .cover-frame,
.cover.opening .cover-branch {
  animation: cover-copy-fade .35s .95s both;
}
.cover.opening {
  animation: cover-out .45s 1.2s both;
  pointer-events: none;
}
.hero.section {
  padding-top: 56px;
}
.hero-copy {
  text-align: center;
}
.hero h2 {
  font-size: clamp(56px, 18vw, 108px);
  margin-inline: auto;
}
.hero-copy .eyebrow,
.hero-date,
.hero-copy > p,
.hero-copy .text-link {
  margin-left: auto;
  margin-right: auto;
}
.hero-date {
  font-size: 14px;
}
.hero-copy > p+p {
  font-size: clamp(20px, 6vw, 29px);
  max-width: 16ch;
}
.text-link {
  gap: 18px;
  font-size: 15px;
}
.photo-caption {
  font-size: 17px;
}
.families {
  padding-block: 54px;
}
.families h2 {
  max-width: 9ch;
  margin-inline: auto;
  font-size: clamp(38px, 13vw, 64px);
  text-align: center;
}
.families .eyebrow {
  margin-bottom: 18px;
}
.families-grid {
  gap: 26px;
  max-width: 620px;
}
.families-grid h3 {
  font-size: 21px;
  margin-bottom: 10px;
}
.families-grid p {
  line-height: 1.7;
}
#date h2 {
  max-width: 10ch;
  margin-inline: auto;
  font-size: clamp(38px, 12vw, 58px);
}
.journey-heading {
  text-align: center;
}
.journey-heading h2 {
  font-size: clamp(34px, 13vw, 56px);
  max-width: 9ch;
  margin-inline: auto;
}
.location h2 {
  font-size: clamp(28px, 11vw, 46px);
  max-width: calc(100% - 84px);
}
.location h3 {
  font-size: 20px;
}
.event-time {
  font-size: 30px;
}
.line-icon {
  top: 84px;
}
.line-icon svg {
  width: 52px;
  height: 52px;
}
.story {
  gap: 36px;
}
.story-copy {
  text-align: center;
}
.story-copy h2 {
  font-size: clamp(34px, 14vw, 60px);
  max-width: 8.6ch;
  margin-inline: auto;
}
.story-copy p:not(.eyebrow) {
  margin-inline: auto;
  max-width: 27ch;
}
.signature {
  font-size: 22px;
}
.attire {
  padding-block: 72px 66px;
}
.attire h2 {
  font-size: clamp(42px, 12vw, 60px);
}
.attire-options {
  gap: 0;
  max-width: 640px;
  align-items: end;
}
.attire-options > div + div {
  border-left: 1px solid var(--line);
}
.attire-card {
  padding: 10px 14px 0;
}
.attire-figure {
  width: min(150px, 100%);
  height: auto;
  color: var(--olive);
  margin-bottom: 16px;
}
.attire-options h3 {
  font-size: 27px;
}
.attire-options p {
  margin-top: 8px;
}
.reply-intro h2 {
  font-size: clamp(40px, 13vw, 58px);
  max-width: 8.5ch;
  margin-inline: auto;
}
.reply-intro p:not(.eyebrow) {
  max-width: 20ch;
}
.closing {
  padding-top: 56px;
}
.closing-copy {
  max-width: 520px;
  margin-inline: auto;
}
.closing h2 {
  max-width: 9ch;
  margin-inline: auto;
  line-height: 1.08;
}
.closing h2 br {
  display: none;
}
.closing-monogram {
  margin-bottom: 18px;
}
.music-toggle {
  left: 18px;
  right: auto;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 4px));
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  border-radius: 50%;
  gap: 0;
  justify-content: center;
}
.music-toggle span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.music-bars {
  height: 18px;
}
.music-status {
  left: 18px;
  right: auto;
  bottom: 82px;
  border-radius: 14px;
}
.scroll-cue {
  bottom: max(90px, calc(env(safe-area-inset-bottom) + 80px));
}
@keyframes card-rise {
  0% { opacity: 0; transform: translateX(-50%) translateY(85px) scale(.84); }
  15% { opacity: 1; }
  60% { opacity: 1; transform: translateX(-50%) translateY(-14px) scale(.92); }
  100% { opacity: 1; transform: translateX(-50%) translateY(-62px) scale(1.07); }
}
@keyframes envelope-rest {
  0% { transform: translateX(-50%) rotate(-3deg); }
  35% { transform: translateX(-50%) rotate(-2deg) translateY(-6px); }
  100% { transform: translateX(-50%) rotate(-1deg) translateY(8px) scale(.98); opacity: .98; }
}
@keyframes cover-copy-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes cover-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (min-width: 760px) {
  .cover { padding-block: 66px 46px; }
  .envelope-stage { width: 340px; height: 280px; }
  .hero-copy { text-align: left; }
  .hero-copy .eyebrow,
  .hero-date,
  .hero-copy > p,
  .hero-copy .text-link { margin-left: 0; margin-right: 0; }
  .hero h2 { margin-inline: 0; }
  .journey-heading { text-align: left; }
  .journey-heading h2 { margin-inline: 0; }
  .story-copy { text-align: left; }
  .story-copy h2,
  .story-copy p:not(.eyebrow) { margin-inline: 0; }
  .hero h2 { margin-right: -20px; }
  .attire-options { max-width: 760px; }
  .attire-figure { width: 190px; }
  .music-toggle { left: 24px; }
}
@media (max-width: 359px) {
  .music-toggle { width: 52px; height: 52px; min-width: 52px; min-height: 52px; }
  .location h2 { max-width: calc(100% - 74px); }
}


/* ===== Ajustes v4: stickers, portada fija y pantalla de agradecimiento ===== */
body.cover-locked { overflow: hidden; height: 100dvh; }
body.cover-locked .music-panel,
body.cover-locked .scroll-cue { display: none !important; }
.cover { position: fixed; inset: 0; min-height: 100dvh; height: 100dvh; overflow: hidden; display: grid; place-items: center; padding: 18px 18px calc(26px + env(safe-area-inset-bottom)); }
.cover-copy { min-height: calc(100dvh - 36px); justify-content: center; gap: 0; }
.cover h1 { margin-top: 12px; max-width: 8ch; }
.cover .eyebrow { margin-bottom: 18px; }
.cover .cover-date { margin-top: 18px; }
.envelope-stage { margin: 16px 0 18px; height: 270px; }
.invitation-card { width: 78%; bottom: 74px; box-shadow: 0 26px 48px -12px rgba(67,55,40,.32), 0 8px 18px rgba(67,55,40,.14); }
.cover-frame { opacity: .95; }
.cover.opening .cover-copy > :not(.envelope-stage) { animation: cover-copy-fade .45s .95s both; }
.cover.opening .invitation-card { animation: card-rise-v4 1.5s cubic-bezier(.2,.85,.25,1) forwards; }
.cover.opening .envelope { animation: envelope-rest-v4 1.5s cubic-bezier(.2,.85,.25,1) forwards; }
.cover.opening .envelope-stage::after { animation: glow-fade 1.2s .25s both; }
.envelope-stage::after { content: ""; position: absolute; inset: auto 15% 42px; height: 36px; border-radius: 999px; background: radial-gradient(circle, rgba(212,197,165,.38), rgba(212,197,165,0)); filter: blur(10px); opacity: 0; }
.attire-options { gap: 0; align-items: stretch; max-width: 760px; }
.attire-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 6px 12px 0; }
.attire-options > div + div { border-left: 1px solid var(--line); }
.attire-sticker { width: min(165px, 38vw); aspect-ratio: 1/1; object-fit: contain; display: block; margin: 0 auto 18px; filter: drop-shadow(0 12px 18px rgba(80,70,53,.09)); }
.attire-options h3 { margin-top: 0; }
.reply-intro { margin-bottom: 0; }
.rsvp { padding-top: 50px; }
.closing { display: none; }
.thank-you-page { min-height: 100dvh; background: linear-gradient(180deg, #f8f3e8 0%, #f5efe4 100%); padding: 32px 20px 48px; }
.thank-you-inner { max-width: 760px; margin: 0 auto; display: grid; gap: 28px; align-items: center; }
.thank-photo-wrap { display: flex; justify-content: center; }
.thank-photo { width: min(100%, 360px); }
.thank-copy { text-align: center; max-width: 540px; margin: 0 auto; }
.thank-copy .eyebrow { margin-bottom: 14px; }
.thank-copy h2 { font-size: clamp(36px, 11vw, 56px); margin: 10px auto 18px; max-width: 10ch; line-height: 1.08; }
.thank-copy p { margin-inline: auto; max-width: 28ch; }
.thank-signature { font: italic 400 clamp(24px, 6.8vw, 32px)/1.2 var(--serif); color: var(--olive); margin-top: 24px; }
.thank-meta { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .18em; color: var(--muted); }
.thank-back { margin-top: 24px; }
.music-toggle { left: 14px; bottom: max(14px, calc(env(safe-area-inset-bottom) + 4px)); }
.music-status { left: 14px; bottom: 76px; }
@keyframes card-rise-v4 {
  0% { opacity: 0; transform: translateX(-50%) translateY(92px) scale(.8) rotate(-3deg); }
  16% { opacity: 1; }
  55% { opacity: 1; transform: translateX(-50%) translateY(8px) scale(.92) rotate(-1deg); }
  78% { opacity: 1; transform: translateX(-50%) translateY(-52px) scale(1.03) rotate(0deg); }
  100% { opacity: 1; transform: translateX(-50%) translateY(-76px) scale(1.08) rotate(0deg); }
}
@keyframes envelope-rest-v4 {
  0% { transform: translateX(-50%) rotate(-3deg) translateY(0); opacity: 1; }
  35% { transform: translateX(-50%) rotate(-2deg) translateY(2px); }
  100% { transform: translateX(-50%) rotate(-1deg) translateY(18px) scale(.985); opacity: .92; }
}
@keyframes glow-fade {
  0% { opacity: 0; }
  25% { opacity: .9; }
  100% { opacity: 0; }
}
@media (min-width: 760px) {
  .cover { padding-top: 26px; }
  .cover-copy { min-height: calc(100dvh - 52px); }
  .thank-you-inner { grid-template-columns: 1fr 1fr; gap: 42px; }
  .thank-copy { text-align: left; margin: 0; }
  .thank-copy h2, .thank-copy p { margin-left: 0; margin-right: 0; }
  .attire-sticker { width: 205px; }
}


/* ===== Pulido final v5 ===== */
/* Zona segura para el badge del hosting en la portada fija. */
.cover {
  padding-bottom: max(108px, calc(96px + env(safe-area-inset-bottom)));
}
.cover-copy {
  min-height: calc(100dvh - 126px);
  justify-content: center;
}
.cover h1 {
  font-size: clamp(31px, 8.2vw, 48px);
  max-width: 9ch;
  margin-top: 6px;
}
.cover #greeting-note { margin-top: 8px; }
.cover .cover-date {
  order: initial;
  margin: 15px 0 0;
  font-size: 10px;
}
.cover .cover-hint {
  margin: 4px 0 0;
  font-size: 10px;
}
.cover #open-invitation { margin-top: 14px; }
.envelope-stage {
  height: 244px;
  margin: 10px 0 12px;
}
.envelope { width: min(280px, 100%); }
.invitation-card { bottom: 66px; }
/* La tarjeta original queda quieta: el vuelo lo realiza un clon con Web Animations. */
.cover.opening .invitation-card { animation: none !important; opacity: 0 !important; }
.cover.opening { animation: cover-out-v5 .5s 1.05s both; }
.cover.opening .cover-copy > :not(.envelope-stage) { animation: cover-copy-fade .38s .66s both; }
.cover.opening .cover-frame,
.cover.opening .cover-branch { animation: cover-copy-fade .45s .78s both; }
.flying-invitation-card {
  position: fixed !important;
  z-index: 9999;
  margin: 0 !important;
  transform-origin: center center;
  pointer-events: none;
  background: linear-gradient(180deg,#fffdf8 0,#f7f1e5 100%);
  border: 1px solid #d4c5a5;
  border-radius: 20px 20px 10px 10px;
  box-shadow: 0 35px 75px rgba(51,45,35,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
body.preparing-hero #invitation { opacity: .35; transform: scale(1.015); }
#invitation { transition: opacity .45s ease, transform .55s var(--ease); }
.has-opened #invitation { opacity: 1; transform: none; }
@keyframes cover-out-v5 {
  from { opacity: 1; filter: blur(0); }
  to { opacity: 0; filter: blur(5px); }
}
/* El bloque familiar mantiene un tono neutro y respetuoso. */
.families { padding-block: 58px 66px; }
.family-heading {
  margin: 0 auto 34px !important;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--olive);
}
.families-grid { margin-top: 0; }
.families-grid h3 { font-size: clamp(24px, 7vw, 31px); }
/* RSVP: menos protagonismo al título y más al botón. */
.reply-intro { padding-block: 88px 96px; }
.reply-intro h2 {
  font-size: clamp(36px, 10.5vw, 50px);
  max-width: 9ch;
}
.reply-intro p:not(.eyebrow) { margin-top: 20px; margin-bottom: 28px; }
.reply-intro .light { min-width: min(100%, 300px); }
/* Más aire al final de secciones para que el badge fijo no cubra controles al detener el scroll. */
.reply-intro, .rsvp, .thank-you-page { padding-bottom: max(112px, calc(100px + env(safe-area-inset-bottom))); }
@media (max-height: 760px) {
  .cover { padding-top: 10px; padding-bottom: 92px; }
  .cover-copy { min-height: calc(100dvh - 102px); }
  .envelope-stage { height: 200px; margin-block: 4px 7px; }
  .envelope { width: min(235px, 78vw); }
  .cover h1 { font-size: clamp(27px, 7.4vw, 38px); }
  .cover .eyebrow { margin-bottom: 7px; }
  .cover #greeting-note { font-size: 13px; }
  .cover .cover-date, .cover .cover-hint { font-size: 9px; }
  .cover #open-invitation { min-height: 50px; margin-top: 9px; }
}
@media (min-width:760px) {
  .cover { padding-bottom: 54px; }
  .cover-copy { min-height: calc(100dvh - 80px); }
  .family-heading { margin-bottom: 42px !important; }
}