﻿
    @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@500;600;700;800&family=Press+Start+2P&display=swap');
    /* =========================
       CONFIG RÃPIDA (FÃCIL DE EDITAR)
       ========================= */
    :root{
      --bg0:#06110b;
      --bg1:#071c12;
      --bg2:#0b2a1c;
      --card: rgba(10, 30, 20, .66);
      --card2: rgba(7, 20, 14, .70);
      --stroke: rgba(255,255,255,.10);
      --stroke2: rgba(130,255,190,.16);
      --text:#eafff2;
      --muted:#bfe8d1;
      --neon:#7CFF2E;
      --neon2:#19ff9b;
      --neon3:#00d3ff;
      --shadow: 0 20px 70px rgba(0,0,0,.55);
      --shadow2: 0 14px 38px rgba(0,0,0,.45);
      --radius: 18px;
      --radius2: 26px;
      --maxw: 1200px;
      --navbarH: 74px;
      --blur: 14px;
      --ip: "jogarbrasilcraft.com";
    }

    html.theme-dark{
      --bg0:#030807;
      --bg1:#04120b;
      --bg2:#061a12;
      --card: rgba(8, 18, 14, .72);
      --card2: rgba(4, 12, 9, .74);
      --stroke: rgba(255,255,255,.09);
      --stroke2: rgba(130,255,190,.14);
      --text:#eafff2;
      --muted:#b5e2cb;
      --shadow: 0 24px 90px rgba(0,0,0,.68);
      --shadow2: 0 16px 44px rgba(0,0,0,.60);
    }

    html.theme-dark body{
      background:
        radial-gradient(900px 500px at 12% 8%, rgba(124,255,46,.06), transparent 70%),
        radial-gradient(900px 620px at 88% 16%, rgba(25,255,155,.035), transparent 70%),
        linear-gradient(180deg, rgba(0, 2, 1, .94), rgba(0, 5, 3, .97)),
        url(imagens/fundoteste.jpg) center / cover fixed no-repeat;
    }

    html.theme-dark .navbar{
      background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.68));
      border-bottom-color: rgba(124,255,46,.10);
    }

    html.theme-dark .panel,
    html.theme-dark .hero-right-card,
    html.theme-dark .item,
    html.theme-dark .person,
    html.theme-dark .modal-card{
      background: linear-gradient(180deg, rgba(1, 8, 5, .96), rgba(0, 3, 2, .96));
      border-color: rgba(130,255,190,.16);
    }

    html.theme-dark .hero,
    html.theme-dark .panel{
      background:
        radial-gradient(800px 360px at 20% 20%, rgba(124,255,46,.07), transparent 68%),
        linear-gradient(135deg, rgba(0,0,0,.70), rgba(0,0,0,.48));
    }

    html.theme-dark .nav-link,
    html.theme-dark .ip-pill,
    html.theme-dark .icon-btn,
    html.theme-dark .btn,
    html.theme-dark .mini,
    html.theme-dark .mini-row{
      background-color: rgba(0,0,0,.46);
    }

    html.theme-dark #themeBtn{
      border-color: rgba(124,255,46,.42);
      background: rgba(124,255,46,.10);
      box-shadow: 0 0 0 3px rgba(124,255,46,.08);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
      background:
        radial-gradient(900px 500px at 12% 8%, rgba(124,255,46,.15), transparent 70%),
        radial-gradient(900px 620px at 88% 16%, rgba(25,255,155,.09), transparent 70%),
        linear-gradient(180deg, rgba(2, 8, 6, .70), rgba(3, 14, 10, .82)),
        url(imagens/fundoteste.jpg) center / cover fixed no-repeat;
      overflow-x:hidden;
    }

    a{ color:inherit; text-decoration:none; }
    button{ font-family:inherit; }

    .container{
      width:min(var(--maxw), calc(100% - 34px));
      margin-inline:auto;
    }

    .grid{
      display:grid;
      gap:18px;
    }

    .hidden{ display:none !important; }

    /* =========================
       NAVBAR
       ========================= */
    .navbar{
      position:sticky;
      top:0;
      z-index:50;
      height:var(--navbarH);
      backdrop-filter: blur(var(--blur));
      background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.22));
      border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .nav-inner{
      height:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width: 220px;
    }

    .logo{
      width:44px;height:44px;
      border-radius:14px;
      background:
        radial-gradient(16px 16px at 30% 30%, rgba(124,255,46,.9), transparent 60%),
        radial-gradient(18px 18px at 70% 65%, rgba(25,255,155,.8), transparent 60%),
        linear-gradient(135deg, rgba(124,255,46,.28), rgba(0,0,0,.0));
      border: 1px solid rgba(124,255,46,.35);
      box-shadow: 0 0 0 3px rgba(124,255,46,.08);
      position:relative;
      overflow:hidden;
    }
    .logo::after{
      content:"";
      position:absolute; inset:-40%;
      background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
      transform: rotate(18deg);
      animation: sweep 3.8s linear infinite;
      opacity:.8;
    }
    @keyframes sweep{
      0%{ transform: translateX(-28%) rotate(18deg); }
      100%{ transform: translateX(28%) rotate(18deg); }
    }

    .brand-text{
      display:flex;
      flex-direction:column;
      line-height:1.05;
    }
    .brand-text strong{
      font-size:14px;
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    .brand-text span{
      font-size:12px;
      color:var(--muted);
      opacity:.9;
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      justify-content:center;
    }

    .nav-link{
      position:relative;
      padding:10px 12px;
      border-radius:14px;
      font-size:13px;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:rgba(234,255,242,.92);
      border:1px solid rgba(255,255,255,.06);
      background: rgba(0,0,0,.18);
      overflow:hidden;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
      user-select:none;
    }
    .nav-link:hover{
      transform: translateY(-1px);
      border-color: rgba(124,255,46,.35);
      background: rgba(0,0,0,.26);
    }
    .nav-link::before{
      content:"";
      position:absolute; inset:-60% -40%;
      background: linear-gradient(120deg, transparent 40%, rgba(124,255,46,.25) 52%, transparent 64%);
      transform: translateX(-30%) rotate(18deg);
      opacity:.0;
      transition: opacity .2s ease;
    }
    .nav-link:hover::before{ opacity:1; animation: navglow 1.3s linear infinite; }
    @keyframes navglow{
      0%{ transform: translateX(-35%) rotate(18deg); }
      100%{ transform: translateX(35%) rotate(18deg); }
    }
    .nav-link.active{
      border-color: rgba(124,255,46,.55);
      box-shadow: 0 0 0 3px rgba(124,255,46,.08);
    }

    .nav-dropdown{
      position:relative;
    }
    .nav-dropdown summary{
      list-style:none;
      cursor:pointer;
    }
    .nav-dropdown summary::-webkit-details-marker{
      display:none;
    }
    .nav-menu{
      position:absolute;
      top:calc(100% + 8px);
      left:0;
      min-width:160px;
      padding:8px;
      border-radius:14px;
      border:1px solid rgba(124,255,46,.22);
      background:rgba(5, 18, 10, .96);
      box-shadow:0 18px 40px rgba(0,0,0,.35), 0 0 0 3px rgba(124,255,46,.06);
      display:none;
      z-index:20;
    }
    .nav-dropdown[open] .nav-menu{
      display:grid;
      gap:8px;
    }
    .nav-menu .nav-link{
      display:block;
      text-align:left;
      white-space:nowrap;
    }

    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
      min-width: 220px;
      justify-content:flex-end;
    }

    .ip-pill{
      display:flex;
      align-items:center;
      gap:10px;
      padding:9px 12px;
      border-radius:16px;
      border:1px solid rgba(124,255,46,.28);
      background: rgba(0,0,0,.22);
      box-shadow: 0 0 0 3px rgba(124,255,46,.06);
      cursor:pointer;
      user-select:none;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      max-width: 340px;
    }
    .ip-pill:hover{
      transform: translateY(-1px);
      border-color: rgba(124,255,46,.48);
      background: rgba(0,0,0,.30);
    }
    .ip-pill b{
      font-size:12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      opacity:.9;
    }
    .ip-pill code{
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      font-size:12px;
      color:rgba(234,255,242,.95);
      background: rgba(124,255,46,.10);
      border:1px solid rgba(124,255,46,.22);
      padding:6px 8px;
      border-radius:12px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .icon-btn{
      width:44px;height:44px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      display:grid;
      place-items:center;
      cursor:pointer;
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
      user-select:none;
    }
    .icon-btn:hover{
      transform: translateY(-1px);
      border-color: rgba(25,255,155,.35);
      background: rgba(0,0,0,.28);
    }

    .hamburger{
      display:none;
      width:44px;height:44px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      place-items:center;
      cursor:pointer;
    }

    .hero{
      position:relative;
      padding: 34px 0 24px;
    }

    .hero-wrap{
      position:relative;
      border-radius: var(--radius2);
      overflow:hidden;
      box-shadow: var(--shadow);
      border:1px solid rgba(255,255,255,.07);
      background:
        radial-gradient(900px 420px at 20% 20%, rgba(124,255,46,.18), transparent 65%),
        radial-gradient(900px 520px at 85% 30%, rgba(0,211,255,.10), transparent 70%),
        linear-gradient(135deg, rgba(0,0,0,.42), rgba(0,0,0,.18));
      min-height: 520px;
    }

    .hero-bg{
      position:absolute; inset:0;
      background:
        linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.18) 65%, rgba(0,0,0,.10) 100%),
        url("https://images.unsplash.com/photo-1520975958225-9e3f548a8f47?auto=format&fit=crop&w=1800&q=80");
      background-size: cover;
      background-position: center;
      filter: saturate(1.1) contrast(1.05);
      transform: scale(1.03);
    }

    .hud{
      position:absolute; inset:0;
      pointer-events:none;
      opacity:.9;
      background:
        radial-gradient(260px 160px at 18% 18%, rgba(124,255,46,.22), transparent 65%),
        radial-gradient(340px 200px at 88% 24%, rgba(25,255,155,.16), transparent 68%);
      mix-blend-mode: screen;
    }
    .hud-lines{
      position:absolute; inset:-40px;
      background:
        repeating-linear-gradient(90deg, rgba(124,255,46,.06) 0, rgba(124,255,46,.06) 1px, transparent 1px, transparent 18px),
        repeating-linear-gradient(0deg, rgba(25,255,155,.05) 0, rgba(25,255,155,.05) 1px, transparent 1px, transparent 22px);
      opacity:.35;
      transform: rotate(-2deg);
    }
    .hud-bar{
      position:absolute;
      left: 50%;
      top: 34px;
      transform: translateX(-50%);
      width: min(760px, 92%);
      height: 46px;
      border-radius: 16px;
      border:1px solid rgba(124,255,46,.30);
      background: linear-gradient(90deg, rgba(124,255,46,.10), rgba(0,0,0,.0) 55%, rgba(25,255,155,.10));
      box-shadow: 0 0 0 3px rgba(124,255,46,.06);
      overflow:hidden;
    }
    .hud-bar::after{
      content:"";
      position:absolute; inset:-60% -30%;
      background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.24) 52%, transparent 66%);
      transform: translateX(-30%) rotate(18deg);
      animation: navglow 2.2s linear infinite;
      opacity:.85;
    }

    .hero-content{
      position:relative;
      z-index:3;
      height:100%;
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 18px;
      padding: 96px 30px 28px;
      align-items:center;
    }

    .hero-left{
      padding: 10px 8px 10px 8px;
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(124,255,46,.26);
      background: rgba(0,0,0,.22);
      font-size:12px;
      letter-spacing:.18em;
      text-transform:uppercase;
      color: rgba(234,255,242,.92);
    }
    .dot{
      width:8px;height:8px;border-radius:50%;
      background: var(--neon);
      box-shadow: 0 0 18px rgba(124,255,46,.55);
    }

    h1{
      margin:14px 0 8px;
      font-size: clamp(34px, 4vw, 56px);
      letter-spacing: .03em;
      text-transform:uppercase;
      line-height:1.0;
    }
    .sub{
      margin: 0 0 18px;
      color: rgba(191,232,209,.92);
      font-size: 15px;
      line-height:1.6;
      max-width: 60ch;
    }

    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
      margin-top: 14px;
    }

    .btn{
      position:relative;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.24);
      color: rgba(234,255,242,.96);
      padding: 12px 14px;
      border-radius: 16px;
      cursor:pointer;
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
      overflow:hidden;
      user-select:none;
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(124,255,46,.40);
      background: rgba(0,0,0,.32);
    }
    .btn::before{
      content:"";
      position:absolute; inset:-70% -40%;
      background: linear-gradient(120deg, transparent 40%, rgba(124,255,46,.22) 52%, transparent 66%);
      transform: translateX(-30%) rotate(18deg);
      opacity:0;
      transition: opacity .2s ease;
    }
    .btn:hover::before{ opacity:1; animation: navglow 1.4s linear infinite; }
    .btn.primary{
      border-color: rgba(124,255,46,.55);
      background: linear-gradient(180deg, rgba(124,255,46,.18), rgba(0,0,0,.20));
      box-shadow: 0 0 0 3px rgba(124,255,46,.08);
    }

    .socials{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      margin-top: 16px;
    }
    .soc{
      width:44px;height:44px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      display:grid;
      place-items:center;
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
    }
    .soc:hover{
      transform: translateY(-1px);
      border-color: rgba(25,255,155,.35);
      background: rgba(0,0,0,.28);
    }
    .soc svg{ width:20px;height:20px; opacity:.95; }

    .hero-right{
      display:grid;
      gap: 12px;
      justify-items:stretch;
    }
    .card{
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, var(--card), var(--card2));
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .card-pad{ padding:16px; }
    .card-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom: 10px;
    }
    .card-title b{
      font-size:12px;
      letter-spacing:.18em;
      text-transform:uppercase;
      opacity:.95;
    }
    .badge{
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(124,255,46,.26);
      background: rgba(124,255,46,.10);
      color: rgba(234,255,242,.96);
    }

    .big-logo{
      display:grid;
      place-items:center;
      padding: 16px 16px 6px;
    }
    .big-logo img{
      width: 120px;
      height: 120px;
      object-fit: contain;
      filter: drop-shadow(0 18px 38px rgba(0,0,0,.55));
    }
    .big-logo small{
      display:block;
      margin-top: 8px;
      color: rgba(191,232,209,.92);
      text-align:center;
    }

    .contact-list{
      display:grid;
      gap:10px;
      margin-top: 10px;
    }
    .mini{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding: 12px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
    }
    .mini .emo{ font-size:18px; width:22px; text-align:center; }
    .mini b{ font-size:13px; display:block; margin-bottom:2px; }
    .mini span{ font-size:12px; color: rgba(191,232,209,.90); line-height:1.35; }

    .contact-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top: 12px;
    }

    .mini-row{
      display:flex;
      justify-content:space-between;
      gap: 12px;
      align-items:center;
      padding: 12px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      margin-top:10px;
    }
    .mini-row code{
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      font-size:12px;
      background: rgba(124,255,46,.10);
      border:1px solid rgba(124,255,46,.22);
      padding:6px 8px;
      border-radius: 12px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width: 260px;
    }

    main{ padding-bottom: 46px; }

    .page{
      padding: 26px 0 8px;
    }

    .page-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 14px;
      margin-bottom: 16px;
    }
    .page-head h2{
      margin:0;
      font-size: 22px;
      letter-spacing:.14em;
      text-transform:uppercase;
    }
    .page-head p{
      margin:0;
      color: rgba(191,232,209,.90);
      font-size: 13px;
      line-height:1.5;
      max-width: 64ch;
    }

    .shop-head{
      position:relative;
      display:grid;
      grid-template-columns: 1fr;
      justify-items:center;
      align-items:center;
      text-align:center;
      min-height: 82px;
      padding: 8px 170px;
    }
    .shop-head h2{
      max-width: 760px;
      margin:0 auto;
      font-size: clamp(24px, 2.6vw, 34px);
      line-height:1.12;
      letter-spacing:.08em;
      color:#f7fff9;
      text-shadow:
        1px 1px 0 #72d23f,
        2px 2px 0 #2f7b1d,
        3px 3px 0 #123d12,
        0 7px 12px rgba(0,0,0,.62),
        0 0 10px rgba(124,255,46,.28);
    }
    .shop-head p{
      margin:8px auto 0;
      max-width: 58ch;
      color:rgba(225,255,235,.95);
      font-size:12px;
      text-shadow:0 2px 8px rgba(0,0,0,.7);
    }
    .shop-head .shop-actions{
      position:absolute;
      right:0;
      top:50%;
      transform:translateY(-50%);
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .panel{
      border-radius: var(--radius2);
      border:1px solid rgba(255,255,255,.07);
      background: linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.14));
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .panel-pad{ padding: 16px; }

    .cards{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .item{
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, var(--card), var(--card2));
      box-shadow: var(--shadow2);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height: 340px;
    }

    .thumb{
      position:relative;
      width:100%;
      aspect-ratio: 16 / 10;
      background:
        radial-gradient(160px 80px at 20% 30%, rgba(124,255,46,.20), transparent 65%),
        radial-gradient(160px 90px at 80% 70%, rgba(25,255,155,.14), transparent 70%),
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
      border-bottom:1px solid rgba(255,255,255,.06);
      overflow:hidden;
    }
 .thumb{
  display:flex;
  align-items:center;
  justify-content:center;
}

