/* Detalles personales: un recuerdo al atardecer y un invitado muy especial. */
/* Un mismo fondo fotográfico en todo el recorrido, rosa arriba y violeta abajo. */
body{background:#6250b7}
body::before{content:none}
.romantic-backdrop{
  position:fixed;inset:0;z-index:0;pointer-events:none;isolation:isolate;
  background:#6250b7;overflow:hidden;
}
.romantic-backdrop::before{
  content:"";position:absolute;inset:0;
  background:url("nosotros-playa.png") center 72% / cover no-repeat;
  filter:grayscale(1) contrast(.85);
}
.romantic-backdrop::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(250,173,208,.81) 0%,
    rgba(229,145,217,.73) 34%,
    rgba(133,87,220,.69) 62%,
    rgba(58,36,189,.87) 100%);
}
.card{background:rgba(255,250,253,.94);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.floating .float{opacity:.17}
.tip.light{color:#fff;text-shadow:0 2px 6px #38256380}
.page.active .scene{animation:sceneAmor .65s cubic-bezier(.2,.8,.2,1) both}
.page.active .badge{animation:badgeAmor .75s cubic-bezier(.2,1.4,.4,1) both}
.hero img{animation:heroAmor 9s ease-in-out infinite alternate;transform-origin:center 65%}
.hero-tag{z-index:1}
.dot.current{animation:heartAmor 1.8s ease-in-out infinite}
.envelope{perspective:800px}
.env-seal{box-shadow:0 0 0 8px #ff7dad25,0 0 22px #ff7dad55}
.letter.show{background:linear-gradient(145deg,#fffdf7,#fff4f5);box-shadow:inset 0 0 28px #f4dcbd22}
.letter .sign{animation:signatureAmor .8s ease-out both}
#afterLetter:not([hidden]){animation:sceneAmor .7s ease-out both}

/* La foto original se conserva íntegra dentro de un atardecer animado. */
.memory{
  width:min(340px,100%);margin:24px auto 0;padding:25px 24px 17px;
  position:relative;isolation:isolate;overflow:hidden;border-radius:28px;
  background:linear-gradient(180deg,#bba3ee 0%,#ffb7bb 35%,#ffdcab 61%,#f099b9 76%,#9180c1 100%);
  border:2px solid #ffffffb0;box-shadow:0 13px 32px #71316826;
}
.memory::before{
  content:"";position:absolute;z-index:-1;right:-16px;top:20px;width:108px;height:108px;
  border-radius:50%;background:#fff5c9;box-shadow:0 0 45px 18px #ffe8b78a;
  animation:sunsetAmor 7s ease-in-out infinite;
}
.memory::after{
  content:"";position:absolute;z-index:-1;left:-20%;right:-20%;bottom:0;height:30%;
  border-radius:50% 50% 0 0;background:linear-gradient(#c493c985,#7d79b5a6);
  animation:horizonAmor 10s ease-in-out infinite alternate;
}
.memory-photo{
  display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;
  position:relative;border:7px solid #fffaf2;border-bottom-width:15px;border-radius:16px;
  box-shadow:0 10px 20px #67457338;transform:perspective(700px) rotateX(var(--photo-rx,0deg)) rotateY(var(--photo-ry,0deg)) rotate(-2deg);
  transition:transform .3s ease;cursor:pointer;
}
.memory figcaption{
  position:relative;margin-top:16px;text-align:center;color:white;text-shadow:0 2px 8px #4e345580;
  font-family:"Caveat","Segoe Print",cursive;font-size:27px;font-weight:700;line-height:1.12;
}
.memory-spark{position:absolute;z-index:2;pointer-events:none;animation:twinkleAmor 3s ease-in-out infinite}
.memory-spark.one{left:6px;top:24px;font-size:21px}
.memory-spark.two{right:5px;top:54%;font-size:18px;animation-delay:1.2s}
.memory-spark.three{left:9px;bottom:64px;font-size:17px;animation-delay:2s}

.page.active .cat img{animation:petAmor 4s ease-in-out infinite;animation-delay:var(--pet-delay,0s)}
.cat.is-dog{background:linear-gradient(145deg,#fff6da,#ffe3ed);border-color:#ac6586}
.cat.is-dog img{filter:drop-shadow(0 5px 4px #70345c28)}
.cat:focus-visible,.memory-photo:focus-visible{outline:3px solid #f0679f;outline-offset:5px}
.cat.is-bouncing img{animation:dogHelloAmor .6s ease-out}
.page.active .year{animation:sceneAmor .5s ease-out both;animation-delay:var(--item-delay,0s)}
.year.open .yr{animation:heartAmor 1.5s ease-in-out infinite}
.food.active .emoji{animation:foodAmor .45s cubic-bezier(.2,1.5,.4,1)}
.page.active .ticket{animation:ticketAmor .85s .15s ease-out both}
.floating .float{animation-duration:var(--float-duration,7s);animation-timing-function:ease-in-out}
.love-trail{
  position:fixed;z-index:21;pointer-events:none;font-size:13px;line-height:1;
  animation:trailAmor 1.1s ease-out forwards;
}
.road{animation:roadAmor 1.7s linear infinite}
.sun{animation:sunsetAmor 6s ease-in-out infinite}

@keyframes auroraAmor{to{transform:translate3d(5%,-3%,0) scale(1.08)}}
@keyframes sceneAmor{from{opacity:0;transform:translateY(20px) scale(.975)}to{opacity:1;transform:none}}
@keyframes badgeAmor{from{opacity:0;transform:translateY(-8px) scale(.8)}to{opacity:1;transform:none}}
@keyframes heroAmor{to{transform:scale(1.045)}}
@keyframes heartAmor{0%,100%{scale:1}45%{scale:1.12}60%{scale:1.04}75%{scale:1.1}}
@keyframes signatureAmor{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes sunsetAmor{50%{filter:brightness(1.08);scale:1.06}}
@keyframes horizonAmor{to{translate:5% 8px}}
@keyframes twinkleAmor{0%,100%{opacity:.5;transform:scale(.85) rotate(-8deg)}50%{opacity:1;transform:scale(1.12) rotate(8deg)}}
@keyframes petAmor{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes dogHelloAmor{0%,100%{transform:none}30%{transform:translateY(-9px) rotate(-6deg)}65%{transform:translateY(-3px) rotate(5deg)}}
@keyframes foodAmor{50%{transform:translateY(-6px) scale(1.17) rotate(-8deg)}}
@keyframes ticketAmor{from{opacity:0;transform:translateY(18px) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes trailAmor{to{opacity:0;transform:translateY(-35px) scale(.4) rotate(15deg)}}
@keyframes roadAmor{to{background-position:-62px 0}}

@media(max-width:430px){
  .memory{padding:20px 21px 15px;border-radius:24px;width:min(310px,100%)}
  .memory figcaption{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .memory-photo{transform:rotate(-2deg)}
}

/* Dos recuerdos nuevos: portada del mar y foto de aniversario. */
.hero-personal{padding:8px;background:linear-gradient(145deg,#ffe1ee,#dfd8ff 55%,#fff2cc)}
.hero-stage{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#c3cdf5}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s ease}
.hero-slide.is-active{opacity:1;visibility:visible}
.hero-stage img{display:block;width:100%;height:100%;object-fit:cover;animation:none}
.hero-stage .hero-couple{object-position:50% 72%}
.hero-stage .hero-tag{top:10px;bottom:auto;max-width:calc(100% - 22px);font-size:14px;padding:6px 13px}
.hero-corner{position:absolute;z-index:2;top:8px;font-size:25px;line-height:1;color:white;text-shadow:0 2px 8px #79639480;pointer-events:none}
.hero-corner.one{left:10px}.hero-corner.two{right:10px}
.hero-choices{display:flex;justify-content:center;gap:8px;margin-top:15px}
.hero-choice{min-height:40px;padding:8px 15px;border:2px solid #ffffff60;border-radius:999px;background:#30265c40;color:#fff;cursor:pointer;font-size:13px;font-weight:600;transition:background .2s ease,transform .2s ease}
.hero-choice.is-selected{background:#fff4fb;color:#5b408b;border-color:#fff4fb;box-shadow:0 3px 0 #3a285e35}
.hero-choice:hover{transform:translateY(-2px)}
.hero-choice:focus-visible{outline:3px solid #ffe7a1;outline-offset:3px}
.anniversary-memory{width:min(330px,100%);margin:27px auto 24px;padding:15px 16px 17px;position:relative;border:2px solid #e8d5fc;border-radius:24px;background:linear-gradient(145deg,#f9f0ff,#ffe9f1);box-shadow:0 9px 20px #71428a18}
.anniversary-memory img{display:block;width:100%;height:auto;border:6px solid #fff;border-bottom-width:14px;border-radius:12px;box-shadow:0 5px 13px #754a8b25;transform:rotate(1.5deg)}
.anniversary-pin{position:absolute;z-index:1;left:50%;top:-14px;transform:translateX(-50%);font-size:27px;filter:drop-shadow(0 3px 4px #71385f30)}
.anniversary-memory figcaption{margin-top:16px;text-align:center;color:#715189;font-family:"Caveat","Segoe Print",cursive;font-size:27px;font-weight:700;line-height:1.15}
.anniversary-memory figcaption span{display:block;margin-bottom:6px;color:#a76590;font-family:"Fredoka","Trebuchet MS",sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.09em}
@media(max-width:430px){.hero-personal{padding:7px}.hero-stage{border-radius:19px}.hero-stage .hero-tag{font-size:12.5px}.anniversary-memory{padding:14px 14px 16px}.anniversary-memory figcaption{font-size:25px}}

/* Paneles transparentes: el mismo paisaje se ve detrás de todo el contenido. */
:root{--text:#fff;--muted:#fff2fc;--border:rgba(255,255,255,.5)}
.romantic-backdrop::after{background:linear-gradient(rgba(26,12,63,.28),rgba(26,12,63,.28)),linear-gradient(180deg,rgba(250,173,208,.81) 0%,rgba(229,145,217,.73) 34%,rgba(133,87,220,.69) 62%,rgba(58,36,189,.87) 100%)}
.scene{color:#fff;text-shadow:0 2px 5px rgba(27,12,55,.8)}
.card{background:rgba(30,16,65,.16);border:1px solid #ffffff65;box-shadow:0 18px 45px #20113f35;backdrop-filter:none;-webkit-backdrop-filter:none}
.title,.question{color:#fff;text-shadow:0 2px 8px #241041b0}
.sub,.tip,.skip,.count-note,.date-line,#noMessage{color:#fff2fc}
.badge,.back,.btn-ghost,.chip,.hero-tag{background:rgba(37,20,73,.36);color:#fff;border-color:#ffffff85;text-shadow:0 1px 4px #23123f90}
.back:hover,.btn-ghost:hover{background:rgba(255,255,255,.19)}
.counter .cell,.hero-counter .cell{background:rgba(34,17,70,.32);border:1px solid #ffffff70;box-shadow:0 4px 12px #25104420}
.counter .num,.counter .lbl,.big-time{color:#fff}
.year,.year.open{background:rgba(30,16,65,.22);border:1px solid #ffffff70;box-shadow:0 5px 14px #21113920}
.year:hover{background:rgba(255,255,255,.12)}
.year .ytext,.year .yhint{color:#fff2fc}
.year .yr,.year.open .yr{background:rgba(155,63,144,.6);border-color:#ffffff80}
.letter,.letter.show{color:#fff;background:rgba(30,16,65,.18);border-color:#ffffff80;box-shadow:none;text-shadow:0 1px 4px #24103fd9}
.letter strong{color:#ffe4a5}.caret{background:#fff}
.cat,.cat.seen,.cat.is-dog,.food{background:rgba(255,255,255,.1);border:1px solid #ffffff80;box-shadow:0 5px 16px #1f104530;color:#fff}
.cat:hover,.food:hover{background:rgba(255,255,255,.2)}
.cat img{filter:drop-shadow(0 3px 5px #25114050)}
.cat:focus-visible,.food:focus-visible,.memory-photo:focus-visible{outline:3px solid #ffe7a1;outline-offset:4px}
.food.active{background:rgba(114,47,153,.65);border-color:#ffe4a5}
.choice{background:rgba(255,255,255,.12);color:#fff}
.choice.yes{background:rgba(115,68,192,.72)}
.bubble,.hint{background:rgba(27,14,60,.52);color:#fff0bd;border:1px solid #ffffff45}
.bubble::before{border-bottom-color:rgba(27,14,60,.52)}
.btn-main{background:rgba(91,50,166,.85);border:1px solid #ffffff70;box-shadow:0 5px 0 #25144270;text-shadow:0 1px 3px #27123f80}
.btn-main.pink{background:rgba(160,45,112,.85);box-shadow:0 5px 0 #5e204e80}
.btn-main[disabled]{opacity:.65}
.hero-personal{background:rgba(255,255,255,.12);border:1px solid #ffffff85;box-shadow:0 18px 45px #21114535}
.hero-choice,.hero-choice.is-selected{background:rgba(35,18,71,.28);color:#fff;border-color:#ffffff65;text-shadow:0 1px 4px #24104180}
.hero-choice.is-selected{background:rgba(149,58,128,.65);border-color:#ffe4a5}
.memory,.anniversary-memory{background:rgba(255,255,255,.08);border:1px solid #ffffff65;box-shadow:0 10px 25px #25113f25}
.memory::before,.memory::after{content:none}
.memory-photo{border-color:#ffffffb0}
.anniversary-memory img{border-color:#ffffffb0}
.anniversary-memory figcaption,.anniversary-memory figcaption span{color:#fff2fc;text-shadow:0 2px 6px #241041a0}
.ticket{background:rgba(255,255,255,.08);border-color:#ffffff95}
.ticket .t-title{color:#ffe4a5}
.progress-inner{background:rgba(29,15,61,.46)}