/* ==========================================================================
   Rodapé · revisão 09/10/2026 (base Figma 1:447).
   Em uso: a versão clara (.cn-footer--claro, no fim do arquivo). A base abaixo é a roxa;
   brilho e meia borboleta;
   topo com o essencial do evento + CTA; 3 colunas (Navegue, Participe, Contato);
   linha final com direitos/realização e "Voltar ao topo". Mesmo rodapé nas duas páginas.
   ========================================================================== */

.cn-footer {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: var(--gap-123);
  padding: var(--space-64) 0 var(--space-32);
  background: var(--glow-footer), var(--purple-900);
  color: color-mix(in srgb, var(--white) 78%, transparent);
}
.cn-footer__butterfly {
  position: absolute; z-index: -1; top: -60px; right: -120px; width: 360px; height: 315px; pointer-events: none;
  color: color-mix(in srgb, var(--lilac-400) 7%, transparent); rotate: -14deg;
}
.cn-footer a { transition: color var(--dur-fast); }
.cn-footer :focus-visible { outline-color: var(--lime-500); }

/* ---------- Topo: marca + essencial do evento + CTA ---------- */
.cn-footer__top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32);
  padding-bottom: var(--space-40); border-bottom: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
}
.cn-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-14); }
.cn-footer__logo { display: block; border-radius: var(--radius-xs); }
.cn-footer__logo img { width: 180px; height: auto; }
.cn-footer__tagline { font: var(--fw-regular) var(--fs-body-l)/1.45 var(--font-sans); color: var(--white); }
.cn-footer__tagline em { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-variation-settings: var(--fraunces-axes); color: var(--lilac-450); }
.cn-footer__meta { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); margin-top: var(--space-4); }
.cn-footer__meta li { display: inline-flex; align-items: center; gap: var(--space-8); font: var(--fw-semibold) var(--fs-body-s)/1.5 var(--font-sans); color: var(--white); }
.cn-footer__meta svg { flex: none; color: var(--lilac-400); }
.cn-footer__cta { flex: none; }

/* ---------- Colunas ---------- */
.cn-footer__cols {
  display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: var(--space-48);
  padding-block: var(--space-40);
}
.cn-footer__col { display: flex; flex-direction: column; gap: var(--space-16); }
.cn-footer__title { font: var(--fw-semibold) var(--fs-caption)/1.4 var(--font-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--lilac-300); }
.cn-footer__col ul { display: flex; flex-direction: column; gap: var(--space-12); font: var(--fw-regular) var(--fs-body)/1.5 var(--font-sans); }
.cn-footer__col ul a { color: color-mix(in srgb, var(--white) 82%, transparent); }
.cn-footer__col ul a:hover { color: var(--white); }

/* contato: ícone em pastilha + rótulo + detalhe */
.cn-footer__contact { display: flex; align-items: center; gap: var(--space-12); }
.cn-footer__contact-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--white) 10%, transparent); color: var(--white);
  transition: background-color var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.cn-footer__contact > span:last-child { display: flex; flex-direction: column; font-weight: var(--fw-semibold); color: var(--white); line-height: 1.3; }
.cn-footer__contact small { font: var(--fw-regular) var(--fs-small)/1.4 var(--font-sans); color: color-mix(in srgb, var(--white) 65%, transparent); overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
  .cn-footer__contact:hover .cn-footer__contact-icon { background: var(--lime-500); color: var(--purple-900); transform: translateY(-2px); }
}

/* ---------- Linha final ---------- */
.cn-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16) var(--space-32);
  padding-top: var(--space-24); border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
}
.cn-footer__copy { font: var(--fw-regular) var(--fs-small)/1.5 var(--font-sans); color: color-mix(in srgb, var(--white) 60%, transparent); }
.cn-footer__totop { flex: none; display: inline-flex; align-items: center; gap: var(--space-12); font: var(--fw-semibold) var(--fs-body-s)/1 var(--font-sans); color: var(--white); }
.cn-footer__totop-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--white) 30%, transparent);
  transition: background-color var(--dur-base), border-color var(--dur-base), color var(--dur-base);
}
.cn-footer__totop-btn svg { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cn-footer__totop:hover .cn-footer__totop-btn { background: var(--white); border-color: var(--white); color: var(--purple-900); }
  .cn-footer__totop:hover .cn-footer__totop-btn svg { transform: translateY(-3px); }
}

