:root{--fondo-1:#fff1f3;--fondo-2:#fdf6ec;--texto:#5b4a45;--texto-suave:#a08c84;--pelo:#f6d9b8;--pelo-claro:#fdf0e0;--pelo-oscuro:#c99a6d;--rubor:#f7b2bd;--linea:#5b4a45;--sombra:#c8a09638;--sobre-atras:#f49aa8;--sobre-frente:#f8b3bd;--sobre-solapa:#ef8698;--carta:#fffdf8;--sello:#fff;--radio:12px}@media (prefers-color-scheme:dark){:root{--fondo-1:#2b2230;--fondo-2:#332734;--texto:#f3e4e4;--texto-suave:#b9a2a8;--pelo:#e0bd97;--pelo-claro:#f3e0c9;--pelo-oscuro:#ab7f55;--rubor:#e894a2;--linea:#3d2f2b;--sombra:#0000004d;--sobre-atras:#d9748a;--sobre-frente:#e68fa0;--sobre-solapa:#c75f78;--carta:#fff8f2}}*{box-sizing:border-box}body{background:linear-gradient(165deg, var(--fondo-1), var(--fondo-2));min-height:100vh;color:var(--texto);-webkit-font-smoothing:antialiased;margin:0;font-family:Quicksand,ui-rounded,Segoe UI,system-ui,sans-serif;font-weight:600}.pagina{place-items:center;min-height:100vh;padding:32px 20px 56px;display:grid}.escena{text-align:center;flex-direction:column;align-items:center;display:flex;position:relative}.saludo{letter-spacing:.04em;color:var(--texto-suave);margin:0 0 4px;font-size:1.05rem}.pie{letter-spacing:.06em;color:var(--texto-suave);margin:26px 0 0;font-size:.92rem}.perrito{width:200px;height:200px;margin-bottom:-10px;animation:3.4s ease-in-out infinite flotar;display:block}@keyframes flotar{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}.sobre{cursor:pointer;perspective:900px;width:240px;height:158px;filter:drop-shadow(0 10px 18px var(--sombra));background:0 0;border:0;margin-top:14px;padding:0;transition:transform .25s;position:relative}.sobre:hover{transform:translateY(-4px)}.sobre:active{transform:translateY(1px)}.sobre:focus-visible{outline:3px dashed var(--sobre-solapa);outline-offset:10px;border-radius:var(--radio)}.sobre-fondo{background:var(--sobre-atras);border-radius:var(--radio);z-index:1;position:absolute;inset:0}.carta{background:var(--carta);z-index:2;border-radius:9px;flex-direction:column;justify-content:center;align-items:center;gap:7px;height:118px;transition:transform .6s cubic-bezier(.3,1.1,.4,1),z-index 0s .45s;display:flex;position:absolute;bottom:14px;left:16px;right:16px;box-shadow:0 4px 14px #78505029}.carta-texto{color:var(--sobre-solapa);font-size:2.3rem;font-weight:700;line-height:1}.carta-sub{letter-spacing:.03em;color:var(--texto-suave);font-size:.8rem;font-weight:600}.sobre-frente{background:var(--sobre-frente);border-radius:0 0 var(--radio) var(--radio);z-index:3;height:100px;position:absolute;bottom:0;left:0;right:0}.sobre-solapa{border-left:120px solid #0000;border-right:120px solid #0000;border-top:78px solid var(--sobre-solapa);transform-origin:top;z-index:4;width:0;height:0;transition:transform .6s cubic-bezier(.5,-.2,.3,1.3) .25s,z-index 0s .25s;position:absolute;top:0;left:0}.sobre-sello{background:var(--sello);width:30px;height:30px;color:var(--sobre-solapa);z-index:5;border-radius:50%;place-items:center;font-size:15px;transition:opacity .25s,scale .25s;display:grid;position:absolute;top:62px;left:50%;translate:-50%}.sobre.abierto .sobre-solapa{z-index:2;transition:transform .6s cubic-bezier(.5,-.2,.3,1.3),z-index;transform:rotateX(180deg)}.sobre.abierto .carta{z-index:6;transition:transform .6s cubic-bezier(.3,1.1,.4,1) .25s,z-index;transform:translateY(-124px)}.sobre.abierto .sobre-sello{opacity:0;scale:.4}.corazones{pointer-events:none;z-index:7;position:absolute;inset:0}.corazon{color:var(--sobre-solapa);opacity:0;font-size:20px;animation:2.6s ease-out forwards subir;position:absolute;bottom:120px}@keyframes subir{0%{opacity:0;transform:translateY(0)scale(.4)}18%{opacity:.95}to{opacity:0;transform:translateY(-190px)scale(1.1)}}@media (prefers-reduced-motion:reduce){.perrito{animation:none}.corazon{display:none}.carta,.sobre-solapa{transition-duration:.01ms}}@media (width<=420px){.perrito{width:165px;height:165px}.sobre{width:210px;height:140px}.sobre-solapa{border-top-width:68px;border-left-width:105px;border-right-width:105px}.carta{height:104px}.sobre-frente{height:88px}.sobre-sello{top:54px}.sobre.abierto .carta{transform:translateY(-110px)}}