.thumb img{
  width:100%;
  height:100%;
  object-fit: contain;
  padding: 12px;
  display:block;
}

    .thumb::after{
      content:"";
      position:absolute; inset:-60% -40%;
      background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18) 52%, transparent 66%);
      transform: translateX(-30%) rotate(18deg);
      animation: navglow 3.2s linear infinite;
      opacity:.35;
      pointer-events:none;
    }

    .item-body{
      padding: 14px;
      display:flex;
      flex-direction:column;
      gap:10px;
      flex:1;
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
      justify-content:space-between;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(124,255,46,.26);
      background: rgba(124,255,46,.10);
      color: rgba(234,255,242,.96);
    }
    .price{
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      font-size: 12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(25,255,155,.22);
      background: rgba(25,255,155,.10);
      color: rgba(234,255,242,.96);
      white-space:nowrap;
    }
    .item h3{
      margin: 2px 0 0;
      font-size: 14px;
      letter-spacing:.06em;
      text-transform:uppercase;
    }
    .item p{
      margin: 0;
      color: rgba(191,232,209,.90);
      font-size: 12.5px;
      line-height:1.5;
    }

    .item-actions{
      display:flex;
      gap:10px;
      margin-top:auto;
    }
    .item-actions .btn{
      flex:1;
      padding: 11px 12px;
      border-radius: 14px;
      font-size: 12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:8px;
    }

    .item-actions .special-entry-btn{
      text-decoration:none;
    }

    .pager{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 12px;
      margin-top: 14px;
      flex-wrap:wrap;
    }
    .pager .btn{
      padding: 10px 12px;
      border-radius: 14px;
    }
    .pager .meta{
      color: rgba(191,232,209,.92);
      font-size: 12px;
    }

    .team-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .person{
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, var(--card), var(--card2));
      box-shadow: var(--shadow2);
      overflow:hidden;
      display:flex;
      flex-direction:column;
    }
    .avatar{
      aspect-ratio: 16/10;
      background:
        radial-gradient(160px 80px at 20% 30%, rgba(124,255,46,.18), transparent 65%),
        radial-gradient(160px 90px at 80% 70%, rgba(0,211,255,.12), transparent 70%),
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
      border-bottom:1px solid rgba(255,255,255,.06);
      overflow:hidden;
    }
    .avatar img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }
    .person-body{
      padding: 14px;
      display:flex;
      flex-direction:column;
      gap: 10px;
    }
    .role-shimmer{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:10px;
      letter-spacing:.10em;
      text-transform:uppercase;
      padding:5px 9px;
      border-radius:6px;
      border:1px solid rgba(124,255,46,.65);
      background:#173326;
      box-shadow:0 0 12px rgba(124,255,46,.18), inset 0 1px 0 rgba(255,255,255,.12);
      overflow:hidden;
      width:fit-content;
    }
    .role-shimmer::after{
      content:none;
      position:absolute; inset:-70% -40%;
      background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.26) 52%, transparent 66%);
      transform: translateX(-30%) rotate(18deg);
      animation: navglow 2.4s linear infinite;
      opacity:.85;
      pointer-events:none;
    }

    .stars{
      display:flex; gap:4px;
      opacity:.95;
    }
    .stars svg{ width:16px;height:16px; }

    .person-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .person-actions a{
      flex:1;
      min-width: 120px;
    }

    /* Equipe: cards mais compactos e redes com os mesmos Ã­cones do inÃ­cio do site. */
    .team-grid{
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:12px;
    }
    .person{ min-width:0; }
    .avatar{ height:145px; aspect-ratio:auto; padding:8px; }
    .avatar img{ object-fit:contain; }
    .person-body{ padding:12px; gap:8px; }
    .person-body p{ margin:0; font-size:12px; line-height:1.4; }
    .person-actions{ gap:7px; margin-top:2px; }
    .person-actions a{
      min-width:0;
      padding:8px 7px;
      font-size:11px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
    }
    .team-social-logo{ width:15px; height:15px; object-fit:contain; border-radius:3px; }
    .person-actions .team-patreon{
      border-color:rgba(255,66,77,.72);
      background:linear-gradient(135deg, rgba(255,66,77,.18), rgba(255,135,69,.10));
    }

    .terms-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top: 10px;
    }

    footer{
      padding: 22px 0 30px;
      border-top: 1px solid rgba(255,255,255,.06);
      background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.30));
    }
    .foot{
      display:flex;
      justify-content:space-between;
      gap: 16px;
      align-items:flex-start;
      flex-wrap:wrap;
    }
    .foot small{ color: rgba(191,232,209,.86); line-height:1.6; }
    .foot .foot-links{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
}
.modal.show{ display:flex; }

