*{box-sizing:border-box}body{margin:0;background:#faf7ef;color:#24453a;font-family:system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit}header{max-width:1280px;margin:auto;padding:24px 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #24453a22}.logo{text-decoration:none;font-weight:850;font-size:23px;letter-spacing:-1px}.logo span{color:#c36b3e}.back{font-size:14px;text-decoration:none}.hero{max-width:1280px;margin:auto;padding:70px 30px 42px;position:relative}.eyebrow{letter-spacing:3px;font-size:11px;font-weight:800;text-transform:uppercase;color:#8b6542}h1{font-size:clamp(50px,8vw,100px);letter-spacing:-5px;margin:15px 0 18px;line-height:1.05}h1 em{font-family:Georgia,serif;color:#c36b3e;font-weight:400}.hero p{max-width:600px;font-size:19px;line-height:1.65;color:#617168}.badge{display:inline-flex;gap:8px;padding:10px 16px;background:#eaf0dd;border-radius:30px;font-size:13px;font-weight:700}.hero-mark{position:absolute;right:90px;top:85px;font-size:115px;transform:rotate(15deg)}main{max-width:1280px;margin:auto;padding:0 30px 70px}.tools{position:sticky;top:0;background:#faf7eff5;padding:20px 0;z-index:5;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}input{font:inherit;padding:13px 18px;border:1px solid #bdc6b8;border-radius:30px;background:#fff;width:290px;color:#24453a}.filters{display:flex;gap:7px;flex-wrap:wrap}button{font:600 13px system-ui;border:1px solid #c5cebe;background:transparent;color:#24453a;padding:11px 15px;border-radius:30px;cursor:pointer}button[aria-pressed=true]{background:#244d3d;color:white;border-color:#244d3d}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #d28051;outline-offset:3px}.result{font-size:13px;color:#6a786c;margin:7px 0 23px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.game-card{border:1px solid #dbe0d1;border-radius:22px;background:#fff;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 15px #29412d05}.cover{height:190px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#e8eddd}.cover img{width:100%;height:100%;object-fit:cover;object-position:center 38%;transition:transform .35s}.game-card:hover .cover img{transform:scale(1.04)}.tone-1{background:#d9edee}.tone-2{background:#f0e2cd}.tone-3{background:#e5dded}.tone-4{background:#f2dfd6}.big-icon{font-size:87px}.number{position:absolute;top:14px;left:14px;background:#fffdf5dd;padding:6px 9px;border-radius:20px;font-size:12px;font-weight:700}.genre{position:absolute;right:14px;bottom:14px;background:#fffef4ef;padding:6px 11px;border-radius:20px;font-size:11px;font-weight:700}.card-body{padding:22px;display:flex;flex:1;flex-direction:column}h2{font-size:21px;letter-spacing:-.6px;margin:0 0 10px;line-height:1.25}.card-body p{font-size:14px;color:#6c786d;line-height:1.6;margin:0 0 22px;flex:1}.play{display:flex;justify-content:space-between;align-items:center;border-radius:30px;background:#234d3d;color:#fff;text-decoration:none;padding:12px 18px;font-weight:700;font-size:14px}.play:hover{background:#34664f}.empty{text-align:center;padding:50px}.note{margin-top:36px;padding:23px;background:#eef1e4;border-radius:18px;line-height:1.6;font-size:14px}footer{padding:28px 30px;border-top:1px solid #24453a22;display:flex;justify-content:space-between;gap:15px;font-size:12px;color:#6a786c;max-width:1280px;margin:auto}[hidden]{display:none!important}@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-mark{right:40px;font-size:70px;top:55px}}@media(max-width:600px){header{padding:20px}.hero{padding:45px 20px 24px}h1{letter-spacing:-3px}.hero p{font-size:16px}.hero-mark{display:none}main{padding:0 20px 40px}.grid{grid-template-columns:1fr;gap:20px}.tools{position:static}.tools input{width:100%}.filters{gap:6px}button{font-size:12px;padding:10px 12px}.cover{height:210px}footer{flex-direction:column;padding:24px 20px}}
/* Melenas e Iris dan la bienvenida */
.hero-family{display:grid;grid-template-columns:minmax(150px,235px) minmax(0,1fr) minmax(150px,235px);align-items:center;gap:24px;padding:48px 30px 42px;min-height:460px}
.hero-copy{text-align:center;min-width:0}.hero-copy h1{font-size:clamp(48px,6vw,78px);letter-spacing:-3.5px;line-height:1.08;margin:17px 0 20px}.hero-copy p{font-size:17px;line-height:1.65;margin:0 auto 22px;max-width:590px}.hero-copy .eyebrow{letter-spacing:2px;font-size:10px}
.mascot{margin:0;text-align:center;align-self:center;min-width:0}.mascot img{display:block;width:100%;height:290px;object-fit:contain;filter:drop-shadow(0 12px 15px #24453a12)}
.mascot figcaption{display:inline-block;margin-top:12px;font-family:"Comic Sans MS","Chalkboard SE","Arial Rounded MT Bold",cursive;font-size:35px;font-weight:900;line-height:1.35;letter-spacing:1px;color:#d77b43;-webkit-text-stroke:1px #24453a;paint-order:stroke fill;text-shadow:2px 3px 0 #24453a,4px 5px 0 #24453a15;transform:rotate(-4deg)}.mascot-iris figcaption{color:#eda35c;transform:rotate(4deg)}
@media(max-width:1000px) and (min-width:701px){.hero-family{grid-template-columns:155px minmax(0,1fr) 155px;gap:15px;padding-inline:22px}.hero-copy h1{font-size:clamp(43px,6vw,60px)}.mascot img{height:240px}.mascot figcaption{font-size:30px}.hero-copy p{font-size:16px}}
@media(max-width:700px){.hero-family{grid-template-columns:1fr 1fr;gap:22px 28px;padding:35px 20px 30px;min-height:0}.hero-copy{grid-column:1/-1;grid-row:1}.hero-copy h1{font-size:clamp(45px,9vw,63px);letter-spacing:-2px}.hero-copy p{font-size:16px}.mascot{grid-row:2}.mascot-melenas{grid-column:1}.mascot-iris{grid-column:2}.mascot img{height:clamp(155px,39vw,220px)}.mascot figcaption{font-size:29px;margin-top:8px}}