:root{--night:#070b18;--ink:#e8ecff;--dim:#9aa3c7;--heart:#ff3b4e;--p1:#5b1a8f;--p2:#b02fc9;--card:#101730}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--night);color:var(--ink);font:400 1.05rem/1.6 "Bricolage Grotesque",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2{font-weight:800;line-height:1;letter-spacing:-.02em}
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1rem;
 background:linear-gradient(rgba(7,11,24,.55),var(--night)),url(fotos/hero.webp) center/cover}
.toast{display:flex;align-items:center;gap:.9rem;width:min(560px,100%);padding:.9rem 1.1rem;border-radius:12px;text-align:left;
 background:linear-gradient(100deg,var(--p1),var(--p2));box-shadow:0 14px 40px rgba(176,47,201,.35);animation:toast 1s .3s cubic-bezier(.2,.9,.3,1.1) both}
.badge{background:#fff;color:#111;font-weight:800;font-size:.8rem;padding:.35rem .8rem;border-radius:999px;white-space:nowrap}
.toast-body b{font-size:.95rem;letter-spacing:.04em}
.toast-body p{font-size:.92rem;line-height:1.3}
.toast time{margin-left:auto;font-size:.8rem;opacity:.85;white-space:nowrap}
@keyframes toast{from{transform:translateY(-140%);opacity:0}to{transform:none;opacity:1}}
h1{font-size:clamp(3rem,13vw,8rem);margin-top:2.5rem}
.amp{color:var(--heart)}
.since{color:var(--dim);margin:.8rem 0 2rem;font-family:Caveat,cursive;font-size:1.7rem}
.counter{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.counter div{min-width:4.4rem;padding:.7rem .5rem;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(7,11,24,.6);backdrop-filter:blur(6px)}
.counter b{display:block;font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums}
.counter span{font-size:.8rem;color:var(--dim)}
.total{margin-top:1.2rem;color:var(--dim)}
.total span{color:var(--heart);font-weight:800}
section{max-width:1100px;margin:0 auto;padding:5rem 1.2rem 1rem}
h2{font-size:clamp(2rem,6vw,3.2rem);margin-bottom:2rem}
.gallery{columns:3 280px;column-gap:1.4rem}
figure{break-inside:avoid;margin:0 0 1.6rem;background:var(--card);padding:.6rem .6rem .4rem;border-radius:4px;position:relative;cursor:zoom-in;transition:transform .25s}
figure:nth-child(odd){transform:rotate(-1.6deg)}
figure:nth-child(even){transform:rotate(1.3deg)}
figure:hover{transform:rotate(0) scale(1.02)}
figure::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:20px;margin-left:-35px;background:var(--heart);opacity:.85;transform:rotate(-3deg);border-radius:2px}
figure img{width:100%;display:block;border-radius:2px}
figure.art{background:linear-gradient(135deg,#2a0f3d,#101730)}
figcaption{font-family:Caveat,cursive;font-size:1.5rem;text-align:center;padding:.3rem 0 .2rem;color:var(--ink)}
.videos{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}
.videos video{width:min(300px,100%);aspect-ratio:9/16;object-fit:cover;background:#000;border-radius:18px;border:3px solid var(--card)}
button{font:800 1rem "Bricolage Grotesque",sans-serif;color:#fff;background:var(--heart);border:0;padding:.9rem 1.6rem;border-radius:999px;cursor:pointer}
button:hover{filter:brightness(1.1)}
button:focus-visible,figure:focus-visible{outline:3px solid #fff;outline-offset:3px}
footer{text-align:center;padding:2rem;color:var(--dim);border-top:1px solid rgba(255,255,255,.08)}
dialog{border:0;background:transparent;max-width:96vw;max-height:96vh;padding:0;overflow:visible}
dialog::backdrop{background:rgba(0,0,0,.88)}
dialog img{max-width:94vw;max-height:90vh;display:block;border-radius:6px}
dialog button{position:absolute;top:-14px;right:-6px;padding:.5rem .8rem}
@media(prefers-reduced-motion:reduce){.toast{animation:none}html{scroll-behavior:auto}figure{transition:none}}