:root {
    color-scheme: dark;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    --bg: #0b0b0c;
    --bg2: #161617;
    --tx: #f2efe8;
    --mut: #b9b5ab;
    --red: #ff3b3b;
    --aba: #d8d8d4;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --t: "Bowlby One SC", sans-serif;
    --i: "Special Elite", "Courier New", monospace;
    --m: "Permanent Marker", "Comic Sans MS", cursive;
    --b: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: env(safe-area-inset-top, 0px);
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--tx);
    font: 17px/1.55 var(--b);
    padding-bottom: 64px;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid #ffd23f;
    outline-offset: 3px;
}

.xad {
    background: conic-gradient(#fff 25%, #000 0 50%, #fff 0 75%, #000 0) 0 0/28px 28px;
}

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 18px;
}

h1,
h2,
h3 {
    font-family: var(--t);
    font-weight: 701;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

h2 {
    font-size: clamp(34px, 8vw, 56px);
    margin-bottom: 8px;
}

section {
    padding: 56px 0;
}

.div {
    height: 28px;
    background: conic-gradient(#fff 25%, #000 0 50%, #fff 0 75%, #000 0) 0 0/28px 28px;
    opacity: 0.9;
}

.aba {
    display: inline-block;
    background: var(--aba);
    color: #111;
    font-family: var(--t);
    letter-spacing: 0.06em;
    padding: 4px 26px 4px 12px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    font-size: 15px;
    text-transform: uppercase;
}

.lead {
    color: var(--mut);
    max-width: 60ch;
    margin: 0 0 22px;
}

.info {
    font-family: var(--i);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 2px solid var(--tx);
    background: transparent;
    color: var(--tx);
    font: 400 18px var(--t);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}

.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--red);
}

.btn.p {
    background: var(--red);
    border-color: var(--red);
    color: #120000;
}

.rasgo {
    display: inline-block;
    background: #efe9d8;
    color: #111;
    font-family: var(--i);
    font-size: 15px;
    padding: 3px 12px;
    clip-path: polygon(0 12%, 6% 0, 14% 10%, 24% 0, 36% 8%, 50% 0, 63% 10%, 78% 0, 90% 9%, 100% 0, 100% 90%, 92% 100%, 80% 88%, 66% 100%, 50% 90%, 36% 100%, 20% 88%, 8% 100%, 0 90%);
    margin: 0 4px 4px 0;
}

.hero {
    position: relative;
    padding: 72px 0 48px;
    background: radial-gradient(ellipse at 50% 0, #3a0707 0, transparent 65%), var(--bg);
    overflow: hidden;
}

.hero .wrap {
    display: grid;
    gap: 32px;
}

.neon {
    font-family: var(--t);
    font-size: clamp(72px, 24vw, 190px);
    line-height: 0.9;
    color: #ffffff;
    text-shadow: 0 0 6px #000000, 0 0 22px #000000, 0 0 54px #ffffff;
    margin: 0;
}

.man {
    font: 400 clamp(20px, 4.5vw, 28px)/1.3 var(--m);
    color: var(--tx);
    margin: 12px 0 22px;
}

.cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.prox {
    max-width: 320px;
    justify-self: start;
}

.prox small {
    display: block;
    font-family: var(--m);
    color: var(--red);
    font-size: 20px;
    margin-bottom: 6px;
}

.cartaz {
    --ac: #ff3b3b;
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    padding: 0;
    background: #111;
    color: var(--tx);
    cursor: pointer;
    box-shadow: 0 10px 24px #000a;
    transition: transform 0.3s var(--ease);
}

.cartaz:hover {
    transform: rotate(-1deg) translateY(-4px);
}

.arte {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    border: 3px solid var(--ac);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 55%, #000), #050505 75%);
}

.arte:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(#0006 1.2px, transparent 1.5px) 0 0/6px 6px;
    mix-blend-mode: multiply;
}

.arte img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.arte .ph {
    position: absolute;
    top: 10px;
    left: 10px;
    font: 12px var(--i);
    background: #000b;
    padding: 2px 8px;
}

.arte h3 {
    position: relative;
    font-size: clamp(30px, 9vw, 44px);
    text-shadow: 3px 3px 0 #000;
}

.arte .bd {
    position: relative;
    font-family: var(--i);
    font-size: 14px;
    margin-top: 6px;
    text-shadow: 1px 1px 0 #000;
}

.cartaz .base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: var(--aba);
    color: #111;
    padding: 6px 10px;
    font-family: var(--i);
    font-size: 14px;
}

