*{box-sizing:border-box}
html{scroll-behavior:smooth}
.love-body{margin:0;color:#4f3d42;background:radial-gradient(circle at 16% 12%,rgba(255,255,255,.72),transparent 28%),radial-gradient(circle at 84% 78%,rgba(191,133,152,.18),transparent 30%),linear-gradient(#eee1dc,#d7c3bf)}
.love-page{overflow:hidden;background:#efe5e0}

/* banner */
.love-hero{position:relative;width:100%;padding:38px 52px 42px;overflow:hidden;background:linear-gradient(rgba(255,249,247,.20),rgba(248,232,229,.24)),url("../imagenes/floral-panel.png") center/360px auto repeat;border-top:1px solid rgba(145,88,106,.2);border-bottom:1px solid rgba(145,88,106,.25)}
.love-hero:before{content:"";position:absolute;inset:22px;border:1px dashed rgba(151,91,109,.24);pointer-events:none}
.love-hero-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:min(900px,76%);min-height:270px;margin:0 auto;padding:26px 60px 38px;text-align:center;background:linear-gradient(rgba(255,252,250,.96),rgba(255,246,244,.92));border:1px solid rgba(151,91,109,.30);box-shadow:13px 15px 0 rgba(104,65,78,.07),0 20px 36px rgba(66,41,48,.10),inset 0 0 0 8px rgba(255,255,255,.33)}
.love-hero-card:before{content:"";position:absolute;inset:18px;border:1px solid rgba(156,95,113,.13);pointer-events:none}
.hero-tape{position:absolute;z-index:4;top:-17px;left:50%;width:175px;height:35px;background:linear-gradient(rgba(225,199,181,.9),rgba(236,214,197,.87));box-shadow:0 3px 7px rgba(64,42,47,.13);transform:translateX(-50%) rotate(-3deg)}
.hero-divider{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:16px;width:200px;margin:10px 0;color:#9a6c7a;font-family:"Cormorant Garamond",serif;font-size:25px}
.hero-divider>span:first-child,.hero-divider>span:last-child{width:76px;height:1px;background:linear-gradient(to right,transparent,rgba(144,101,115,.76))}
.hero-divider>span:last-child{transform:scaleX(-1)}
.hero-title-row{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:27px;width:100%}
.love-hero h1{margin:0;color:#4d3d43;font-family:"Cormorant Garamond",serif;font-size:clamp(74px,8vw,108px);font-style:italic;font-weight:500;line-height:.88;text-shadow:3px 3px 0 rgba(255,255,255,.88),0 10px 18px rgba(95,62,73,.10)}
.hero-star{color:rgba(139,94,110,.58);font-family:"Cormorant Garamond",serif;font-size:29px;line-height:1}

/* navigation */
.main-navigation{position:relative}
.main-navigation .nav-side{position:absolute;top:50%;color:rgba(132,88,100,.55);font-family:"Cormorant Garamond",serif;font-size:14px;font-style:italic;transform:translateY(-50%);pointer-events:none}
.main-navigation .nav-side-left{left:24px}.main-navigation .nav-side-right{right:24px}

/* archive */
.love-archive{position:relative;min-height:2740px;padding-top:32px;overflow:hidden;background:radial-gradient(circle at 15% 16%,rgba(255,255,255,.55),transparent 27%),radial-gradient(circle at 84% 74%,rgba(153,96,111,.10),transparent 29%),repeating-linear-gradient(0deg,rgba(92,68,70,.019) 0 1px,transparent 1px 38px),#eee4de}
.love-archive:before{content:"";position:absolute;inset:28px;border:1px dashed rgba(137,85,99,.13);pointer-events:none}
.letter-intro{position:relative;z-index:6;width:min(720px,82%);margin:0 auto 14px;padding:5px 20px 16px;text-align:center}
.intro-heart{margin-bottom:1px;color:rgba(171,93,119,.58);font-family:"Cormorant Garamond",serif;font-size:18px}
.letter-intro h2{margin:0;color:#a15c73;font-family:"Cormorant Garamond",serif;font-size:clamp(43px,4.8vw,62px);font-style:italic;font-weight:500;line-height:.94}
.letter-intro p{margin:9px 0 0;color:#7b5a64;font-family:"Cormorant Garamond",serif;font-size:18px;font-style:italic}
.intro-divider{width:175px;height:1px;margin:14px auto 0;background:linear-gradient(to right,transparent,rgba(154,91,110,.52),transparent)}
.love-collage{position:relative;min-height:2510px}

/* objects */
.music-sheet{position:absolute;z-index:2;margin:0;padding:7px;overflow:visible;background:rgba(255,250,246,.84);border:1px solid rgba(140,95,108,.16);box-shadow:9px 12px 0 rgba(82,55,63,.06),0 18px 32px rgba(52,37,41,.14)}
.music-sheet img,.letter-paper,.notebook-paper{display:block;width:100%;height:auto}
.valentine-sheet{top:20px;right:3%;width:35%;transform:rotate(4deg)}
.swan-music{top:1360px;left:2%;width:47%;transform:rotate(-3deg)}
.flower-decoration{position:absolute;display:block;height:auto;pointer-events:none;filter:drop-shadow(0 10px 9px rgba(62,43,46,.13))}
.cream-rose{z-index:3;top:65px;left:-1%;width:18%;transform:rotate(-12deg)}
.bouquet{z-index:5;top:1080px;right:-1%;width:19%;transform:rotate(8deg)}

/* pink letter */
.pink-letter{position:absolute;z-index:8;top:60px;left:6%;width:64%;overflow:visible;filter:drop-shadow(15px 20px 18px rgba(68,43,50,.17));transform:rotate(-1.1deg)}
.letter-content{position:absolute;z-index:2;top:7.2%;right:9.2%;bottom:7%;left:9.2%;display:flex;flex-direction:column;overflow:hidden;color:#45363b;font-family:"EB Garamond",serif}
.letter-content p{margin:0 0 14px;font-size:clamp(15px,1.48vw,20px);line-height:1.54}
.first-letter-introduction{margin-bottom:22px!important;color:#805566;font-family:"Cormorant Garamond",serif!important;font-size:clamp(26px,2.8vw,38px)!important;font-style:italic;line-height:1.12!important;text-align:center}
.first-letter-greeting{margin-bottom:17px!important;color:#79505e;font-family:"Cormorant Garamond",serif!important;font-size:clamp(24px,2.35vw,32px)!important;font-style:italic;line-height:1.16!important}
.letter-signature{margin-top:auto;text-align:right}.letter-signature p{margin:0}
.signature-name{font-family:"Cormorant Garamond",serif!important;font-size:clamp(33px,3.2vw,47px)!important;font-style:italic;line-height:.9!important}
.signature-dedication{margin-top:5px!important;font-family:"Cormorant Garamond",serif!important;font-size:clamp(18px,1.9vw,26px)!important;font-style:italic}

/* notebook */
.notebook-letter{position:absolute;z-index:10;top:1190px;right:4%;width:64%;overflow:visible;filter:drop-shadow(15px 20px 18px rgba(68,43,50,.17));transform:rotate(1deg)}
.notebook-content{position:absolute;z-index:2;top:4.8%;right:6.5%;bottom:3.5%;left:13%;overflow:hidden;color:#403638;font-family:"EB Garamond",serif}
.notebook-content h2{margin:0 0 18px;color:#744c5b;font-family:"Cormorant Garamond",serif;font-size:clamp(34px,4vw,54px);font-style:italic;font-weight:500;line-height:1;text-align:center}
.notebook-content p{margin:0 0 10px;font-size:clamp(10px,1vw,14px);line-height:1.48}
.second-letter-greeting{color:#734d5a;font-family:"Cormorant Garamond",serif!important;font-size:clamp(20px,2vw,27px)!important;font-style:italic;line-height:1.1!important}
.creation-lines{margin:15px 0!important;color:#915d6f!important;font-family:"Cormorant Garamond",serif!important;font-size:clamp(16px,1.5vw,22px)!important;font-style:italic;line-height:1.35!important;text-align:center}
.final-love-line{margin-top:16px!important;color:#9b6177!important;font-family:"Cormorant Garamond",serif!important;font-size:clamp(17px,1.7vw,24px)!important;font-style:italic;line-height:1.3!important;text-align:center}

/* tape */
.paper-tape{position:absolute;z-index:20;display:block;height:29px;background:repeating-linear-gradient(135deg,rgba(228,205,184,.92) 0 12px,rgba(242,223,203,.92) 12px 24px);box-shadow:0 3px 6px rgba(63,42,47,.11);pointer-events:none}
.pink-letter-tape{top:-15px;left:50%;width:170px;transform:translateX(-50%) rotate(-3deg)}
.valentine-tape{top:-16px;left:50%;width:120px;transform:translateX(-50%) rotate(-3deg)}
.swan-tape-left{top:-15px;left:50px;width:110px;transform:rotate(-7deg)}
.swan-tape-right{top:-15px;right:50px;width:110px;transform:rotate(7deg)}
.notebook-tape-left{top:-15px;left:90px;width:125px;transform:rotate(-7deg)}
.notebook-tape-right{top:-15px;right:90px;width:125px;transform:rotate(7deg)}
.love-page footer{position:relative;z-index:50}

@media(max-width:900px){
  .love-hero{padding:22px}.love-hero-card{width:92%;min-height:270px;padding:34px 30px 42px}.main-navigation .nav-side{display:none}
  .love-archive{min-height:auto;padding:40px 20px 80px}.love-collage{display:flex;flex-direction:column;align-items:center;gap:55px;min-height:auto}
  .pink-letter,.notebook-letter,.music-sheet,.flower-decoration{position:relative;inset:auto}
  .pink-letter,.notebook-letter,.valentine-sheet,.swan-music{width:min(760px,96%);transform:none}
  .cream-rose,.bouquet{display:none}
}

@media(max-width:650px){
  .love-hero{padding:16px}.love-hero-card{width:100%;min-height:240px;padding:31px 20px 37px}.hero-tape{width:115px;height:25px}
  .hero-divider{width:170px;gap:12px;margin:9px 0}.hero-divider>span:first-child,.hero-divider>span:last-child{width:55px}
  .hero-title-row{gap:15px}.love-hero h1{font-size:58px}.hero-star{font-size:22px}
  .letter-intro{width:95%}.letter-intro h2{font-size:40px}.letter-intro p{font-size:16px}
  .pink-letter,.notebook-letter,.music-sheet{width:100%}
  .letter-content{top:7.5%;right:9%;bottom:6.5%;left:9%}.letter-content p{margin-bottom:6px;font-size:clamp(8px,2.35vw,11px);line-height:1.37}
  .first-letter-introduction{margin-bottom:9px!important;font-size:clamp(17px,5.2vw,23px)!important}
  .first-letter-greeting{margin-bottom:7px!important;font-size:clamp(16px,5vw,21px)!important}
  .notebook-content{top:4.5%;right:5%;bottom:3%;left:13%}.notebook-content h2{margin-bottom:10px;font-size:clamp(22px,8vw,34px)}
  .notebook-content p{margin-bottom:5px;font-size:clamp(6px,1.9vw,9px);line-height:1.32}
  .creation-lines,.final-love-line{font-size:clamp(9px,2.7vw,13px)!important}.paper-tape{height:22px}
}

@media(max-width:430px){.love-hero h1{font-size:46px}.hero-star{display:none}}