@font-face{font-family:Oswald;src:url('../fonts/oswald.woff2') format('woff2');font-display:swap}
:root{--store-primary:#90008a;--store-accent:#9e72c3;--store-label:#990099;--store-page-bg:#000;--store-card-bg:#000;--store-text:#fff;--logo-max-width:620px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-y:scroll;scrollbar-color:var(--store-accent) #2b1634;scrollbar-width:auto}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#2b1634;border-radius:30px}
::-webkit-scrollbar-thumb{background:var(--store-accent);border-radius:30px}
body{margin:0;min-height:100vh;background:var(--store-page-bg);color:var(--store-text);font-family:Arial,Helvetica,sans-serif}

/* TOPO */
.hero{width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,rgba(0,0,0,.56),rgba(0,0,0,.28)),var(--hero-bg) center/cover no-repeat;padding:70px 20px}
.hero-inner{width:100%;margin:auto;display:flex;flex-direction:column;align-items:stretch}.hero-content{width:100%;max-width:1140px;margin-right:auto;margin-left:0}.hero-logo-wrap{width:100%;display:flex;justify-content:center;align-items:center;margin:0 0 34px}.hero-logo{display:block;width:auto;max-width:min(var(--logo-max-width),90vw);max-height:240px;object-fit:contain;margin:0 auto}
.hero-title{font-family:Oswald,Impact,sans-serif;color:var(--store-text);text-transform:uppercase;font-size:40px;line-height:1.05;font-weight:700;white-space:normal;margin:0}
.hero-copy{max-width:300px;color:var(--store-text);font-size:16px;line-height:1.2;margin-top:16px}
.category-shortcuts{margin-top:60px;height:auto;display:flex;align-items:flex-start;flex-wrap:wrap;gap:40px}
.category-shortcut{width:auto;color:var(--store-text);text-decoration:none;text-align:center;display:flex;flex-direction:column;align-items:center}
.category-icon{width:70px;height:70px;display:flex;justify-content:center;align-items:center;margin-bottom:10px;border:6px solid var(--store-accent);border-radius:50%;background:rgba(0,0,0,.12);transition:transform .2s,border-color .2s}
.category-icon img{width:50%;height:50%;object-fit:contain}
.category-icon strong{font-family:Oswald,Impact,sans-serif}
.category-shortcut span{font-size:16px;color:var(--store-text)}
.category-shortcut:hover .category-icon{transform:translateY(-4px);border-color:var(--store-accent)}

/* CATÁLOGO */
.catalog{background:var(--store-page-bg);padding:0}
.section{scroll-margin-top:20px;width:100%;margin:0;padding:15px}
.section-head{margin:0}
.section-bar{background:var(--store-accent);height:25px;width:168px;margin:0}
.section-title{color:var(--store-text);font-family:Oswald,Impact,sans-serif;font-size:20px;line-height:30px;font-weight:600;margin:20px 0;text-transform:uppercase}
.apps-grid{width:100%;height:auto;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem;align-items:stretch}
.app-card{display:flex;flex-direction:column;background:var(--store-card-bg);border:1px solid color-mix(in srgb,var(--store-primary) 48%,transparent);border-radius:.5rem;box-shadow:0 0 2px 0 color-mix(in srgb,var(--store-primary) 40%,transparent),0 12px 24px -4px color-mix(in srgb,var(--store-primary) 35%,transparent);overflow:hidden;min-width:0;height:100%}
.carousel{width:100%;height:auto;aspect-ratio:16/9;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;background:color-mix(in srgb,var(--store-card-bg) 88%,#111 12%);flex:0 0 auto}
.carousel-track{display:flex;height:100%;width:100%;transition:transform .3s ease}
.carousel-slide{min-width:100%;height:100%;display:block}
.carousel-slide img{width:100%;height:100%;object-fit:fill;display:block}
.carousel-btn{width:35px;height:35px;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);border:0;border-radius:9999px;background:color-mix(in srgb,var(--store-accent) 48%,transparent);color:var(--store-text);font-size:25px;line-height:1;cursor:pointer;padding:0}
.carousel-btn.prev{left:12px}
.carousel-btn.next{right:12px}

/* O corpo é flexível para manter todos os cards com a mesma geometria. */
.app-body{display:flex;flex:1 1 auto;min-height:0;flex-direction:column}
.app-title{margin:24px 24px 12px;color:var(--store-text);font-family:Oswald,Impact,sans-serif;font-size:1.2rem;line-height:1.25;font-weight:600}
.app-description{margin:0 24px;color:var(--store-text);font-size:16px;line-height:1.28;min-height:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.download-btn{width:90%;min-width:0;height:auto;display:flex;align-items:center;justify-content:center;gap:10px;margin:auto auto 14px;padding:5px 14px;border:0;border-radius:8px;background:var(--store-primary);color:var(--store-text);text-decoration:none;font-weight:400;font-size:16px;line-height:1.5;transition:filter .2s,transform .2s}
.download-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.download-btn svg{width:21px;height:21px}
.codes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;justify-content:center;gap:.5rem;width:100%;padding:1rem 10px;border-top:1px solid color-mix(in srgb,var(--store-text) 10%,transparent)}
.code{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.code-label{font-size:14px;line-height:1.2;font-weight:300;color:var(--store-label);margin-bottom:5px;white-space:nowrap}
.code-value{font-size:16px;line-height:1.2;font-weight:600;color:var(--store-text);word-break:break-word}
.empty{padding:28px;border:1px dashed #413641;border-radius:8px;color:#aaa;text-align:center}
.no-image{height:100%;display:grid;place-items:center;color:#777}
.site-footer{padding:28px;text-align:center;color:#777;background:var(--store-page-bg);border-top:1px solid #171717;display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap}
.codes-page-link{color:var(--store-accent);text-decoration:none;font-weight:700}.codes-page-link:hover{text-decoration:underline}
.admin-float{position:fixed;right:18px;bottom:18px;text-decoration:none;background:#1b1b1b;color:#ddd;border:1px solid #333;padding:10px 13px;border-radius:10px;font-size:12px;opacity:.65;z-index:20}
.admin-float:hover{opacity:1}

@media screen and (min-width:600px){
  .hero-title{font-size:56px}
  .hero-copy{max-width:450px}
}
@media screen and (min-width:700px){
  .apps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-card{aspect-ratio:.87}
}
@media screen and (min-width:900px){
  .hero{padding:70px 130px}
  .hero-title{font-size:96px}
  .hero-copy{max-width:700px}
  .category-icon{width:160px;height:160px}
  /* clamp evita que zoom do navegador transforme 80px em uma margem gigante */
  .section{padding:clamp(48px,4vw,80px)}
}
@media screen and (min-width:950px){
  .apps-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media screen and (min-width:1100px){
  .apps-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media screen and (min-width:1536px){
  .hero{padding:70px 250px}
}
@media(max-width:600px){
  .category-shortcuts{gap:22px;margin-top:38px}
  .section{padding:15px}
  .section-bar{width:110px;height:16px}
  .section-title{font-size:19px;margin:16px 0}
  .carousel{height:auto;flex-basis:auto;aspect-ratio:16/9}
  .code-label{font-size:12px}
  .code-value{font-size:14px}
  .admin-float{display:none}
}