.modal-card{
  width: min(800px, 100%);
  max-height: min(88vh, 860px);
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(8, 22, 16, .86), rgba(6, 16, 12, .84));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;

  display:flex;
  flex-direction:column;
}

.modal-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex: 0 0 auto;
}
.modal-top b{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.close{
  width:44px;height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.close:hover{
  transform: translateY(-1px);
  border-color: rgba(124,255,46,.40);
  background: rgba(0,0,0,.30);
}

.modal-body{
  padding: 14px;
  display:grid;
  gap: 12px;

  overflow:auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

.modal-body h3{
  margin: 0;
  font-size: 16px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.modal-body p{
  margin: 0;
  color: rgba(191,232,209,.92);
  line-height:1.6;
  font-size: 13px;
}

.modal-bottom{
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  gap: 10px;
  justify-content:space-between;
  flex-wrap:wrap;
  flex: 0 0 auto;
}
.modal-bottom .btn{
  padding: 11px 12px;
  border-radius: 14px;
  font-size: 12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Acabamento exclusivo para Termos, Regras e Termos do Site. */
.modal.terms-modal{background:rgba(0,5,4,.78);backdrop-filter:blur(10px)}
.modal.terms-modal .modal-card{width:min(720px,100%);max-height:min(700px,90vh);border:1px solid rgba(0,229,202,.65);border-radius:14px;background:linear-gradient(135deg,#061c17,#020a08);box-shadow:0 24px 70px rgba(0,0,0,.70)}
.modal.terms-modal .modal-top{padding:20px 22px 14px;border-bottom:0}
.modal.terms-modal .modal-top b{color:#eafff4;font-family:Oxanium,Arial,sans-serif;font-size:23px;font-weight:900;letter-spacing:0;text-transform:none}
.modal.terms-modal .close{width:38px;height:38px;border:1px solid rgba(0,229,202,.55);border-radius:8px;background:#09231d}
.modal.terms-modal .close:hover{border-color:#a6ff61;background:#0d2b22}
.modal.terms-modal .modal-body{padding:0 22px 20px;gap:0;color:#cce5db;font-family:Oxanium,Arial,sans-serif}
.modal.terms-modal .modal-body section{margin:0 0 13px;padding:15px 16px;border:1px solid rgba(0,229,202,.22);border-radius:10px;background:linear-gradient(135deg,rgba(9,40,32,.68),rgba(3,16,12,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.modal.terms-modal .modal-body h2{margin:0 0 14px;color:#eafff4;font-size:20px;font-weight:900;letter-spacing:0;text-transform:none}
.modal.terms-modal .modal-body h3,.modal.terms-modal .modal-body h4{margin:18px 0 8px;color:#a6ff61;font-size:15px;font-weight:900;letter-spacing:0;text-transform:none;opacity:1}
.modal.terms-modal .modal-body > h3{display:flex;align-items:center;gap:9px;margin:0 0 10px;padding:13px 15px;border:1px solid rgba(0,229,202,.32);border-radius:9px;color:#effff6;background:linear-gradient(90deg,rgba(0,229,202,.11),rgba(124,255,46,.06));font-size:17px}.modal.terms-modal .modal-body > h3::before{content:"";width:7px;height:7px;border-radius:50%;background:#a6ff61;box-shadow:0 0 12px rgba(166,255,97,.7)}
.modal.terms-modal .modal-body > h4{display:inline-flex;align-items:center;margin:18px 0 8px;padding:7px 10px;border:1px solid rgba(166,255,97,.36);border-radius:7px;background:rgba(166,255,97,.08);font-size:14px}
.modal.terms-modal .modal-body p{margin:0 0 11px;color:#cce5db;line-height:1.65;font-size:13px;opacity:1}
.modal.terms-modal .modal-body > p{margin:0 0 8px;padding:14px 15px;border-left:3px solid #a6ff61;border-radius:0 8px 8px 0;background:rgba(2,13,10,.62)}
.modal.terms-modal .modal-body p b{color:#effff6}.modal.terms-modal .modal-body p strong{color:#a6ff61}
.modal.terms-modal .modal-body a{color:#a6ff61;font-weight:900}
.modal.terms-modal .modal-body li{border-color:rgba(0,229,202,.22);border-radius:8px;background:#061914;color:#cce5db}
.modal.terms-modal .modal-bottom{padding:14px 22px 20px;border-top:0;justify-content:flex-end}
.modal.terms-modal .modal-bottom .btn{border-radius:7px!important}

/* Acabamento exclusivo para os modais â€œSobreâ€ dos produtos da loja. */
.modal.shop-about-modal{background:rgba(0,5,4,.78);backdrop-filter:blur(10px)}
.modal.shop-about-modal .modal-card{width:min(800px,100%);border-color:rgba(0,229,202,.58);border-radius:14px;background:linear-gradient(135deg,#061c17,#020a08);box-shadow:0 24px 70px rgba(0,0,0,.72)}
.modal.shop-about-modal .modal-top{padding:18px 20px 13px;border-bottom:1px solid rgba(0,229,202,.18)}
.modal.shop-about-modal .modal-top b{color:#eafff4;font-family:Oxanium,Arial,sans-serif;font-size:15px;font-weight:900;letter-spacing:.1em}
.modal.shop-about-modal .close{width:38px;height:38px;border:1px solid rgba(0,229,202,.5);border-radius:50%;background:#09231d}.modal.shop-about-modal .close:hover{border-color:#a6ff61;background:#0d2b22}
.modal.shop-about-modal .modal-body{padding:18px 20px 22px;gap:12px;background:radial-gradient(420px 180px at 50% 0,rgba(124,255,46,.07),transparent 70%)}
.modal.shop-about-modal .modal-body>h3{display:flex;flex-direction:column;gap:6px;margin:0;padding:14px 16px;border:1px solid rgba(124,255,46,.38);border-radius:10px;color:#effff6;background:linear-gradient(90deg,rgba(124,255,46,.12),rgba(0,229,202,.05));font-size:18px;font-weight:900}.modal.shop-about-modal .modal-body>h3::before{content:"INFORMAÃ‡Ã•ES DO PRODUTO";color:#a6ff61;font-size:10px;letter-spacing:.12em}
.modal.shop-about-modal .modal-body>p{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin:0;padding:8px 12px;border:1px solid rgba(0,229,202,.28);border-radius:7px;color:#cce5db;background:#061914;font-size:13px}.modal.shop-about-modal .modal-body>p b{color:#a6ff61}
.modal.shop-about-modal .vip-benefits{margin:0;padding:15px 16px;border:1px solid rgba(0,229,202,.22);border-radius:10px;background:linear-gradient(135deg,rgba(8,36,29,.75),rgba(3,15,12,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.modal.shop-about-modal .vip-benefits h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:#a6ff61;font-size:15px;font-weight:900;letter-spacing:0;text-transform:none}.modal.shop-about-modal .vip-benefits h3::before{content:"";width:7px;height:7px;border-radius:50%;background:#a6ff61;box-shadow:0 0 12px rgba(166,255,97,.7)}
.modal.shop-about-modal .vip-benefits ul{display:grid;grid-template-columns:1fr;gap:7px;margin:0;padding:0;list-style:none}.modal.shop-about-modal .vip-benefits li{margin:0;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-left:3px solid rgba(124,255,46,.72);border-radius:7px;color:#dff5eb;background:rgba(1,10,7,.5);font-size:13px;line-height:1.4}.modal.shop-about-modal .vip-benefits li:hover{border-color:rgba(166,255,97,.6);background:rgba(124,255,46,.07)}
.modal.shop-about-modal .modal-bottom{padding:13px 20px 18px;border-top:1px solid rgba(0,229,202,.16)}.modal.shop-about-modal .modal-bottom .btn{border-radius:7px!important}

@media (max-width: 1060px){
  .hero-content{ grid-template-columns: 1fr; padding-top: 88px; }
  .brand{ min-width:auto; }
  .nav-actions{ min-width:auto; }
  .cards{ grid-template-columns: repeat(3, 1fr); }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px){
  .nav-links{ display:none; }
  .hamburger{ display:grid; }
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .team-grid{ grid-template-columns: 1fr; }
  .ip-pill{ display:none; }
  .brand-text span{ display:none; }
  .nav-dropdown{
    width:100%;
  }
  .nav-menu{
    position:static;
    min-width:100%;
    margin-top:8px;
  }
}

@media (max-width: 520px){
  .cards{ grid-template-columns: 1fr; }
  .hero-wrap{ min-height: 560px; }
  .hero-content{ padding: 84px 16px 18px; }
  .btn{ width: 100%; justify-content:center; }
  .item-actions{ flex-direction:row; }
  .item-actions .btn{
    width:auto;
    min-width:0;
    flex:1 1 0;
  }
  .modal{ padding: 10px; }
  .modal-body{ padding: 12px; }
}

.pix-top{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  text-align:center;
  margin: 0 auto 18px;
  padding: 12px 16px;
  width: min(100%, 720px);
  border: 1px solid rgba(0,255,198,.28);
  border-radius: 14px;
  background: linear-gradient(110deg,rgba(0,255,198,.08),rgba(124,255,46,.06),rgba(0,255,198,.04));
  box-shadow: inset 0 1px 0 rgba(234,255,242,.08), 0 10px 28px rgba(0,0,0,.2);
  font-weight: 800;
}
.pix-email-row{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:100%;
}
.pix-top .line{
  color: rgba(234,255,242,.92);
  font-size: 14px;
  line-height: 1.35;
}
.pix-top .line b{ color: var(--neon); }
.pix-email-copy{
  display:inline-grid;
  place-items:center;
  width:31px;
  height:31px;
  flex:0 0 31px;
  padding:0;
  color:#dffff1;
  border:1px solid rgba(0,255,198,.6);
  border-radius:9px;
  background:rgba(0,23,21,.72);
  cursor:pointer;
  transition:.18s ease;
}
.pix-email-copy:hover{
  color:#07140b;
  background:var(--neon);
  border-color:var(--neon);
  box-shadow:0 0 16px rgba(0,255,198,.28);
}
.pix-email-copy svg{width:17px;height:17px;}
.pix-top .terms a{
  color: var(--neon);
  text-decoration: underline;
}

@media (max-width:520px){
  .pix-top{ padding:10px; }
  .pix-email-row{ gap:6px; }
  .pix-top .line{ font-size:12px; }
}

.pix-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.pix-card{
  background: rgba(255,255,255,.05);
  border: 3px solid rgba(124,255,46,.95);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,.65);
  display:flex;
  flex-direction:column;
  align-items:center;
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.pix-title{
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--neon);
  font-size: 26px;
  text-align:center;
  margin: 0 0 10px;
}

.pix-pricebox{
  width: 100%;
  text-align:center;
  background: rgba(0,0,0,.35);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  color: var(--neon);
  font-weight: 1000;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}

.pix-pricebox s{
  color: #ff4040;
  font-weight: 1000;
  margin-right: 8px;
}

.pix-qrbox{
  width: min(220px, 100%);
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow:
    0 0 0 5px rgba(124,255,46,.55),
    0 0 40px rgba(124,255,46,.55);
  margin-bottom: 12px;
}
.pix-qrbox img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

.pix-lines{
  width:100%;
  display:grid;
  gap: 10px;
  margin-top: 6px;
}

.pix-line{
  width:100%;
  text-align:center;
  background: rgba(0,0,0,.28);
  border-radius: 10px;
  padding: 11px 10px;
  font-weight: 900;
  line-height: 1.25;
}

.pix-line.green{ color: var(--neon); }
.pix-line.white{ color: rgba(234,255,242,.92); }

.pix-badge{
  color: #ff3b3b;
  font-weight: 1000;
}

@media (max-width: 980px){
  .pix-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pix-title{ font-size: 24px; }
}

@media (max-width: 620px){
  .pix-grid{ grid-template-columns: 1fr; }
  .pix-title{ font-size: 22px; }
}

.hud-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 20px;
}

.hud-bar-text{
  font-size: 13px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(234,255,242,.95);
  text-align:center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index:2;
}

.live-status{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 13px;
  border-radius: 16px;
  border:1px solid rgba(124,255,46,.28);
  background: rgba(0,0,0,.25);
  box-shadow: 
    0 0 0 3px rgba(124,255,46,.06),
    0 12px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  max-width: 560px;
  position:relative;
  overflow:hidden;
}

.live-status::after{
  content:"";
  position:absolute; inset:-60% -40%;
  background: linear-gradient(120deg, transparent 40%, rgba(124,255,46,.18) 52%, transparent 66%);
  transform: translateX(-30%) rotate(18deg);
  opacity:.25;
  pointer-events:none;
  animation: navglow 3.6s linear infinite;
}

.live-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff3b3b;
  box-shadow: 0 0 18px rgba(255,59,59,.45);
  flex:0 0 auto;
  z-index:2;
}

.live-text{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(234,255,242,.95);
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:2;
}

.live-pill{
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size:11px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(191,232,209,.95);
  white-space:nowrap;
  z-index:2;
}

#ipMidBox{
  display: none !important;
}

#mobileMenu{
  position:absolute;
  left:0; right:0;
  top: var(--navbarH);
  padding: 0 0 14px;
  z-index: 60;
}

@media (max-width: 820px){
  .navbar{ position: sticky; }
  #mobileMenu .panel{
    margin-top: 10px;
  }
  #mobileMenu .panel-pad{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  #mobileMenu .nav-link{
    width:100% !important;
    text-align:center !important;
  }
}

@media (max-width: 820px){
  #page-home .panel-pad[style],
  #page-contato .panel-pad[style]{
    grid-template-columns: 1fr !important;
  }
  .page-head{
    flex-direction: column;
    align-items: flex-start;
  }
  .shop-head{
    padding: 8px 0;
    align-items:center;
    width:100%;
    overflow:hidden;
  }
  .shop-head > div:first-child{
    width:100%;
    min-width:0;
  }
  .shop-head h2{
    max-width:calc(100vw - 28px);
    font-size: 18px;
    line-height:1.18;
    letter-spacing:.035em;
    overflow-wrap:break-word;
    word-break:normal;
  }
  .shop-head p{
    max-width:calc(100vw - 34px);
    font-size:11px;
  }
  .shop-head .shop-actions{
    position:static;
    transform:none;
    justify-content:center;
    margin-top:12px;
  }
}

@media (max-width: 520px){
  .mini-row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .mini-row code{
    max-width: 100%;
    width: 100%;
  }
  .mini-row .btn{
    width: 100%;
  }
  .contact-actions a{
    flex: 1 1 100%;
  }
}

.mc-stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 16px 0 8px;
}

.hero-chicks-shell{
  position:relative;
  height:34px;
  margin: 12px 0 -2px;
}

.hero-chicks-walkway{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:min(640px, 100%);
  height:34px;
  z-index:4;
  overflow:visible;
  pointer-events:none;
}

.hero-chicks-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hero-chick{
  position:absolute;
  width:30px;
  height:30px;
  image-rendering:pixelated;
  display:none;
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  transform-origin:center bottom;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.15));
}

.hero-chick img{
  width:100%;
  height:100%;
  display:block;
  image-rendering:pixelated;
  pointer-events:none;
}

.hero-chick-burst{
  position:fixed;
  width:4px;
  height:4px;
  pointer-events:none;
  z-index:99999;
}

.mc-stat{
  flex: 1 1 180px;
  padding: 14px;
  border-radius: 18px;
  border:1px solid rgba(124,255,46,.22);
  background: rgba(0,0,0,.22);
  box-shadow: 0 0 0 2px rgba(124,255,46,.05);
  text-align:left;
}

.mc-icon{
  font-size: 20px;
  display:block;
  margin-bottom: 4px;
}

.mc-stat b{
  display:block;
  font-size: 14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--neon);
}

.mc-stat span:last-child{
  font-size: 12px;
  color: rgba(191,232,209,.92);
}

.socials{
  display:none;
}

@media (max-width: 520px){
  .live-status{
    flex-wrap: wrap;
    gap: 8px;
  }
  .live-text{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: 12px;
    line-height: 1.4;
  }
  .live-pill{
    margin-left: auto;
  }
}

.pix-card{
  padding: 12px 12px 10px;
  border-radius: 16px;
}

.pix-title{
  font-size: 22px;
  margin: 0 0 8px;
}

.pix-pricebox{
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 14px;
}

.pix-qrbox{
  width: min(165px, 100%);
  padding: 8px;
  margin-bottom: 10px;
}

.pix-lines{
  gap: 8px;
}

.pix-line{
  padding: 8px 8px;
  font-size: 13px;
}

.vote-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}

.vote-btn{
  width:100%;
  text-align:center;
}

@media (max-width: 900px){
  .vote-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px){
  .vote-grid{ grid-template-columns: 1fr; }
}

.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
}

.modal .modal-content{
  width: min(920px, 96vw);
  max-height: min(86vh, 820px);
  overflow: hidden;
  border-radius: 18px;
  background: rgba(10, 24, 18, .92);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  position: relative;
}

.modal .close{
  position: absolute;
  top: 12px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .12s ease, background .12s ease;
}
.modal .close:hover{
  transform: scale(1.06);
  background: rgba(255,255,255,.10);
}

.modal .modal-header{
  padding: 18px 18px 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.modal .modal-header h2{
  margin: 0 0 6px 0;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 14px;
  opacity: .95;
}

.modal .modal-body,
.modal .vip-container{
  padding: 14px 18px 18px 18px;
  overflow: auto;
  max-height: calc(min(86vh, 820px) - 70px);
}

.modal h2{
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.modal h3{
  margin: 14px 0 10px 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  opacity: .95;
}
.modal p{
  margin: 8px 0 12px 0;
  opacity: .92;
  line-height: 1.45;
}

.modal ul{
  margin: 10px 0 14px 0;
  padding-left: 0;
  list-style: none;
}
.modal li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 10px;
  margin: 6px 0;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  line-height: 1.35;
  font-size: 13px;
}
.modal li .icon-check,
.modal li i.icon-check{
  flex: 0 0 auto;
  margin-top: 1px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
}

.modal img,
.modal .modal-image{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.30);
  margin: 10px 0 14px 0;
}

.modal img.modal-image,
.modal .modal-body img{
  max-height: 320px;
  object-fit: contain;
  background: rgba(0,0,0,.22);
}

.modal .modal-body::-webkit-scrollbar,
.modal .vip-container::-webkit-scrollbar{
  width: 10px;
}
.modal .modal-body::-webkit-scrollbar-thumb,
.modal .vip-container::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
}

.modal .btn,
.modal button{
  border-radius: 999px !important;
}

@media (max-width: 520px){
  .modal{ padding: 10px; }
  .modal .modal-content{
    width: 98vw;
    max-height: 90vh;
    border-radius: 16px;
  }
  .modal .modal-header{
    padding: 14px 14px 8px 14px;
  }
  .modal .modal-body,
  .modal .vip-container{
    padding: 12px 14px 14px 14px;
    max-height: calc(90vh - 62px);
  }
  .modal h2{ font-size: 16px; }
  .modal li{ font-size: 12.5px; padding: 7px 9px; }
  .modal img.modal-image,
  .modal .modal-body img{
    max-height: 220px;
  }
}

.logo{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background-image: url("img/b1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 18px rgba(0,255,120,.25),
    0 0 18px rgba(0,255,120,.25);
  flex-shrink: 0;
}

.hytale-cta{
  margin: 18px 0 8px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(124,255,46,.35);
  background: linear-gradient(135deg, rgba(124,255,46,.08), rgba(0,211,255,.06));
  box-shadow:
    0 0 0 3px rgba(124,255,46,.06),
    0 12px 35px rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}

.hytale-cta::after{
  content:"";
  position:absolute; inset:-60% -40%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18) 52%, transparent 66%);
  transform: translateX(-30%) rotate(18deg);
  animation: navglow 3.5s linear infinite;
  opacity:.4;
  pointer-events:none;
}

.hytale-text{
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(234,255,242,.95);
  line-height:1.4;
}

.hytale-text strong{
  display:block;
  font-size:15px;
  letter-spacing:.08em;
  color: var(--neon);
  margin-top:4px;
}

.hytale-btn{
  padding: 12px 18px !important;
  border-radius: 999px !important;
  letter-spacing:.14em;
  text-transform:uppercase;
}

@media (max-width: 520px){
  .hytale-cta{
    flex-direction:column;
    align-items:flex-start;
  }
  .hytale-btn{
    width:100%;
    text-align:center;
  }
}

.hero-actions {
  display: none;
}

footer .foot{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
}

footer .foot > div{
  max-width: 980px;
  margin: 0;
  color: rgba(191,232,209,.86);
  line-height:1.6;
  font-size:13px;
}

.creator-btn{
  margin-left:6px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(124,255,46,.30);
  background:rgba(0,0,0,.25);
  color:var(--neon);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  transition:.2s;
}

.creator-btn:hover{
  background:rgba(124,255,46,.18);
  border-color:rgba(124,255,46,.7);
}

.hero-right .mini-row[style],
.hero-right .terms-actions {
  display: none;
}

.card-home-ip {
  display: none;
}

.pm-slim-wrap{
  display:flex;
  justify-content:center;
  margin: 24px 0 8px;
}

.pm-slim{
  width: min(900px, 95%);
  padding: 16px 24px;
  border-radius: 18px;
  border: 1px solid rgba(124,255,46,.35);
  background:
    radial-gradient(500px 180px at 20% 30%, rgba(124,255,46,.12), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.18));
  box-shadow:
    0 0 0 3px rgba(124,255,46,.06),
    0 14px 40px rgba(0,0,0,.60);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  position:relative;
  overflow:hidden;
}

.pm-slim::after{
  content:"";
  position:absolute;
  inset:-70% -40%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.14) 52%, transparent 66%);
  transform: translateX(-30%) rotate(18deg);
  animation: navglow 3.5s linear infinite;
  opacity:.35;
  pointer-events:none;
}

.pm-slim-left{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.pm-slim-badge{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--neon);
  font-weight: 900;
  text-shadow: 0 0 12px rgba(124,255,46,.35);

  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(124,255,46,.45);
  background: rgba(124,255,46,.08);
}

.pm-slim-text{
  font-size:18px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.pm-slim-text b{
  color: var(--neon);
  font-size:17px;
}

.pm-slim-btn{
  padding: 10px 18px !important;
  border-radius: 999px !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
}

@media (max-width: 600px){
  .pm-slim{
    flex-direction:column;
    align-items:flex-start;
  }
  .pm-slim-btn{
    width:100%;
    text-align:center;
  }
}

.discord-support-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 16px;
  padding: 16px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.15), rgba(88, 101, 242, 0.05));
  border: 1px solid rgba(88, 101, 242, 0.35);
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.08);
  flex-wrap: wrap;
}

.discord-support-text {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: rgba(234, 255, 242, 0.95);
  flex: 1;
  min-width: 240px;
}

.discord-support-text svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 8px rgba(88, 101, 242, 0.6));
}

.discord-support-text strong {
  color: #8b9aff;
  font-weight: 700;
}

.btn-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #5865F2, #4752c4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(88, 101, 242, 0.3);
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.btn-discord:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(88, 101, 242, 0.45);
  background: linear-gradient(135deg, #6370f5, #4f5ad4);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-discord svg {
  width: 18px;
  height: 18px;
  fill: white;
}

@media (max-width: 520px) {
  .discord-support-row {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }
  
  .discord-support-text {
    min-width: 100%;
  }
  
  .btn-discord {
    width: 100%;
  }
}

/* =========================
   CARDS MEGA DESCONTO - OPÃ‡ÃƒO 2 MELHORADA (GRADIENTE + REFLEXOS)
   ========================= */
.pix-card.mega-premium {
  position: relative;
  border: 2px solid transparent !important;
  background: linear-gradient(#1a1a1a, #1a1a1a) padding-box,
              linear-gradient(135deg, #FFD700, #FF6B6B) border-box !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
  animation: borderGlow 3s ease-in-out infinite;
  overflow: hidden;
}

/* REFLEXO PRINCIPAL PASSANDO NA BORDA */
.pix-card.mega-premium::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 18px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 215, 0, 0.8),
    rgba(255, 165, 0, 0.8),
    rgba(255, 215, 0, 0.8),
    transparent
  );
  background-size: 200% 100%;
  animation: shine 3s linear infinite;
  z-index: -1;
}

/* SEGUNDO REFLEXO MAIS SUTIL (DIAGONAL) */
.pix-card.mega-premium::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 18px;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3),
    transparent 70%
  );
  background-size: 200% 200%;
  animation: shine2 4s linear infinite;
  z-index: -1;
  opacity: 0.5;
}

/* TÃ­tulo em dourado */
.pix-card.mega-premium .pix-title {
  color: #FFD700 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* PreÃ§o com destaque e reflexo */
.pix-card.mega-premium .pix-pricebox {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 107, 107, 0.15)) !important;
  border: 1px solid #FFD700 !important;
  color: #FFD700 !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
  position: relative;
  overflow: hidden;
}

/* Reflexo no preÃ§o */
.pix-card.mega-premium .pix-pricebox::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 215, 0, 0.3) 50%,
    rgba(255, 255, 255, 0) 55%
  );
  transform: rotate(45deg);
  animation: priceShine 3s ease-in-out infinite;
}

