/* RESET */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#0b0b0c;
  --panel:#0f1113;
  --muted:#9aa0a6;
  --text:#f5f6f7;
  --glass: rgba(255,255,255,0.02);
  --accent: rgba(0,0,0,0.12);
  --radius:12px;
  --ease: cubic-bezier(0.2,0.9,0.3,1);
}

/* PAGE */
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg), #050505 65%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  overflow-x:hidden;
  padding:36px 20px;
}

/* fundo suave */
.bg-surface{
  position:fixed; inset:0; pointer-events:none;
  background-image: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.015), transparent 6%),
                    radial-gradient(circle at 90% 80%, rgba(255,255,255,0.01), transparent 6%);
  z-index:-1;
}

/* CONTAINER */
.page{ max-width:1100px; margin:0 auto; }

/* HEADER */
.site-header{ text-align:center; margin-bottom:28px; }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:var(--glass); color:var(--muted); font-size:12px; border:1px solid rgba(255,255,255,0.03); }
.badge-dot{ width:7px; height:7px; border-radius:50%; background:var(--muted); opacity:0.6; }
.title{ font-size:clamp(1.6rem,3.6vw,2.4rem); margin-top:14px; color:var(--text); font-weight:600; }
.subtitle{ color:var(--muted); margin-top:8px; font-size:0.95rem; max-width:640px; margin-left:auto; margin-right:auto; }

/* LAYOUT GERAL */
.main-row{ display:grid; grid-template-columns: 1fr 360px; gap:28px; align-items:start; margin-top:8px; }
@media (max-width:1100px){ .main-row{ grid-template-columns: 1fr 300px; } }
@media (max-width:900px){ .main-row{ grid-template-columns:1fr; } }

/* GRID DE BOTÕES */
.buttons-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:16px;
}

/* CARTÕES */
.nav-card{
  display:block;
  padding:14px 16px;
  border-radius:var(--radius);
  text-decoration:none;
  color:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 6px 18px rgba(2,2,2,0.6);
  transition: transform .36s var(--ease), box-shadow .36s var(--ease), border-color .36s var(--ease);
  backdrop-filter: blur(6px);
}
.nav-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(2,2,2,0.7);
  border-color: rgba(255,255,255,0.06);
}

.nav-card.featured{
  border-color: rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
}

.nav-card-inner{ display:flex; gap:12px; align-items:center; }
.nav-icon{
  width:44px; height:44px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.04);
  display:flex; align-items:center; justify-content:center;
}
.nav-icon img{ width:100%; height:100%; object-fit:cover; }
.nav-text{ display:flex; flex-direction:column; gap:4px; }
.nav-pill{ font-size:11px; color:var(--muted); letter-spacing:0.08em; }
.nav-title{ font-size:1rem; font-weight:600; }

/* =========================================================
     HERO PERSONAGEM — ATUALIZADO (MAIOR + MOBILE VISÍVEL)
   ========================================================= */
.hero-character{
  justify-self:end;
  align-self:start;
  width:100%;
  max-width: clamp(380px, 40vw, 640px);
  pointer-events:none;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.65));
  transform-origin:center bottom;
  position:relative;
  z-index:5;
}

.hero-character img{
  width:100%;
  border-radius:14px;
  animation:heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
  100%{ transform:translateY(0); }
}

/* torna visível e ajustado em mobile */
@media (max-width:900px){
  .hero-character{
    position:fixed;
    right:14px;
    bottom:14px;
    max-width:min(48vw, 280px);
    opacity:0.96;
    z-index:50;
  }
  .page{ padding-bottom:140px; }
}

/* =========================================================
       CARROSSEL COMPLETO (COMPATÍVEL COM SEU JS FINAL)
   ========================================================= */
.carousel-section{ margin-top:36px; }
.carousel-shell{
  border-radius:12px;
  padding:8px 0;
  background:transparent;
  border:1px solid rgba(255,255,255,0.03);
  overflow:hidden;
}

.carousel-viewport{
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
}
.carousel-viewport.dragging{ cursor:grabbing; }

/* track animado via JS */
.carousel-track{
  display:flex;
  gap:14px;
  padding:12px 18px;
  align-items:flex-start;
  width:max-content;
  user-select:none;
  -webkit-user-drag:none;
  will-change: transform;
  transform: translateX(0);
}

/* item */
.carousel-item{
  width:160px;
  min-width:160px;
  border-radius:10px;
  overflow:hidden;
  background: rgba(255,255,255,0.01);
  border:1px solid rgba(255,255,255,0.02);
  box-shadow:0 8px 22px rgba(2,2,2,0.55);
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:transform .25s var(--ease);
}

.carousel-item:hover{
  transform:translateY(-6px);
}

/* imagem */
.item-media{
  width:100%; height:100px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:#0b0b0b;
}

.item-media img{
  width:100%; height:100%;
  object-fit:cover;
  -webkit-user-drag:none;
}

/* info */
.item-info{
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.92rem;
}

.item-title{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.item-price{
  font-size:0.88rem;
  color:var(--muted);
}

/* responsivo */
@media (max-width:900px){
  .carousel-item{ width:140px; min-width:140px; }
  .item-media{ height:86px; }
}

/* =========================================================
   DESTAQUE DOS DOIS PRIMEIROS BOTÕES (efeito piscante)
   ========================================================= */

@keyframes pulseLight {
  0% { box-shadow: 0 6px 18px rgba(255,255,255,0.04); }
  50%{ box-shadow: 0 18px 40px rgba(255,255,255,0.08); }
  100%{ box-shadow: 0 6px 18px rgba(255,255,255,0.04); }
}

.buttons-grid .nav-card:nth-child(1),
.buttons-grid .nav-card:nth-child(2){
  position:relative;
  animation:pulseLight 2.6s ease-in-out infinite;
}