/* Front de campanha: estrutura mobile-first inspirada nas telas fornecidas. */
body:has(.reference-page) {
  background: #0c0b08;
  color: #fff;
}

body:has(.reference-page) .public-nav,
body:has(.reference-page) > footer {
  display: none;
}

.reference-page {
  min-height: 100vh;
  overflow: clip;
  background: #0c0b08;
  color: #fff;
  font-family: "Arial", sans-serif;
}

.reference-hero {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 4.5rem;
  text-align: center;
  background: radial-gradient(circle at 85% 14%, rgba(197, 145, 35, .18), transparent 20%), radial-gradient(circle at 18% 80%, rgba(197, 145, 35, .1), transparent 24%), #0c0b08;
}

.reference-hero::before,
.reference-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(211, 162, 45, .18);
  filter: blur(2px);
  pointer-events: none;
}

.reference-hero::before { width: 155px; height: 155px; top: -95px; right: -70px; }
.reference-hero::after { width: 100px; height: 100px; bottom: -55px; left: 19%; }

.reference-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 34px;
  color: #f9f9f5;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.04em;
}

.reference-brand img { width: auto; max-width: 180px; max-height: 48px; object-fit: contain; }
.reference-brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 2px solid #f3c51d; border-radius: 50%; color: #f3c51d; font-size: .65rem; font-weight: 900; letter-spacing: -.08em; }
.reference-divider { display: flex; align-items: center; gap: 1rem; max-width: 480px; margin: 1.3rem auto 1.5rem; color: #f7c51c; }
.reference-divider::before,.reference-divider::after { content: ""; flex: 1; height: 1px; background: rgba(243, 197, 29, .18); }
.reference-divider span { font-size: .8rem; }
.reference-kicker { position: relative; z-index: 1; margin: 0 auto .8rem; color: #d4b33b; font-size: .62rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.reference-event { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.7rem; padding: .65rem 1.2rem; border: 1px solid #bf9209; border-radius: 99px; color: #f4c51b; font-size: .68rem; font-weight: 850; letter-spacing: .16em; }
.reference-event span { font-size: .9rem; }
.reference-image-wrap,.reference-image-placeholder { position: relative; z-index: 1; width: min(100%, 480px); min-height: 220px; margin: 0 auto 2rem; overflow: hidden; border: 1px solid rgba(244, 197, 29, .5); border-radius: 14px; background: linear-gradient(145deg, #21323a, #11120f 65%); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.reference-image-wrap img { display: block; width: 100%; max-height: 370px; object-fit: cover; }
.reference-image-placeholder { display: grid; place-items: center; align-content: center; gap: .7rem; color: #f6c51c; }
.reference-placeholder-logo { display: block; width: min(72%, 250px); max-height: 110px; object-fit: contain; }
.reference-image-placeholder .reference-brand-mark { width: 64px; height: 64px; font-size: .95rem; }
.reference-image-placeholder strong { color: #fff; font-size: 1.2rem; letter-spacing: .05em; text-transform: uppercase; }
.reference-hero h1 { position: relative; z-index: 1; max-width: 650px; margin: 0 auto 1.25rem; color: #fff; font-size: clamp(2.2rem, 7vw, 4.6rem); font-weight: 950; line-height: .98; letter-spacing: -.06em; text-transform: uppercase; }
.reference-hero h1::first-line { color: #fff; }
.reference-hero-description { position: relative; z-index: 1; max-width: 570px; margin: 0 auto 1.7rem; color: #d7d4ca; font-size: .96rem; line-height: 1.65; }
.reference-hero-description strong { color: #f4c51b; }
.reference-highlight { position: relative; z-index: 1; max-width: 500px; margin: 1.6rem auto 1.7rem; padding: 1.5rem 1.4rem; border: 1px solid rgba(180, 105, 22, .75); border-radius: 17px; background: linear-gradient(145deg, rgba(64, 32, 11, .74), rgba(21, 15, 8, .74)); }
.reference-highlight > span,.reference-section-heading > span,.reference-how > span { color: #efa337; font-size: .65rem; font-weight: 900; letter-spacing: .2em; }
.reference-highlight h2 { margin: .5rem 0 .55rem; color: #f4c51b; font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 950; line-height: .98; text-transform: uppercase; }
.reference-highlight p { margin: 0; color: #d6d0c3; font-size: .86rem; line-height: 1.55; }
.reference-main-button,.reference-submit { display: flex; align-items: center; justify-content: center; gap: .7rem; width: min(100%, 480px); min-height: 58px; margin: 1.6rem auto 0; border: 0; border-radius: 10px; background: linear-gradient(135deg, #ffdb1b, #f4a91e); box-shadow: 0 13px 27px rgba(240, 173, 22, .25); color: #1b1508; font-size: .82rem; font-weight: 950; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.reference-main-button:hover,.reference-submit:hover { background: linear-gradient(135deg, #ffe45a, #ffc14b); color: #1b1508; }
.reference-sticky-cta { position: -webkit-sticky; position: sticky; top: 0; z-index: 20; padding: .8rem 1rem; background: linear-gradient(100deg, #ffda18, #f3ab18); box-shadow: 0 5px 20px rgba(0,0,0,.28); text-align: center; }
.reference-sticky-cta a { color: #181207; font-size: .72rem; font-weight: 950; letter-spacing: .18em; text-decoration: none; text-transform: uppercase; }
.reference-rules { padding: 3.3rem 1rem; background: #0c0b08; }
.reference-rules-inner { max-width: 650px; margin: 0 auto; padding: 2.4rem 1.5rem; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-image: repeating-linear-gradient(135deg, #f4c51b 0 10px, #17140c 10px 20px) 15; background: linear-gradient(145deg, #073137, #03191c); }
.reference-section-heading { max-width: 560px; margin: 0 auto 2.3rem; text-align: center; }
.reference-section-heading h2 { margin: .55rem 0 .6rem; color: #fff; font-size: clamp(1.9rem, 5vw, 2.7rem); font-weight: 950; line-height: .98; letter-spacing: -.05em; text-transform: uppercase; }
.reference-section-heading h2::first-line { color: #f4c51b; }
.reference-section-heading p { margin: 0; color: #b9ccca; font-size: .86rem; line-height: 1.55; }
.reference-rule { display: flex; gap: 1.3rem; max-width: 500px; margin: 0 auto; padding: 1.35rem 0; border-top: 1px solid rgba(172, 206, 204, .18); }
.reference-rule > strong { flex: none; color: #f4c51b; font-size: 2rem; line-height: 1; }
.reference-rule h3 { margin: 0 0 .45rem; color: #fff; font-size: 1rem; font-weight: 900; line-height: 1.15; text-transform: uppercase; }
.reference-rule p { margin: 0; color: #b8c8c4; font-size: .82rem; line-height: 1.6; }
.reference-warning { display: flex; gap: .75rem; max-width: 500px; margin: 1.5rem auto 0; padding: 1rem; border-left: 3px solid #ff5447; border-radius: 0 9px 9px 0; background: rgba(71, 32, 28, .48); }
.reference-warning > span { color: #ff7268; font-size: 1.3rem; }
.reference-warning strong { color: #ff837a; font-size: .82rem; }
.reference-warning p { margin: .3rem 0 0; color: #d5c7c4; font-size: .75rem; line-height: 1.45; }
.reference-register { padding: 4rem 1rem 4.5rem; background: #0c0b08; }
.register-heading { margin-bottom: 1.7rem; }
.reference-form-card { max-width: 520px; margin: 0 auto; padding: 1.4rem; border: 1px solid rgba(198, 151, 34, .28); border-radius: 18px; background: linear-gradient(145deg, rgba(58, 47, 13, .64), rgba(25, 19, 8, .78)); box-shadow: 0 19px 45px rgba(0,0,0,.35); }
.reference-form-card form { display: grid; gap: .45rem; }
.reference-form-card label { margin-top: .55rem; color: #f0eade; font-size: .66rem; font-weight: 900; letter-spacing: .14em; }
.reference-form-card input:not([type="checkbox"]) { width: 100%; min-height: 52px; padding: .8rem .95rem; border: 1px solid #3d3a2c; border-radius: 10px; outline: none; background: rgba(7, 8, 6, .75); color: #fff; font-size: .88rem; }
.reference-form-card input::placeholder { color: #89867a; }
.reference-form-card input:focus { border-color: #eac31f; box-shadow: 0 0 0 3px rgba(234, 195, 31, .12); }
.reference-consent { display: flex; align-items: flex-start; gap: .7rem; margin-top: .9rem; }
.reference-consent input { flex: none; width: 19px; height: 19px; margin-top: .1rem; accent-color: #f4c51b; }
.reference-consent label { margin: 0; color: #d3d0c6; font-size: .73rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; text-transform: none; }
.reference-consent a { color: #f4c51b; font-weight: 700; }
.reference-submit { width: 100%; margin-top: 1.1rem; cursor: pointer; }
.reference-form-note { margin: 1rem 0 .2rem; color: #a8a398; font-size: .72rem; line-height: 1.5; text-align: center; }
.reference-how { max-width: 650px; margin: 0 auto; padding: 0 1.5rem 4rem; background: #0c0b08; }
.reference-how h2 { margin: 0 0 1.1rem; color: #d9d5ca; font-size: .78rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.reference-how-copy { padding-left: 1.2rem; border-left: 2px solid #e6bd1a; color: #c6c1b4; font-size: .85rem; line-height: 1.75; }
.reference-footer { max-width: 650px; margin: 0 auto; padding: 2.3rem 1.5rem 4rem; border-top: 1px solid rgba(255,255,255,.12); background: #0c0b08; text-align: center; }
.reference-footer strong { color: #f4c51b; font-size: .95rem; }
.reference-footer p { margin: .65rem 0; color: #9f9a8d; font-size: .75rem; }
.reference-footer small { color: #6f6b62; font-size: .68rem; }
body:has(.reference-page) .alert-danger { max-width: 520px; margin: 0 auto 1rem; border-radius: 8px; font-size: .8rem; }
@media (min-width: 768px) { .reference-page { max-width: 100%; } .reference-hero { max-width: 920px; padding-top: 4rem; } .reference-rules-inner { padding-left: 4rem; padding-right: 4rem; } .reference-form-card { padding: 2rem; } }