/* ANIMAÃ‡Ã•ES */
@keyframes shine {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

@keyframes shine2 {
  0% { background-position: -100% -100%; }
  100% { background-position: 200% 200%; }
}

@keyframes borderGlow {
  0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }
  50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.5); }
  100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }
}

@keyframes priceShine {
  0% { transform: rotate(45deg) translateX(-100%); }
  50% { transform: rotate(45deg) translateX(100%); }
  100% { transform: rotate(45deg) translateX(200%); }
}
/* =========================
   TEMA CYBER ARENA
   ========================= */
:root, html.theme-dark{
  --bg0:#03070b;
  --bg1:#07151a;
  --bg2:#0a2522;
  --card:rgba(7,21,26,.92);
  --card2:rgba(4,11,16,.96);
  --text:#eafff5;
  --muted:#a9d6cb;
  --neon:#78ff3f;
  --neon2:#00ffc6;
  --neon3:#35baff;
  --radius:10px;
  --radius2:14px;
  --shadow:0 20px 60px rgba(0,0,0,.6);
  --shadow2:0 14px 38px rgba(0,0,0,.52);
}

body{
  font-family:Oxanium,ui-sans-serif,system-ui,sans-serif;
  background:
    linear-gradient(rgba(120,255,63,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,255,63,.055) 1px, transparent 1px),
    radial-gradient(circle at 80% 0%, rgba(0,255,198,.18), transparent 32%),
    radial-gradient(circle at 10% 70%, rgba(53,186,255,.12), transparent 35%),
    linear-gradient(145deg,var(--bg0),var(--bg1),var(--bg2));
  background-size:32px 32px,32px 32px,auto,auto,auto;
}

