
:root{--purple:#7145e8;--navy:#20305c;--sky:#eaf8ff}*{box-sizing:border-box}body{background:radial-gradient(circle at 10% 8%,#d8f5ff 0,transparent 32%),radial-gradient(circle at 95% 25%,#fff0c9 0,transparent 32%),#f3f8ff!important;color:var(--navy);line-height:1.5}header{box-shadow:0 4px 24px #22335512;position:relative;z-index:2}header a:focus-visible,button:focus-visible,.card:focus-visible,.btn:focus-visible{outline:4px solid #f8ba36;outline-offset:3px}.hero{position:relative;overflow:hidden;min-height:330px;background:linear-gradient(120deg,#a2e9ff,#e6ffc4 75%)!important;box-shadow:0 18px 45px #2771a522}.hero:before{content:'✦  ✧  ✦';position:absolute;right:12%;top:12px;color:#fff;font-size:38px;letter-spacing:20px}.hero h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.12;max-width:570px;margin:0 0 18px}.hero p{font-size:1.2rem;max-width:470px}.hero img{width:min(280px,72vw)!important;border-radius:32px;filter:drop-shadow(0 18px 16px #1e517038);animation:float 4s ease-in-out infinite}.card{transition:transform .22s,box-shadow .22s;border:2px solid #fff;box-shadow:0 8px 22px #1e447016!important}.card:hover{transform:translateY(-6px);box-shadow:0 16px 30px #1e44702a!important}.card h3{font-size:1.12rem!important}.btn,button{transition:filter .2s,transform .2s}.btn:hover,button:hover{filter:brightness(1.08)}h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-top:42px}.mateo-guide{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid #e6dcff;border-radius:22px;padding:12px 18px;margin:20px 0;box-shadow:0 8px 20px #5544a20d}.mateo-guide img{height:76px;width:76px;object-fit:cover;border-radius:50%;background:#d8f6ff}.mateo-guide p{margin:4px 0}.mateo-guide strong{color:#6741c1}.guide-star{font-size:1.35rem}.game-mateo-guide{max-width:850px;margin:18px auto;padding:12px}.game-mateo-guide img{height:62px;width:62px}footer{margin-top:45px;background:#fff} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}@media(max-width:640px){header{gap:10px}nav a{margin:0 6px}.hero{padding:25px!important;text-align:center}.hero img{width:190px!important}.cards{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))!important;gap:12px!important}.card{padding:17px!important}.mateo-guide{padding:10px}.mateo-guide img{width:60px;height:60px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
