:root{--ink:#073d3a;--gold:#ab7726;--teal:#076a68}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 5% 12%,#a5d9d5a6,transparent 38%),radial-gradient(ellipse at 100% 60%,#bde6e5,transparent 48%),#f2f8f4;font-family:Arial,sans-serif}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.25;background-image:radial-gradient(#fff 1.5px,transparent 2px);background-size:47px 47px}button,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #c28d36;outline-offset:5px}header{max-width:1220px;margin:auto;padding:25px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #0b65541e}.brand{color:var(--ink);font:bold 26px Georgia;text-decoration:none;letter-spacing:2px}.brand span{font:12px Arial;letter-spacing:1px;display:block;margin-top:5px}#sound{border:1px solid #0e615133;background:#ffffff60;border-radius:30px;padding:11px 18px;color:var(--ink);font-size:13px}main{max-width:1120px;margin:auto;padding:48px 30px 0;text-align:center;position:relative}.eyebrow{letter-spacing:2.5px;font-size:10px;color:#47736a;margin-bottom:22px}h1{font:clamp(32px,5.3vw,65px)/1.06 Georgia,serif;letter-spacing:-2px;margin:0;font-weight:500}h1 em{font-size:.62em;letter-spacing:0;font-weight:400}h1 span{color:var(--gold)}.subtitle{font:italic clamp(18px,2.4vw,26px)/1.5 Georgia;margin:20px 0 8px}.ornament{color:var(--gold);font:25px Georgia;letter-spacing:7px}.intro{font-size:14px;line-height:1.8;color:#51716a;margin:17px 0 30px}.controls{display:flex;gap:15px;justify-content:space-between;align-items:center;text-align:left;border:1px solid #bbac783d;border-radius:14px;background:#fff9ebbd;padding:17px 21px}.controls b{font:18px Georgia}.controls span{display:block;font-size:12px;color:#627267;margin-top:5px}.controls label{font-size:11px;color:#607269}.controls select{display:block;margin-top:5px;border:1px solid #c5d3c6;background:#fffdf6;color:var(--ink);padding:9px;border-radius:7px;font-size:12px}.progress{display:flex;justify-content:space-between;padding:20px 2px 12px;font-size:12px;color:#527269}#reset{font-size:11px;color:inherit;border:0;background:none;text-decoration:underline}.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:8px 0;perspective:1000px}.door{position:relative;border:0;border-radius:4px;padding:0;aspect-ratio:184/166;background:#bf9d50;box-shadow:0 5px 10px #064f4930;isolation:isolate;transition:transform .25s,box-shadow .25s}.face{position:absolute;inset:0;background-image:url('calendario.jpeg');background-size:681.522% 755.422%;border-radius:4px;transform-origin:left;transition:transform .65s,filter .3s;z-index:1;backface-visibility:hidden}.door:hover{transform:translateY(-5px);box-shadow:0 10px 20px #064f4940}.door.opening .face{transform:rotateY(-80deg);filter:brightness(1.2)}.door:before{content:'✧';position:absolute;inset:0;display:grid;place-items:center;font-size:52px;color:#fff1bc;background:radial-gradient(#fff9dc,#bbdcd0)}.badge{position:absolute;right:7px;bottom:7px;z-index:2;background:#fff9e9;color:#366256;border-radius:50%;font-size:11px;width:22px;height:22px;display:grid;place-items:center;box-shadow:0 1px 5px #1233}.door.locked .face{filter:saturate(.4) brightness(.86)}.door.locked{cursor:default}.door.locked:hover{transform:none}#status{min-height:18px;font-size:13px}.closing{margin:25px 0 35px}.closing em{font:italic 29px Georgia;color:#07615e}.closing p{font-size:12px;color:#5c7971}footer{padding:25px;border-top:1px solid #0b655426;font:17px Georgia}footer span{display:block;font:11px Arial;color:#6c8077;margin-top:10px}dialog{width:min(590px,calc(100% - 30px));max-height:90dvh;padding:43px 38px 25px;border:1px solid #e1cd96;border-radius:22px;background:radial-gradient(ellipse at top,#e2f4ef,transparent 60%),#fffdf5;color:var(--ink);box-shadow:0 30px 100px #002c3466;text-align:center}dialog::backdrop{background:#002f3bc2;backdrop-filter:blur(7px)}dialog[open]{animation:arrive .45s ease-out}.close{position:absolute;right:15px;top:10px;background:none;border:0;color:#55766a;font-size:30px}.giftday{font-size:11px;letter-spacing:3px;color:#866727}.symbol{font:50px Georgia;color:#bc923b;margin:16px}dialog h2{font:34px/1.15 Georgia;margin:15px 0}.tag{display:inline-block;font-size:11px;background:#e2eee4;padding:8px 13px;border-radius:30px;margin:4px 0 20px}.gifttext{font:16px/1.8 Georgia;text-align:left}.action{background:#e8f0e4;border-left:2px solid #b99b50;text-align:left;padding:16px 20px;margin:22px 0;border-radius:0 10px 10px 0}.action b{font-size:11px;letter-spacing:1px}.action p{font-size:14px;line-height:1.65;margin:8px 0 0}.note{font-size:11px;color:#798579;line-height:1.6}.modalfooter{display:flex;justify-content:space-between;gap:15px;margin-top:25px;border-top:1px solid #b4c9bc;padding-top:19px}.modalfooter button{background:none;border:0;font-size:12px;color:var(--teal);padding:9px 0}.modalfooter button:disabled{opacity:.4;cursor:default}#sparkles{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}.spark{position:absolute;color:#fff3ad;filter:drop-shadow(0 0 5px #ebbd43);animation:burst 1.25s ease-out forwards;font-size:var(--size)}@keyframes burst{0%{transform:translate(0,0) scale(.1);opacity:0}20%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(100deg) scale(.5);opacity:0}}@keyframes arrive{from{opacity:0;transform:translateY(18px) scale(.95)}to{opacity:1;transform:none}}@media(max-width:700px){header{padding:19px 20px}.brand{font-size:22px}.brand span{font-size:9px}main{padding:32px 16px 0}.eyebrow{font-size:8px;letter-spacing:1.5px}h1{letter-spacing:-1px;font-size:clamp(29px,7vw,48px)}.grid{grid-template-columns:repeat(3,1fr);gap:10px}.controls{padding:14px;align-items:flex-start}.controls b{font-size:16px}.controls span{font-size:11px;max-width:145px;line-height:1.5}.controls select{max-width:160px;font-size:10px}.controls label{font-size:10px}dialog{padding:38px 23px 20px}dialog h2{font-size:29px}.closing em{font-size:25px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}.spark{display:none}}
.logo-brand{display:flex;align-items:center;gap:15px}.logo-brand img{width:76px;height:104px;object-fit:contain;background:white;border-radius:8px;box-shadow:0 3px 14px #124f4810}.logo-brand span{font:italic 17px Georgia;letter-spacing:0}.sound-tools{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:340px}#test-sound{background:#fff9e8;border:1px solid #cab477;border-radius:30px;padding:10px 15px;color:#675326;font-size:12px}#sound-status{width:100%;font-size:10px;text-align:right;color:#527269;line-height:1.5}.gift-logo{display:block;width:85px;margin:0 auto 22px}.gift-logo img{width:85px;height:113px;object-fit:contain;background:white;border-radius:7px;box-shadow:0 3px 12px #073d3a0e}.gift-signature{border-top:1px solid #d4c79980;margin-top:24px;padding-top:18px}.gift-signature a,footer>a{color:#0b6460;display:block;font-size:12px;overflow-wrap:anywhere}.gift-signature .map-link{font:italic 14px Georgia;margin:12px 0}.gift-signature small{display:block;color:#738277;font-size:9px;line-height:1.8}.footer-logo{width:90px;height:125px;object-fit:contain;background:white;border-radius:8px;display:block;margin:0 auto 18px}.more-gifts{border:1px solid #c7b47666;border-radius:20px;padding:30px 24px;background:#fffdf5a6;margin:35px auto;max-width:680px}.more-gifts h2{font:28px Georgia}.more-gifts p{font-size:14px;line-height:1.8;color:#526e64}.cta{display:inline-block;background:#08625e;border:1px solid #987b3c;border-radius:25px;color:#fff9e8;padding:12px 20px;font-size:13px;text-decoration:none}.reflection{margin-top:25px;text-align:left;border-top:1px solid #c3ab73;padding-top:15px}.reflection h3{font:24px/1.2 Georgia}.reflection p{font-size:13px;line-height:1.6}.reflection fieldset{border:0;border-bottom:1px solid #dbe5d7;padding:10px 0 18px;margin:0 0 14px}.reflection legend{font-size:14px;line-height:1.6}.reflection label{font-size:12px;display:inline-flex;align-items:center;gap:4px;margin:10px 9px 0 0}.reflection input{accent-color:#08625e}#reflection-result:not(:empty){padding:16px;background:#e5eddd;border-radius:9px;font:16px/1.6 Georgia;margin-top:20px}.door{perspective:850px;transform-style:preserve-3d}.door.opening{z-index:5;transform:translateY(-5px);box-shadow:0 20px 40px #00514655}.door .face{transition:transform 1s cubic-bezier(.22,.75,.2,1),filter 1s}.portal.opening .face{transform:rotateY(-112deg);filter:brightness(1.1)}.drawer.opening .face{transform:translate3d(0,38px,140px) rotateX(-12deg);filter:brightness(1.12);box-shadow:0 -12px 0 #095655,0 20px 25px #002d4e55}.giftbox.opening .face{transform:translate3d(0,-34px,100px) rotateX(26deg) rotateZ(-5deg);filter:brightness(1.12)}.envelope .face{clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);z-index:3}.envelope-flap{position:absolute;inset:0;background-image:url('calendario.jpeg');background-size:681.522% 755.422%;clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:top;z-index:4;transition:transform .7s ease,filter .7s}.letter{position:absolute;inset:15% 13% 5%;background:linear-gradient(135deg,#fffdf5,#e9dab5);display:grid;place-items:center;font:40px Georgia;color:#b89449;border-radius:3px;z-index:2;transition:transform .8s .2s,box-shadow .8s}.envelope.opening .face{transform:none;filter:brightness(1.06)}.envelope.opening .envelope-flap{transform:rotateX(170deg);filter:brightness(1.25)}.envelope.opening .letter{transform:translateY(-60%) translateZ(40px);box-shadow:0 8px 18px #1234}.door.opening:before{box-shadow:0 0 40px 10px #ffedb7c9}.door:not(.locked):hover:after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#fff8ca55 48%,transparent 65%);animation:shine 1.2s both}.badge{z-index:6}@keyframes shine{from{opacity:0;transform:translateX(-20%)}to{opacity:1;transform:translateX(10%)}}dialog[data-opening=drawer][open]{animation:drawer-arrive .6s ease-out}dialog[data-opening=envelope][open]{animation:letter-arrive .65s ease-out}dialog[data-opening=portal][open]{animation:portal-arrive .6s ease-out}@keyframes drawer-arrive{from{opacity:0;transform:perspective(900px) rotateX(12deg) translateY(50px) scale(.9)}to{opacity:1;transform:none}}@keyframes letter-arrive{from{opacity:0;transform:translateY(70px) rotate(-3deg) scale(.85)}to{opacity:1;transform:none}}@keyframes portal-arrive{from{opacity:0;transform:perspective(800px) translateZ(-150px)}to{opacity:1;transform:none}}@media(max-width:700px){.logo-brand img{width:57px;height:79px}.logo-brand span{display:none}.sound-tools{max-width:220px;gap:6px}#sound,#test-sound{padding:8px 11px;font-size:11px}.gift-logo{margin-bottom:15px}.gift-logo img{width:70px;height:94px}.gift-logo{width:70px}.gift-signature small{font-size:9px}.more-gifts{padding:25px 18px}.reflection label{display:flex;margin-top:12px}header{padding-top:12px;padding-bottom:12px}}@media(prefers-reduced-motion:reduce){.door.opening .face,.door.opening .letter,.door.opening .envelope-flap{transform:none!important}dialog[open]{animation:none!important}}
.hero{position:relative;padding:20px 75px 10px;margin:-12px -8px 15px;isolation:isolate}.hero:before{content:'';position:absolute;inset:-25px -35px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 0 10%,#fff5c765,transparent 26%),radial-gradient(ellipse at 100% 90%,#fff0ac48,transparent 26%)}.corner{position:absolute;width:95px;height:105px;color:#bd9446;font:35px Georgia;text-shadow:0 0 12px #ffe7a1;pointer-events:none;animation:twinkle 4s ease-in-out infinite}.corner i{position:absolute;left:42px;top:25px;font-size:24px;font-style:normal;animation:twinkle 3.5s 1s ease-in-out infinite}.corner b{position:absolute;left:9px;top:65px;font-size:13px;color:#fffdf0;text-shadow:0 0 7px #bf923c}.corner span{position:absolute;left:48px;top:65px;font-size:17px;letter-spacing:7px;color:#c3a35c}.top-left{left:0;top:15px}.top-right{right:0;top:15px;transform:scaleX(-1);animation-delay:1s}.bottom-left{left:8px;bottom:6px;transform:rotate(-25deg);animation-delay:2s}.bottom-right{right:8px;bottom:6px;transform:scaleX(-1) rotate(-25deg);animation-delay:.5s}@keyframes twinkle{0%,100%{opacity:.5;filter:brightness(.9)}50%{opacity:1;filter:brightness(1.35) drop-shadow(0 0 6px #ffe8ae)}}.spark{font-weight:bold;text-shadow:0 0 4px white,0 0 12px #ffd562,0 0 22px #e5a519;filter:drop-shadow(0 0 3px #ab7921);animation-duration:1.8s}.controls span{max-width:300px}@media(max-width:700px){.hero{padding:24px 18px 12px;margin-top:-12px}.corner{width:60px;height:75px;font-size:23px;z-index:-1}.corner i{font-size:16px;left:28px;top:20px}.corner b{left:5px;top:45px;font-size:10px}.corner span{left:25px;top:43px;font-size:10px;letter-spacing:2px}.top-left{left:-5px;top:-6px}.top-right{right:-5px;top:-6px}.bottom-left{left:-7px;bottom:5px}.bottom-right{right:-7px;bottom:5px}.hero .eyebrow{max-width:220px;margin:0 auto 24px;line-height:1.7}.hero h1{font-size:clamp(27px,6.6vw,45px)}.controls span{max-width:145px}}@media(prefers-reduced-motion:reduce){.corner,.corner i{animation:none!important;opacity:.8}}
.hero-constellation{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.hero-star{position:absolute;left:var(--sx);top:var(--sy);font:var(--star-size) Georgia;animation:star-glow 4.5s var(--delay) ease-in-out infinite;opacity:.55}.hero-star.gold{color:#c8a35e;text-shadow:0 0 8px #ffe6a1}.hero-star.white{color:#fffef9;text-shadow:0 0 3px #fff,0 0 9px #fff,0 0 18px #a4d4cc}@keyframes star-glow{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.25);filter:brightness(1.25)}}@media(prefers-reduced-motion:reduce){.hero-star{animation:none!important;opacity:.7}}