.cartaz .base b {
    font-family: var(--t);
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0.05em;
}

.cola {
    animation: cola 0.9s var(--ease) both;
}

.cola:nth-child(2) {
    animation-delay: 0.12s;
}

.cola:nth-child(3) {
    animation-delay: 0.24s;
}

@keyframes cola {
    from {
        opacity: 0;
        transform: translateY(-26px) rotate(-5deg) scale(1.06);
    }

    to {
        opacity: 1;
        transform: rotate(var(--r, 0deg));
    }
}

.filt {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
}

.filt button {
    min-height: 44px;
    padding: 0 16px;
    background: var(--bg2);
    color: var(--tx);
    border: 1px solid #444;
    font: 15px var(--i);
    cursor: pointer;
}

.filt button[aria-pressed="true"] {
    background: var(--tx);
    color: #111;
}

.grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 26px;
    align-items: start;
    padding: 0;
    margin: 0;
}

.grade li {
    list-style: none;
}

.arq {
    margin-top: 48px;
    border-top: 1px dashed #555;
    padding-top: 18px;
}

.arq h3 {
    font-size: 28px;
}

dialog {
    width: min(94vw, 860px);
    max-height: 92vh;
    border: 3px solid var(--ac, #ff3b3b);
    background: #121212;
    color: var(--tx);
    padding: 0;
    overflow: auto;
}

dialog::backdrop {
    background: #000c;
}

.mod {
    display: grid;
    gap: 0;
}

@media (min-width: 720px) {
    .mod {
        grid-template-columns: 1fr 1fr;
    }
}

.mod .arte {
    aspect-ratio: 4/5;
    border: 0;
}

.mod .tx {
    padding: 22px;
}

.mod ul {
    padding-left: 18px;
    font-family: var(--i);
}

.x {
    position: sticky;
    top: 0;
    float: right;
    z-index: 2;
    min-width: 48px;
    min-height: 48px;
    background: var(--tx);
    color: #111;
    border: 0;
    font: 24px var(--t);
    cursor: pointer;
}

.casa {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.casa li {
    background: var(--bg2);
    border-left: 6px solid var(--red);
    padding: 16px;
}

.casa h3 {
    font-size: 26px;
    margin-bottom: 6px;
}

.casa p {
    margin: 0;
    color: var(--mut);
    font-size: 15px;
}

.tbd {
    font-family: var(--i);
    font-size: 13px;
    color: #ffd23f;
}

.setlist {
    font-family: var(--i);
    background: #efe9d8;
    color: #151515;
    padding: 22px;
    max-width: 520px;
    transform: rotate(-0.6deg);
}

.setlist p {
    margin: 0 0 4px;
}

.cat {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

form {
    display: grid;
    gap: 12px;
    max-width: 520px;
}

label {
    font-family: var(--i);
    font-size: 15px;
    display: grid;
    gap: 4px;
}

input,
select {
    min-height: 48px;
    background: #0e0e0e;
    color: var(--tx);
    border: 2px solid #555;
    padding: 0 12px;
    font: 17px var(--b);
}

.lgpd {
    font-size: 13px;
    color: var(--mut);
}

.onde {
    display: grid;
    gap: 22px;
}

@media (min-width: 760px) {
    .onde {
        grid-template-columns: 1fr 1fr;
    }

    .hero .wrap {
        grid-template-columns: 1.3fr 1fr;
        align-items: center;
    }

    .prox {
        justify-self: end;
    }
}

.mapa {
    min-height: 260px;
    display: flex;
    align-items: flex-end;
    padding: 16px;
    border: 3px solid var(--tx);
    position: relative;
}

.mapa span {
    background: #000;
    padding: 6px 10px;
    font-family: var(--i);
    position: relative;
}

footer {
    padding: 36px 0 24px;
    background: #000;
    font-size: 14px;
    color: var(--mut);
}

.bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    background: #000;
    border-top: 2px solid var(--red);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bar a {
    flex: 1;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 18px var(--t);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}

.bar a+a {
    border-left: 1px solid #333;
}

.bar .wa {
    background: #25d366;
    color: #04200e;
}

@media (min-width: 900px) {
    .bar {
        position: sticky;
        top: 0;
        bottom: auto;
        border-top: 0;
        border-bottom: 2px solid var(--red);
        order: -1;
        justify-content: center;
    }

    body {
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
    }

    .bar a {
        flex: 0 0 auto;
        padding: 0 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .cartaz:hover,
    .casa li,
    h2 {
        transform: none !important;
    }
}

.logo {
    display: block;
    width: 132px;
    height: auto;
    margin: 0 0 14px;
    mix-blend-mode: lighten;
}

.logo.sm {
    width: 72px;
    margin: 0 0 10px;
}

body {
    background-image: radial-gradient(#ffffff0f 1px, transparent 1.3px);
    background-size: 7px 7px;
}

h2 {
    display: inline-block;
    color: var(--red);
    -webkit-text-stroke: 2px #efe9d8;
    paint-order: stroke fill;
    text-shadow: 4px 4px 0 #000;
    transform: skew(-5deg);
    margin: 10px 0 14px;
}

.lead {
    display: block;
}

.hero {
    background: radial-gradient(ellipse at 15% 0, #4a0a0a, transparent 60%), radial-gradient(#ffffff14 1.2px, transparent 1.5px) 0 0/6px 6px, var(--bg);
}

.prox {
    max-width: 460px;
    width: 100%;
}

.cartaz:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 70px;
    height: 22px;
    margin-left: -35px;
    background: #e9dfa8d0;
    transform: rotate(-3deg);
    z-index: 2;
    box-shadow: 0 1px 3px #0006;
}

.arte.im {
    aspect-ratio: auto;
    padding: 0;
    display: block;
    border: 0;
    background: none;
}

.arte.im:before {
    display: none;
}

.arte.im img {
    position: static;
    display: block;
    height: auto;
}

.cola {
    animation-delay: var(--d, 0s) !important;
}

.parede {
    display: flex;
    align-items: flex-start;
    padding-top: 12px;
}

.parede .cartaz {
    width: 44%;
    flex: none;
    margin-left: -14%;
}

.parede .cartaz:first-child {
    margin-left: 0;
}

.parede .cartaz:nth-child(2) {
    margin-top: 30px;
}

.parede .base {
    display: none;
}

#arq .cartaz img {
    filter: grayscale(1) contrast(1.1);
    transition: filter 0.3s;
}

#arq .cartaz:hover img {
    filter: none;
}

#casa {
    background: #f2d21b radial-gradient(#0003 1.2px, transparent 1.5px) 0 0/6px 6px;
    color: #111;
}

#casa h2 {
    -webkit-text-stroke: 2px #111;
    text-shadow: 4px 4px 0 #fff;
}

#casa .lead {
    color: #222;
}

.casa li {
    background: #111;
    color: var(--tx);
    box-shadow: 5px 5px 0 #0008;
}

.casa li:nth-child(odd) {
    transform: rotate(-0.7deg);
}

.casa li:nth-child(even) {
    transform: rotate(0.6deg);
}

.casa p {
    color: #d6d2c8;
}

.parc {
    background: #000;
    padding: 26px 0;
    border-top: 3px solid var(--red);
}

.parc .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.parc img {
    width: min(100%, 420px);
    height: auto;
}