/* ── BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --black: #000000;
  --dark:  #0d0d0d;
  --red:   #cc1e2e;
  --gold:  #f0b429;
  --white: #ffffff;
  --gray:  rgba(255,255,255,0.65);
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #ffffff; color: var(--white); overflow-x: hidden; }
img  { display: block; max-width: 100%; }
a    { text-decoration: none; }

/* -- FOOTER ----------------------------------------- */
footer { background: #f6f6f6; padding: 36px 6% 22px; border-top: 1px solid rgba(255,255,255,.05); }
.footer-top { max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 3.5rem; margin-bottom: 2rem; }
.footer-brand img { height: 52px; object-fit: contain; margin-bottom: .7rem; margin-left: 15px; border-radius: 10px; }
.footer-brand p { color: var(--dark); font-size: .78rem; line-height: 1.7; max-width: 280px; margin-left: 15px; }
footer h4 { font-family: 'Bebas Neue', sans-serif; font-size: .9rem; letter-spacing: 3px; color: var(--red); margin-bottom: .8rem; }
footer ul { display: flex; flex-direction: column; gap: .45rem; }
.footer-top > .join-block { padding-left: 15px; }
footer ul a, footer ul li { color: var(--dark); font-size: .78rem; }
footer ul a:hover { color: var(--white); }
.footer-bottom { max-width: 1100px; margin: 0 auto; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.06); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; }
.footer-bottom p { color: rgba(25, 25, 25, 0.8); font-size: .74rem; }

.join-block h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 3px; color: var(--dark); margin-bottom: .25rem; }
.join-block h2 em { color: var(--red); font-style: normal; }
.join-tagline { color: var(--dark); font-size: .74rem; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 1.2rem; }
.contact-list { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.2rem; }
.contact-list li { display: flex; align-items: center; gap: .6rem; font-size: .76rem; color: var(--red); }
.contact-list li .ci { font-size: .85rem; flex-shrink: 0; }
.contact-list li a { color: var(--dark); transition: color .2s; }
.contact-list li a:hover { color: var(--white); }
.join-bottom { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.btn-register { background: var(--red); color: var(--white); padding: 10px 22px; border-radius: 15px; font-size: .75rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; display: inline-block; transition: all .2s; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
.btn-register:hover { background: var(--red); color: var(--white); }
.qr-block .qr-label { font-size: .58rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.4); text-align: center; }
.qr-placeholder { width: 108px; height: 108px; background: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 4px; box-sizing: border-box; }
.qr-placeholder canvas, .qr-placeholder img { width: 100px !important; height: 100px !important; display: block; }
.spaces-limited { font-size: .62rem; font-weight: 800; letter-spacing: 2px; border-radius: 15px; text-transform: uppercase; color: var(--red); border: 1px solid var(--red); padding: 3px 8px; animation: blink 2s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.social-links { display: flex; gap: 1rem; margin-top: .5rem; }
.social-links a { display: inline-flex; align-items: center; gap: .35rem; font-size: 1.5rem; font-weight: 600; color: #1f0f6c; text-decoration: none; transition: color .2s; }
.social-links a:hover { color: var(--red); }
.social-links .fa-facebook { color: #0b366e; }
.social-links .fa-instagram { color: #2a127e; }

@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .join-bottom { flex-direction: column; align-items: flex-start; }
  .contact-list li a,
  .contact-list li { overflow-wrap: break-word; word-break: break-word; max-width: 100%; }
}