@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Great+Vibes&family=Montserrat:wght@300;400;500;600&display=swap');
:root{--noche:#08051c;--oro:#ffe7a1;--rosa:#ffb4db;--blanco:#fffafc}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Montserrat,Arial,sans-serif;background:var(--noche);color:var(--blanco)}
body{overflow-x:hidden}
.pantalla{position:relative;min-height:100vh;overflow:hidden}
.oculta{display:none!important}
.portada{display:grid;place-items:center;text-align:center;background:radial-gradient(ellipse at 50% 45%,#382065 0%,#160d35 42%,#05040f 100%)}
.portada:before,.portada:after{content:"";position:absolute;width:70vmax;height:70vmax;border:1px solid #d7a8ff22;border-radius:50%;animation:giro 38s linear infinite}
.portada:after{width:48vmax;height:48vmax;border-color:#ffe7a133;animation-direction:reverse}
.estrellas{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#ffdf9d 1px,transparent 1.5px);background-size:57px 57px,93px 93px;background-position:0 0,24px 36px;opacity:.45;animation:parpadeo 4s ease-in-out infinite alternate}
.portada-contenido{z-index:1;padding:30px 20px;max-width:900px}
.sobre-titulo{letter-spacing:.35em;font-size:.72rem;color:#f5d9ff}
.titulo-brillante{font-family:'Cormorant Garamond',serif;font-size:clamp(2.5rem,7vw,6rem);line-height:1.02;margin:18px 0;color:#fff;text-shadow:0 0 8px #fff,0 0 24px #f0a9ff,0 0 48px #9d62ff;animation:brillo 2.5s infinite alternate}
.titulo-brillante span{color:var(--oro)}
.subtitulo{font-family:'Great Vibes',cursive;font-size:clamp(1.7rem,4vw,3rem);color:#ffe8ff}
.nota-musica{font-size:.75rem;color:#d4c9e8;margin-top:16px}
.dedicatoria-lateral{position:absolute;top:28px;left:28px;text-align:left;font-family:'Great Vibes',cursive;font-size:1.6rem;color:#fff0ff;line-height:1.4}
.dedicatoria-lateral span{color:var(--oro);font-size:2rem}
.boton{position:relative;border:1px solid #ffffff80;border-radius:999px;padding:15px 25px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:transform .25s,box-shadow .25s;color:#21112c}
.boton:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 0 25px #ffb4db99}
.boton-dorado{margin-top:28px;background:linear-gradient(110deg,#fff1bf,#d9a74b,#fff0bd);box-shadow:0 0 25px #eac77b55}
.universo{background:radial-gradient(ellipse at 50% 42%,#24104b,#09071e 55%,#02020a);min-height:100vh}
.galaxia{position:absolute;width:min(75vw,720px);height:min(75vw,720px);min-width:330px;min-height:330px;left:50%;top:44%;transform:translate(-50%,-50%);border-radius:50%;filter:drop-shadow(0 0 28px #a66bff77);animation:giro 24s linear infinite}
.galaxia:before{content:"";position:absolute;inset:12%;border-radius:50%;background:repeating-radial-gradient(ellipse at center,transparent 0 13px,#d7a4ff17 15px 17px,transparent 20px 30px);transform:rotate(-24deg) scaleY(.38)}
.brazo{position:absolute;inset:5%;border-radius:50%;border:16px solid transparent;border-top-color:#f5d9ffb0;border-left-color:#9c6dff9c;transform:rotate(35deg) scaleY(.42);filter:blur(2px);box-shadow:0 0 24px #bd8cff}
.brazo-dos{transform:rotate(145deg) scaleY(.42);border-top-color:#ffd8a7;border-left-color:#ff8dd7}
.brazo-tres{transform:rotate(250deg) scaleY(.42);border-top-color:#a6e9ff;border-left-color:#a17bff}
.agujero-negro{position:absolute;width:24%;height:24%;left:38%;top:38%;border-radius:50%;background:#000;box-shadow:0 0 0 8px #f3baff1c,0 0 25px 12px #a25aff,0 0 65px 25px #6131b8;z-index:2}
.frase-esquina{position:absolute;top:25px;left:25px;font-family:'Great Vibes',cursive;font-size:clamp(1.35rem,3vw,2rem);color:#ffeaff;text-shadow:0 0 12px #d77dff;z-index:3}
.corazon-central{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);z-index:4;text-align:center;width:min(48vw,390px);min-width:260px;animation:flotar 3s ease-in-out infinite}
.corazon{font-size:clamp(8rem,23vw,16rem);line-height:.9;color:#ff2f87;text-shadow:0 0 12px #fff,0 0 28px #ff3b9e,0 0 65px #ff006a;animation:latido 1.3s infinite;position:relative}
.texto-corazon {Hello-Baby:'Great Vibes',cursive;Hello-Baby:clamp(1.15rem,3vw,1.9rem);color:yellow;text-shadow:30px #ff9dcc;position:relative;margin-top:-85px}
.cohetes-corazon{font-size:clamp(1rem,3vw,1.7rem);line-height:1.7;position:relative;margin-top:4px;filter:drop-shadow(0 0 7px #ffc9e8)}
.carta-amor{position:absolute;right:5%;top:7%;width:min(350px,34%);z-index:5;padding:22px 24px;background:#09051d8c;border:1px solid #f6d5ff33;border-radius:18px;backdrop-filter:blur(8px);box-shadow:0 0 35px #7d39b322}
.carta-amor h2{font-family:'Great Vibes',cursive;font-size:2.1rem;color:#ffe4a8;margin:0 0 10px}
.carta-amor p{font-family:'Cormorant Garamond',serif;font-size:1.12rem;line-height:1.35;color:#fff;margin:9px 0}
.boton-arbol{position:absolute;right:5%;bottom:5%;z-index:6;background:linear-gradient(120deg,#ffd4ec,#f49acb);box-shadow:0 0 25px #ff6fba55}
#fuegos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.arbol-pantalla{background:radial-gradient(ellipse at 50% 40%,#292052,#0a1025 60%,#03050d);text-align:center;padding:24px 20px 85px}
.luna{position:absolute;width:170px;height:170px;border-radius:50%;background:#fff1d5;opacity:.08;filter:blur(2px);top:10%;right:10%;box-shadow:0 0 80px #fff1d5}
.tiempo-titulo{position:relative;z-index:2;font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(2.6rem,6vw,4.8rem);color:#ffe6a6;text-shadow:0 0 15px #ffcf7b;margin:0}
.tiempo-subtitulo{position:relative;color:#e6d8ff;letter-spacing:.12em;font-size:.78rem}
.escena-arbol{height:min(52vh,500px);min-height:310px;position:relative;max-width:600px;margin:-4px auto -15px}
#arbolSvg{width:100%;height:100%;overflow:visible}
#tronco{stroke-dasharray:400;stroke-dashoffset:400;animation:crecerTronco 2s ease-out forwards}
#ramas path{stroke-dasharray:180;stroke-dashoffset:180;animation:crecerRama 1.6s ease-out forwards;animation-delay:1.3s}
#ramas path:nth-child(2){animation-delay:1.5s}#ramas path:nth-child(3){animation-delay:1.7s}#ramas path:nth-child(4){animation-delay:1.9s}#ramas path:nth-child(5){animation-delay:2.1s}#ramas path:nth-child(6){animation-delay:2.3s}
.corazon-hoja{transform-box:fill-box;transform-origin:center;animation:nacer .65s cubic-bezier(.2,1.5,.5,1) both;filter:url(#resplandor)}
.contador{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1000px;margin:0 auto;position:relative;z-index:3}
.contador-item{min-width:105px;padding:13px 12px;border:1px solid #f4d5ff55;border-radius:14px;background:#130d2cbd;box-shadow:0 0 20px #9d72ff15}
.contador-item strong{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(1.25rem,3vw,2rem);color:#fff1bf;text-shadow:0 0 10px #ffce75}
.contador-item span{display:block;font-size:.7rem;letter-spacing:.12em;color:#e8d8ff;text-transform:uppercase;margin-top:3px}
.promesa{font-family:'Great Vibes',cursive;font-size:1.7rem;color:#ffcae7;margin:18px 0}
.boton-regresar{position:fixed;right:24px;bottom:20px;background:#f6e7ff;color:#27133c;z-index:10}
@keyframes giro{to{transform:rotate(360deg)}}@keyframes parpadeo{to{opacity:.75}}@keyframes brillo{from{filter:brightness(.9)}to{filter:brightness(1.25)}}@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}@keyframes flotar{0%,100%{margin-top:0}50%{margin-top:-10px}}@keyframes crecerTronco{to{stroke-dashoffset:0}}@keyframes crecerRama{to{stroke-dashoffset:0}}@keyframes nacer{from{opacity:0;transform:scale(0) rotate(-30deg)}to{opacity:1;transform:scale(1) rotate(0)}} 
@media(max-width:760px){.dedicatoria-lateral{top:15px;left:16px;font-size:1.2rem}.sobre-titulo{margin-top:65px}.carta-amor{top:auto;bottom:105px;left:5%;right:5%;width:auto;padding:13px 16px;max-height:36vh;overflow:auto}.carta-amor h2{font-size:1.65rem}.carta-amor p{font-size:1rem;margin:5px 0}.corazon-central{top:35%;width:75vw}.galaxia{top:37%}.boton-arbol{bottom:24px;right:50%;transform:translateX(50%);white-space:nowrap}.boton-arbol:hover{transform:translateX(50%) translateY(-3px)}.frase-esquina{font-size:1.25rem}.escena-arbol{height:38vh;min-height:270px}.contador-item{min-width:calc(33.3% - 12px);padding:10px 5px}.contador-item strong{font-size:1.2rem}.contador-item span{font-size:.58rem}.arbol-pantalla{padding-top:34px}.tiempo-subtitulo{font-size:.65rem}.promesa{font-size:1.35rem}}