:root {
    --lime: #d8ff1a;
    --lime-2: #c4f400;
    --black: #070707;
    --ink: #111214;
    --panel: #141414;
    --paper: #f6f6f2;
    --gold: #e7c45a;
    --pink: #e11d48;
    --pink-2: #be123c;
    --muted: #b9b9b4;
    --radius: 22px;
    --shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Outfit, system-ui, sans-serif;
    background:
        radial-gradient(circle at 90% 8%, rgba(216, 255, 26, .18), transparent 32%),
        radial-gradient(circle at 10% 40%, rgba(225, 29, 72, .12), transparent 28%),
        var(--black);
    color: var(--paper);
    line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: var(--lime); text-decoration: none; }
.skip {
    position: absolute;
    left: -999px;
}
.skip:focus { left: 12px; top: 12px; background: #fff; color: #000; padding: 8px; }

.topo {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(7, 7, 7, .88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(216, 255, 26, .18);
}
.topo-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 22px;
}
.marca img { height: 42px; width: auto; }
.menu { display: flex; gap: 18px; margin-left: auto; font-weight: 600; }
.menu a { color: #fff; }
.menu a:hover { color: var(--lime); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: .02em;
    border-radius: 999px;
    padding: 13px 22px;
    font-family: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lime { background: var(--lime); color: #111; box-shadow: 0 0 0 0 var(--lime); }
.btn-lime:hover { box-shadow: 0 0 24px rgba(216, 255, 26, .45); }
.btn-dark { background: #0a0a0a; color: var(--lime); border: 1px solid var(--lime); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn-pequeno { padding: 9px 16px; font-size: 14px; }
.btn-bloco { width: 100%; margin-top: 10px; }

.hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 20px 10px;
    display: grid;
    gap: 22px;
}
.hero-copy { max-width: 820px; }
.hero-visual {
    overflow: hidden;
    border-radius: 28px;
    aspect-ratio: 16 / 7;
    box-shadow: var(--shadow);
    border: 2px solid rgba(216, 255, 26, .35);
    background: #000;
}
.hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}
.hero-logos { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.brasao { width: 92px; height: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.4)); }
.logo-dnj { height: 86px; width: auto; }
.kicker {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 12px;
    color: var(--gold);
    margin: 8px 0;
}
.hero h1, .secao h2, .obrigado h1, .convite h2 {
    font-family: Anton, Impact, sans-serif;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: .95;
    margin: 0 0 12px;
    text-transform: uppercase;
}
.hero h1 { font-size: clamp(42px, 6vw, 76px); max-width: 12ch; }
.hero h1 span { color: var(--lime); }
.versiculo { color: var(--muted); font-style: italic; }
.lead { font-size: 18px; max-width: 48ch; }
.hero-acoes { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; }
.garanta {
    font-family: "Permanent Marker", cursive;
    color: var(--lime);
    font-size: 28px;
    transform: rotate(-4deg);
    margin: 8px 0 0;
}

.faixa-precos {
    max-width: 1180px;
    margin: 18px auto 0;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr;
    gap: 12px;
}
.faixa-precos > div {
    background: #000;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 16px 18px;
    font-family: Anton, sans-serif;
    letter-spacing: .04em;
    font-size: 22px;
}
.faixa-combo {
    background: linear-gradient(90deg, var(--lime), #f4ff8a) !important;
    color: #111;
}

.secao { max-width: 1180px; margin: 0 auto; padding: 64px 20px; }
.secao-escura {
    max-width: none;
    background: linear-gradient(180deg, #0c0c0c, #151515);
    padding-left: max(20px, calc((100% - 1180px) / 2 + 20px));
    padding-right: max(20px, calc((100% - 1180px) / 2 + 20px));
}
.secao-topo { max-width: 720px; margin-bottom: 28px; }
.olho {
    color: var(--lime);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 12px;
    margin-bottom: 8px;
}
.secao h2 { font-size: clamp(32px, 5vw, 54px); }

.grade-produtos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.card-produto {
    background: var(--panel);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    position: relative;
}
.card-destaque { border-color: var(--lime); box-shadow: 0 0 40px rgba(216,255,26,.12); }
.selo {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    background: var(--lime);
    color: #111;
    font-weight: 800;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
}
.card-foto { height: 230px; overflow: hidden; background: #000; }
.card-foto img {
    width: 140%;
    height: 180%;
    object-fit: cover;
}
.card-foto-camisa img { object-position: 22% 40%; }
.card-foto-caneca img { object-position: 86% 44%; }
.card-foto-combo img { object-position: 50% 82%; }
.card-corpo { padding: 18px; display: grid; gap: 10px; }
.card-corpo h3 { margin: 0; font-size: 22px; }
.preco {
    font-family: Anton, sans-serif;
    font-size: 36px;
    color: var(--lime);
    margin: 0;
}
.dica { color: var(--muted); font-size: 13px; margin: 0; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
input, select, textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,.14);
    background: #0b0b0b;
    color: #fff;
    border-radius: 12px;
    padding: 11px 12px;
    font: inherit;
}
textarea { resize: vertical; }

.tamanhos-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 22px;
    align-items: start;
}
.tamanhos-grid figure {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
}
.tabelas { display: grid; gap: 18px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
th { color: var(--lime); }

.checkout {
    background: #101010;
    border-radius: 28px;
    padding: 22px;
    border: 1px solid rgba(216,255,26,.15);
}
.checkout-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 22px; }
.lista-carrinho { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-carrinho li {
    background: #0b0b0b;
    border-radius: 14px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.lista-carrinho .vazio { color: var(--muted); }
.remover {
    background: transparent;
    color: #ff8a8a;
    border: 0;
    cursor: pointer;
    font: inherit;
}
.total {
    font-size: 22px;
    display: flex;
    justify-content: space-between;
    font-family: Anton, sans-serif;
}
.alerta {
    background: #3b0d0d;
    color: #ffd7d7;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 14px;
}
.dados { display: grid; gap: 12px; }
.hp { position: absolute; left: -9999px; }

.encontro, .convite {
    background: linear-gradient(160deg, var(--pink) 0%, #9f1239 55%, #111 100%);
    max-width: none;
    padding-left: max(20px, calc((100% - 1180px) / 2 + 20px));
    padding-right: max(20px, calc((100% - 1180px) / 2 + 20px));
}
.encontro-grid, .convite-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 28px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}
.encontro figure, .convite figure {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.encontro img, .convite img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
}
.info-evento { padding-left: 18px; }
.info-evento li { margin: 8px 0; }

.rodape {
    padding: 40px 20px 90px;
    background: #000;
    border-top: 1px solid rgba(216,255,26,.15);
}
.rodape-grid {
    max-width: 1180px;
    margin: 0 auto 20px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 24px;
}
.realizacao img { width: 120px; margin: 8px 0; }
.copy { max-width: 1180px; margin: 0 auto; color: var(--muted); font-size: 13px; }
.whats-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: #25d366;
    color: #083b16;
    font-weight: 800;
    padding: 12px 16px;
    border-radius: 999px;
    z-index: 30;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.pagina-pedido { max-width: 1180px; margin: 0 auto; padding: 30px 20px 10px; }
.obrigado h1 { font-size: clamp(36px, 6vw, 64px); max-width: 16ch; }
.lead-obrigado { font-size: 18px; max-width: 70ch; }
.pagamento {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 20px;
    margin: 24px 0 40px;
}
.qr-card, .resumo-card {
    background: #fff;
    color: #111;
    border-radius: 24px;
    padding: 22px;
}
.qr-card h2, .resumo-card h2 { color: #111; }
.qr-box {
    background: #fff;
    display: grid;
    place-items: center;
    padding: 10px;
    border: 8px solid var(--lime);
    border-radius: 18px;
    margin: 12px 0;
}
.qr-box svg { width: min(280px, 100%); height: auto; }
.qr-card textarea {
    background: #111;
    color: var(--lime);
    font-size: 12px;
    letter-spacing: .02em;
    word-break: break-all;
}
.resumo-card ul { list-style: none; padding: 0; }
.resumo-card li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eee; }
.pagina-pedido .convite { border-radius: 28px; padding: 28px; margin-bottom: 40px; }

@media (max-width: 1024px) {
    .menu { display: none; }
    .hero, .grade-produtos, .tamanhos-grid, .checkout-grid, .encontro-grid, .convite-grid, .pagamento, .faixa-precos, .rodape-grid {
        grid-template-columns: 1fr;
    }
    .hero-visual { aspect-ratio: 16 / 8; }
    .marca { margin-right: auto; }
}