/* ---------- ≤1023 ---------- */
@media (max-width: 1023px) {
  .cn-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-32) var(--space-24); }
  .cn-footer__col--contact { grid-column: 1 / -1; }
  .cn-footer__col--contact ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); }
}
/* ---------- ≤767: compacto ---------- */
@media (max-width: 767px) {
  .cn-footer { margin-top: var(--space-80); padding: var(--space-40) 0 var(--space-20); }
  .cn-footer__butterfly { width: 240px; height: 210px; right: -110px; top: -40px; }
  .cn-footer__top { flex-direction: column; align-items: stretch; gap: var(--space-20); padding-bottom: var(--space-28); }
  .cn-footer__brand { gap: var(--space-10); }
  .cn-footer__logo img { width: 140px; }
  .cn-footer__tagline { font-size: var(--fs-body-s); }
  .cn-footer__meta { gap: var(--space-6) var(--space-16); }
  .cn-footer__meta li { font-size: var(--fs-small); }
  .cn-footer__meta svg { width: 16px; height: 16px; }
  .cn-footer__cta { width: 100%; }
  .cn-footer__cols { padding-block: var(--space-28); gap: var(--space-28) var(--space-20); }
  .cn-footer__col { gap: var(--space-12); }
  .cn-footer__col ul { gap: var(--space-8); font-size: var(--fs-body-s); }
  /* contatos em 3 colunas: ícone em cima, nome embaixo (detalhe só no desktop) */
  .cn-footer__col--contact ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
  .cn-footer__contact { flex-direction: column; gap: var(--space-6); padding: var(--space-10) 0; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--white) 5%, transparent); text-align: center; }
  .cn-footer__contact > span:last-child { font-size: var(--fs-small); }
  .cn-footer__contact small { display: none; }
  /* direitos à esquerda, só o botão de voltar ao topo à direita */
  .cn-footer__bottom { gap: var(--space-16); padding-top: var(--space-20); }
  .cn-footer__copy { font-size: var(--fs-caption); }
  .cn-footer__totop { font-size: 0; gap: 0; }
}

/* ---------- Versão clara (escolhida pelo Lucas, 09/10/2026): lilás bem claro, textos escuros ---------- */
.cn-footer--claro { background: radial-gradient(50% 80% at 100% 0%, color-mix(in srgb, var(--lilac-300) 45%, transparent), transparent 70%), var(--lilac-50); color: var(--text-body); border-top: 1px solid var(--lilac-200); }
.cn-footer--claro .cn-footer__butterfly { color: color-mix(in srgb, var(--purple-700) 6%, transparent); }
.cn-footer--claro .cn-footer__tagline { color: var(--purple-900); }
.cn-footer--claro .cn-footer__tagline em { color: var(--purple-700); }
.cn-footer--claro .cn-footer__meta li { color: var(--purple-900); }
.cn-footer--claro .cn-footer__meta svg { color: var(--purple-700); }
.cn-footer--claro .cn-footer__top, .cn-footer--claro .cn-footer__bottom { border-color: var(--lilac-200); }
.cn-footer--claro .cn-footer__title { color: var(--purple-700); }
.cn-footer--claro .cn-footer__col ul a { color: var(--text-body); }
.cn-footer--claro .cn-footer__col ul a:hover { color: var(--purple-700); }
.cn-footer--claro .cn-footer__contact-icon { background: var(--white); color: var(--purple-700); box-shadow: inset 0 0 0 1px var(--lilac-200); }
.cn-footer--claro .cn-footer__contact > span:last-child { color: var(--purple-900); }
.cn-footer--claro .cn-footer__contact small { color: var(--text-muted); }
.cn-footer--claro .cn-footer__copy { color: var(--text-muted); }
.cn-footer--claro .cn-footer__totop { color: var(--purple-900); }
.cn-footer--claro .cn-footer__totop-btn { border-color: var(--lilac-300); color: var(--purple-700); }
.cn-footer--claro :focus-visible { outline-color: var(--purple-700); }
@media (hover: hover) and (pointer: fine) {
  .cn-footer--claro .cn-footer__contact:hover .cn-footer__contact-icon { background: var(--purple-700); color: var(--white); }
  .cn-footer--claro .cn-footer__totop:hover .cn-footer__totop-btn { background: var(--purple-700); border-color: var(--purple-700); color: var(--white); }
}
@media (max-width: 767px) {
  .cn-footer--claro .cn-footer__contact { background: var(--white); box-shadow: inset 0 0 0 1px var(--lilac-200); }
}
/* WhatsApp: ícone oficial colorido sobre pastilha branca */
.cn-footer__contact-icon--whats { background: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .cn-footer--claro .cn-footer__contact:hover .cn-footer__contact-icon--whats { background: var(--white); box-shadow: inset 0 0 0 1.5px #25d366; }
}