h1,h2,.cos-title,.brand-text strong{
  font-family:'Press Start 2P',monospace;
  line-height:1.45;
  text-shadow:0 0 18px rgba(120,255,63,.35);
}

.navbar{
  background:rgba(3,8,12,.9);
  border-bottom:1px solid rgba(0,255,198,.45);
  box-shadow:0 8px 35px rgba(0,0,0,.42);
}

.hero-wrap,.panel,.card,.cos-card,.modalBox,.person{
  border-radius:10px;
  border:1px solid rgba(0,255,198,.28);
  background:
    linear-gradient(135deg,transparent 48%,rgba(120,255,63,.06) 49%,transparent 51%) 0 0/22px 22px,
    linear-gradient(160deg,var(--card),var(--card2));
  box-shadow:0 18px 45px rgba(0,0,0,.48),inset 0 0 22px rgba(0,255,198,.035);
}

.hero-bg{filter:saturate(.7) contrast(1.1) brightness(.62);}
.hud-lines{opacity:.52;}
.hud-bar{border-color:rgba(0,255,198,.45);box-shadow:0 0 22px rgba(0,255,198,.14);}

.cos-card{
  border:2px solid rgba(120,255,63,.42);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.cos-card:hover{
  transform:translateY(-7px);
  border-color:var(--neon2);
  box-shadow:0 20px 45px rgba(0,0,0,.55),0 0 28px rgba(0,255,198,.24);
}
.cos-card.lux{
  border-color:var(--neon);
  box-shadow:0 0 0 1px rgba(120,255,63,.28),0 0 34px rgba(120,255,63,.22);
}
.cos-img{
  border-radius:8px;
  border-color:var(--neon2);
  image-rendering:pixelated;
  box-shadow:0 0 0 5px rgba(0,255,198,.08),0 0 25px rgba(0,255,198,.3);
}

.btn,.nav-link,.ip-pill,.tag,.badge,.icon-btn,.hamburger,.soc,.mini,.mini-row{
  border-radius:5px;
  border-color:rgba(0,255,198,.4);
  background:linear-gradient(135deg,rgba(0,255,198,.12),rgba(8,20,27,.92));
  font-weight:800;
  letter-spacing:.08em;
}
.btn:hover,.nav-link:hover,.icon-btn:hover,.soc:hover{
  border-color:var(--neon2);
  box-shadow:0 0 18px rgba(0,255,198,.16);
}
.btn.primary{
  color:#06120b;
  border-color:#b4ff84;
  background:linear-gradient(135deg,#b4ff84,#52dc2b);
  box-shadow:0 0 20px rgba(120,255,63,.22);
}
.nav-link.active{border-color:var(--neon);box-shadow:0 0 16px rgba(120,255,63,.2);}
.badge,.tag{color:#eafff5;background:rgba(0,255,198,.1);}

.rankTable{border-color:rgba(0,255,198,.32);}
.rankTable th{background:rgba(0,119,101,.5);color:#bdff9c;border-color:rgba(0,255,198,.3);}
.rankTable td{border-color:rgba(0,255,198,.12);}
.modalOverlay{background:rgba(1,5,9,.8);}
.footer{border-top-color:rgba(0,255,198,.28);}

.anniversary{
  display:inline-block;
  margin-inline:3px;
  padding:3px 6px;
  color:#071304;
  background:linear-gradient(135deg,#d6ff82,#62df2d);
  border:1px solid #ebffbb;
  border-radius:3px;
  font-family:'Press Start 2P',monospace;
  font-size:.62em;
  line-height:1.2;
  text-shadow:none;
  box-shadow:0 0 12px rgba(120,255,63,.38);
  vertical-align:middle;
}
.contact-actions{gap:8px;}
.contact-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 10px;
  font-size:12px;
  letter-spacing:.04em;
}
.contact-actions .social-logo{
  width:17px;
  height:17px;
  flex:0 0 17px;
  object-fit:contain;
  border-radius:4px;
}

