:root{
  --bg:#030303; --text:#ffffff; --muted:rgba(255,255,255,.70); --accent:#7939ff;
  --border:rgba(255,255,255,.10);

  --title: clamp(18px, 2.8vw, 22px);
  --name: clamp(16px, 2.4vw, 18px);
  --desc: clamp(12px, 2vw, 14px);
  --price: clamp(15px, 2.6vw, 18px);

  --overlay-pad:24px; --card-pad:24px; --card-radius:20px; --maxw-card:min(720px,92vw);
  --list-gap:10px; --item-pad-y:14px; --item-pad-x:16px;

  /* MENU (WEB) */
  --nav-offset:100px; --nav-gap:12px; --nav-pad:6px; --nav-item-x:18px; --nav-item-y:10px;
}

*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  overflow-x:hidden;
}

/* ===================== FUNDO ===================== */
spline-viewer#bg{ position:fixed; inset:0; width:100vw; height:100vh; display:block; z-index:0; }
.bg-glass{
  position:fixed; inset:0; z-index:5; pointer-events:none;
  background: radial-gradient(120% 80% at 50% 40%, rgba(8,12,20,.35), rgba(6,8,14,.55) 60%, rgba(0,0,0,.65) 100%);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}

/* ===================== MENU SUSPENSO ===================== */
.nav{
  position:fixed; z-index:50; left:0; right:0; width:max-content; margin-inline:auto;
  top:var(--nav-offset);
}
.nav-list{
  display:flex; gap:var(--nav-gap); padding:var(--nav-pad); margin:0; list-style:none;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px); border-radius:999px;
}
.nav-item{
  display:inline-block; padding:var(--nav-item-y) var(--nav-item-x); border-radius:999px;
  text-decoration:none; color:rgba(255,255,255,.85); font-weight:600;
  transition:background .2s,color .2s,transform .15s;
}
.nav-item:hover{ color:#111; background:rgba(255,255,255,.85); transform:translateY(-1px); }
.nav-item.active{ color:#111; background:#fff; }

/* ===================== OVERLAY + CARD ===================== */
.overlay{
  position:fixed; inset:0; z-index:10;
  display:grid; place-items:center;
  padding:var(--overlay-pad);
}
.catalog-card{
  position:relative; display:grid; row-gap:12px; width:var(--maxw-card);
  padding:var(--card-pad); border-radius:var(--card-radius); color:#e9eefc; background:#0e131f;
  box-shadow: 0 -8px 48px 8px rgba(78,99,255,.22), 0 0 8px 0 rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}
.catalog-card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:42%;
  background:
   radial-gradient(ellipse at bottom right, rgba(172,92,255,.65) -10%, rgba(79,70,229,0) 70%),
   radial-gradient(ellipse at bottom left,  rgba(56,189,248,.65) -10%, rgba(79,70,229,0) 70%),
   radial-gradient(circle at bottom center, rgba(161,58,229,.6) -20%, rgba(79,70,229,0) 60%);
  filter:blur(30px); opacity:.85; border-bottom-left-radius:var(--card-radius); border-bottom-right-radius:var(--card-radius); pointer-events:none;
}

/* ===================== TÍTULO, ABAS, LISTA ===================== */
.popup-title{
  margin:0 0 8px; text-align:center; font-weight:800; letter-spacing:.2px; font-size:var(--title);
  color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.45);
}

.tabs{ display:flex; gap:8px; justify-content:center; margin:2px auto 10px; }
.tab{
  padding:8px 14px; border-radius:10px; background:rgba(255,255,255,.05);
  border:1px solid var(--border); color:#fff; font-weight:600; cursor:pointer;
  transition:transform .15s, background .2s, color .2s;
}
.tab:hover{ transform:translateY(-1px); }
.tab.active{ background:#fff; color:#0a0a0a; }

.service-list{ list-style:none; padding:0; margin:6px 0 0; display:grid; gap:var(--list-gap); }
.service-item{
  display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
  padding:var(--item-pad-y) var(--item-pad-x); border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid var(--border);
}
.service-info{ min-width:0; }
.service-name{ margin:0 0 4px; font-weight:700; font-size:var(--name); color:#fff; }
.service-desc{ margin:0; color:rgba(255,255,255,.70); font-size:var(--desc); }

.service-meta{ display:flex; align-items:center; gap:12px; }
.service-price{ font-weight:800; color:#fff; font-size:var(--price); }

.service-cta{
  display:inline-block; font-weight:800; letter-spacing:.2px; text-decoration:none;
  padding:10px 18px; border-radius:8px; color:#0a0a0a; background:#fff;
  border:1px solid rgba(255,255,255,.25);
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.65);
}
.service-cta:hover{ transform:translateY(-1px); filter:brightness(1.02); }
.service-cta:active{ transform:translateY(0); box-shadow: inset 0 1px 0 rgba(0,0,0,.15); }

.catalog-note{ margin:8px 2px 0; color:rgba(255,255,255,.65); font-size:12px; }

/* ===================== ANIMAÇÕES ===================== */
@keyframes fadeUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeDown{ from{opacity:0; transform:translateY(-20px);} to{opacity:1; transform:translateY(0);} }
.animate-in{ opacity:0; animation-duration:.9s; animation-fill-mode:both; animation-timing-function:cubic-bezier(.25,.4,.25,1); animation-delay:var(--delay,.5s); will-change:transform,opacity; }
.fade-up{ animation-name:fadeUp; }
.fade-down{ animation-name:fadeDown; }
@media (prefers-reduced-motion:reduce){ .animate-in{ animation:none!important; opacity:1!important; } }

/* ===================== GRID no PHONE (itens em coluna) ===================== */
@media (max-width:560px){
  .service-item{ grid-template-columns:1fr; align-items:start; }
  .service-meta{ justify-content:space-between; }
}

/* ===================== SESSÃO MOBILE (ONDE MEXER) ===================== */
/* Menu fixo no topo + card fixo centralizado; só a LISTA rola
   com um fade nas bordas para não “cortar” bruscamente. */
@media (max-width:640px){

  /* -------- CONTROLES MOBILE -------- */
  :root{
    --nav-top-mobile: 50px;     /* ↑/↓ posição do MENU no topo */
    --nav-scale-mobile: .82;    /* ESCALA do menu (0.85–1.00) */

    --card-top-mobile: 140px;   /* ↑/↓ distância do CARD ao topo */
    --overlay-bottom-pad: 32px; /* respiro após o card */

    --list-fade: 16px;          /* espessura do fade da lista (px) */
  }

  /* MENU no topo + escala */
  .nav{
    top: var(--nav-top-mobile);
    bottom: auto;
    transform: none;
    transform-origin: center top;
  }
  /* ESCALA AQUI: na cápsula do menu */
  .nav-list{
    transform: scale(var(--nav-scale-mobile)) !important;
    transform-origin: center top;
    will-change: transform;
  }       
  /* OVERLAY travado (não rola) */
  .overlay{
    position: fixed; inset: 0; z-index: 10;
    padding: var(--overlay-pad);
    overflow: hidden;
  }

  /* CARD fixo, centralizado sem translate (evita “sair da tela”) */
  .catalog-card{
    position: fixed;
    inset-inline: 0;            /* left:0; right:0; */
    margin-inline: auto;        /* centraliza */
    top: var(--card-top-mobile);
    width: min(740px, 94vw);
    max-height: calc(100dvh - var(--card-top-mobile) - var(--overlay-bottom-pad));

    display: grid;
    grid-template-rows: auto auto 1fr auto; /* título | abas | LISTA | nota */
  }

  /* LISTA: rolagem + máscara de fade no topo e base */
  .service-list{
    position: relative;
    overflow: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    padding-block: var(--list-fade); /* dá espaço sob o fade */

    /* Fades usando máscara (compatível com iOS/WebKit) */
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--list-fade),
      #000 calc(100% - var(--list-fade)),
      transparent 100%
    );
            mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--list-fade),
      #000 calc(100% - var(--list-fade)),
      transparent 100%
    );
  }
}