/* ==========================================================================
   II CONATAN — Componentes recorrentes
   Medidas do Figma (node-ids de referência entre parênteses).
   Estados :hover/:focus não existem no Figma — os daqui são PROPOSTA (marcados).
   ========================================================================== */

/* ---------- Botões ---------- */
.cn-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 100%;
  border-radius: var(--radius-pill);
  white-space: nowrap; text-transform: uppercase; text-decoration: none;
  /* --mx/--my: deslocamento "magnético" controlado pelo motion.js (independente do transform do hover) */
  translate: var(--mx, 0px) var(--my, 0px);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base);
}
.cn-btn__arrow {
  flex: none; display: grid; place-items: center;
  width: 35px; height: 35px; border-radius: 50%;
  background: var(--white); color: var(--purple-900);
  transition: transform var(--dur-base) var(--ease-out);
}
.cn-btn__arrow svg { width: 18px; height: 18px; }

/* DECISÃO: todos os botões em IBM Plex Sans 700 maiúsculo, um único gradiente lima.
   Escala única (revisão de 07/10/2026 — os 65/80px do Figma eram grandes demais):
     --sm 40 · padrão 52 · --lg 58 (desktop) · alvo de toque ≥ 44 no mobile.
   Padding lateral simétrico (o lado da seta tem o mesmo padding do lado do texto). */
.cn-btn--lime, .cn-btn--lime-alt, .cn-btn--outline {
  min-height: var(--btn-h-md); padding: 0 var(--btn-px-md);
  font: var(--fw-bold) var(--fs-btn-md)/1 var(--font-sans); letter-spacing: .02em;
}
.cn-btn--lime, .cn-btn--lime-alt { background: var(--grad-cta-lime); color: var(--purple-900); }
.cn-btn__arrow { width: var(--btn-arrow-md); height: var(--btn-arrow-md); }
.cn-btn__arrow svg { width: 16px; height: 16px; }

/* grande: CTAs de seção (Submeter, Ao vivo, Chamada final) */
.cn-btn--lg { min-height: var(--btn-h-lg); padding: 0 var(--btn-px-lg); font-size: var(--fs-btn-lg); }
.cn-btn--lg .cn-btn__arrow { width: var(--btn-arrow-lg); height: var(--btn-arrow-lg); }

/* pequeno: header e cards de preço */
.cn-btn--sm, .cn-btn--compact { min-height: var(--btn-h-sm); padding: 0 var(--btn-px-sm); font-size: var(--fs-small); }
.cn-btn--sm .cn-btn__arrow, .cn-btn--compact .cn-btn__arrow { width: var(--btn-arrow-sm); height: var(--btn-arrow-sm); }
.cn-btn--sm .cn-btn__arrow svg, .cn-btn--compact .cn-btn__arrow svg { width: 14px; height: 14px; }

/* Contorno branco (hero 1:575): mesma altura do lima ao lado */
.cn-btn--outline { color: var(--white); border: 1px solid var(--white); }
/* Contorno escuro, para fundos claros (Teaser da Programação) */
.cn-btn--outline-dark { color: var(--purple-900); border: 1.5px solid var(--purple-900); }
@media (hover: hover) { .cn-btn--outline-dark:hover { background: color-mix(in srgb, var(--purple-900) 6%, transparent); } }

/* Sólido roxo (presencial "Ver no mapa" 1:210) */
.cn-btn--solid {
  background: var(--purple-700); color: var(--white);
  font: var(--fw-semibold) var(--fs-nav)/1 var(--font-sans); text-transform: none;
  padding: 0 var(--btn-px-md); min-height: var(--btn-h-sm-m); border-radius: var(--radius-pill);
}

/* Hover (PROPOSTA — docs/animacoes.md): sobe 2px, brilho diagonal atravessando o lima,
   seta gira 45° e o círculo cresce. O efeito magnético dos CTAs grandes fica no motion.js. */
.cn-btn--lime, .cn-btn--lime-alt { overflow: hidden; isolation: isolate; }
.cn-btn--lime::after, .cn-btn--lime-alt::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, color-mix(in srgb, var(--white) 90%, transparent) 50%, transparent 65%);
  transform: translateX(-110%);
}
@media (hover: hover) {
  .cn-btn:hover { transform: translateY(-2px); }
  .cn-btn--lime:hover, .cn-btn--lime-alt:hover { box-shadow: 0 10px 28px color-mix(in srgb, var(--lime-500) 35%, transparent); }
  .cn-btn--lime:hover::after, .cn-btn--lime-alt:hover::after { transform: translateX(110%); transition: transform .8s cubic-bezier(.45, 0, .25, 1); }
  .cn-btn:hover .cn-btn__arrow { transform: rotate(45deg) scale(1.08); }
  .cn-btn--outline:hover { background: color-mix(in srgb, var(--white) 8%, transparent); }
  .cn-btn--solid:hover { background: var(--purple-775); }
}
.cn-btn:active { transform: translateY(0); }

/* ---------- Chip / eyebrow ----------
   DECISÃO: 2 variações — claro (sobre fundo claro) e escuro (sobre fundo roxo/imagem).
   Revisão 08/10/2026 (Lucas): mais discreto — IBM 600 12 maiúsculo, espaçamento 0,1em,
   padding 7/12. (O Figma usava Inter Light 18, grande demais para um rótulo.) */
.cn-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px var(--space-12); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--lilac-500) 18%, transparent); color: var(--purple-700);
  font: var(--fw-semibold) var(--fs-chip)/var(--lh-chip) var(--font-sans); letter-spacing: var(--ls-chip); text-transform: uppercase;
  width: fit-content;
}
.cn-chip--on-dark { background: var(--lilac-400); color: var(--purple-700); } /* Ao vivo, Submeter, Inscrições */
/* aliases legados → mesmas duas variações */
.cn-chip--strong { background: color-mix(in srgb, var(--lilac-500) 18%, transparent); }
.cn-chip--sm { font-size: var(--fs-chip); }
.cn-chip--solid { background: var(--lilac-400); color: var(--purple-700); }
/* Rótulo simples sem fundo (Sobre 1:618): IBM 600 12, 14% */
.cn-eyebrow { font: var(--fw-semibold) var(--fs-caption)/normal var(--font-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }

/* ---------- Tiles de ícone ---------- */
.cn-tile { display: grid; place-items: center; flex: none; }
.cn-tile--glow {            /* Sobre 1:644 — 64px */
  width: 64px; height: 64px; border-radius: var(--radius-tile);
  background: var(--purple-500); border: 2px solid var(--white);
  box-shadow: var(--glow-icon-tile); color: var(--white);
}
.cn-tile--glass {           /* Para quem é 1:707 — 44px */
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--white) 72%, transparent); color: var(--purple-700);
}
.cn-tile--soft {            /* Ao vivo 1:346 — 44px */
  width: 44px; height: 44px; border-radius: 6px; background: var(--lilac-250); color: var(--purple-700);
}
.cn-tile--check {           /* Itens inclusos 1:770 — 44px */
  width: 44px; height: 44px; border-radius: var(--radius-check); background: var(--lilac-150); color: var(--purple-560);
}
.cn-tile--round {           /* Data no header 1:535 — 40px */
  width: 40px; height: 40px; border-radius: 50%; background: var(--lilac-250); color: var(--purple-700);
}

/* ---------- Botões de ícone (setas de carrossel) ---------- */
.cn-icon-btn {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.cn-icon-btn svg { width: 20px; height: 20px; }
.cn-icon-btn--outline { border: 1.5px solid var(--gray-900); color: var(--gray-900); background: transparent; } /* 1:80 */
.cn-icon-btn--outline-brand { border: 1.5px solid var(--purple-900); color: var(--purple-900); background: var(--white); } /* 1:216 */
.cn-icon-btn--filled { background: var(--purple-900); color: var(--white); }                                   /* 1:83, 1:219 */
.cn-icon-btn:disabled { opacity: .4; cursor: default; }

/* ---------- Paginação em pontos ---------- */
/* o botão tem 24px de altura/largura mínima (área de toque WCAG 2.5.8); o ponto visível é o ::before */
.cn-dots { display: flex; gap: 0; align-items: center; }
.cn-dots button { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0; transition: min-width var(--dur-base) var(--ease-out); }
.cn-dots button::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--lilac-325); transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base); }
.cn-dots button[aria-current="true"] { min-width: 32px; }
.cn-dots button[aria-current="true"]::before { width: 24px; background: var(--purple-700); }
.cn-dots--neutral button::before { background: var(--gray-400); }                      /* galeria 1:262 */
.cn-dots--neutral button[aria-current="true"]::before { background: var(--purple-850); }

/* ---------- Acordeão (FAQ 1:365) ---------- */
.cn-acc__item { border-bottom: 1px solid var(--border-divider); padding-block: 24px; }
.cn-acc__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; text-align: left;
  font: var(--fw-semibold) 22px/1.25 var(--font-sans); color: var(--gray-900);
}
.cn-acc__icon { flex: none; width: 22px; height: 22px; position: relative; }
.cn-acc__icon::before, .cn-acc__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.83px; background: currentColor;
  transform: translate(-50%, -50%); transition: transform var(--dur-base) var(--ease-out);
}
.cn-acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.cn-acc__q[aria-expanded="true"] .cn-acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.cn-acc__a { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.cn-acc__a > div { min-height: 0; }
.cn-acc__a p { padding-top: 12px; font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--gray-700); }
/* a pergunta pode estar dentro de um <h3>: o irmão é procurado a partir do item */
.cn-acc__q[aria-expanded="true"] + .cn-acc__a,
.cn-acc__item:has(.cn-acc__q[aria-expanded="true"]) > .cn-acc__a { grid-template-rows: 1fr; }

/* ---------- Contador · evento (1:861) ---------- */
.cn-count { display: flex; align-items: center; gap: 9px; }
.cn-count__box {
  width: 99px; height: 103px; border-radius: var(--radius-tile);
  background: var(--grad-countdown-box); border: 1px solid var(--gray-600);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  color: var(--purple-900);
}
.cn-count__num { font: var(--fw-semibold) 44px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.cn-count__num--days { font-size: 35px; }
.cn-count__lbl { font: var(--fw-semibold) 11px/normal var(--font-sans); letter-spacing: var(--ls-label); text-transform: uppercase; }
.cn-count__sep { font: var(--fw-semibold) 35px/1.08 var(--font-sans); color: var(--purple-400); padding-bottom: 25px; }

/* ---------- Contador · lote (1:827) ---------- */
.cn-mini-count { display: flex; gap: 12px; }
.cn-mini-count__box {
  width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--lilac-100);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.cn-mini-count__num { font: var(--fw-semibold) 24px/1.2 var(--font-sans); color: var(--gray-900); font-variant-numeric: tabular-nums; }
.cn-mini-count__lbl { font: var(--fw-regular) 9px/normal var(--font-sans); color: var(--gray-600); text-transform: uppercase; }

/* ---------- Item com check (1:768) ---------- */
.cn-check { display: flex; align-items: center; gap: 14px; }
.cn-check p { font: var(--fw-regular) var(--fs-body-s)/var(--lh-body-s) var(--font-sans); color: var(--gray-700); }

/* ---------- Dado com ícone (hero 1:553) ---------- */
.cn-meta { display: flex; flex-wrap: wrap; align-items: center; }
.cn-meta__item { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px; font: var(--fw-semibold) 16px/1.55 var(--font-sans); color: var(--white); }
.cn-meta__item + .cn-meta__item { border-left: 1px solid var(--gray-500); }
.cn-meta__item svg { width: 20px; height: 20px; color: var(--lilac-400); flex: none; }
/* ---------- Ajustes mobile (PROPOSTA — só o hero tem mobile no Figma) ---------- */
@media (max-width: 767px) {
  .cn-meta__item { font-size: var(--fs-meta-m); }
  /* dados empilhados sem divisória (docs/mobile.md) */
  .cn-meta__item + .cn-meta__item { border-left: 0; }

  /* hero mobile 1:909/1:914: lima 14px, contorno 15px */
  .cn-btn--lime, .cn-btn--lime-alt, .cn-btn--outline { font-size: var(--fs-btn-m); }
  .cn-btn { white-space: normal; text-align: left; }
  .cn-btn--lg { min-height: var(--btn-h-md); padding: var(--space-8) var(--btn-px-md); font-size: var(--fs-btn-m); }
  .cn-btn--lg .cn-btn__arrow { width: var(--btn-arrow-md); height: var(--btn-arrow-md); }
  .cn-btn--sm, .cn-btn--compact { min-height: var(--btn-h-sm-m); }

  /* contador do evento: caixas fluidas para caber em 344px */
  .cn-count { width: 100%; gap: 4px; }
  .cn-count__box { flex: 1 1 0; min-width: 0; width: auto; height: auto; aspect-ratio: 99 / 103; gap: 4px; }
  .cn-count__num { font-size: 28px; }
  .cn-count__num--days { font-size: 24px; }
  .cn-count__lbl { font-size: 9px; letter-spacing: .02em; } /* "SEGUNDOS" cabe em 360 */
  .cn-count__sep { font-size: 20px; padding-bottom: 14px; }
}

/* ---------- Borboletas (.cn-float, base.css posiciona) ----------
   Flutuação lenta na <img> (y ±10, rotação ±3°, 6s); o parallax de rolagem
   fica no invólucro (js/modules/butterflies.js). Desligada em reduced-motion. */
.cn-float img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .cn-float img { animation: cn-flutter 6s ease-in-out infinite alternate; }
  .cn-float:nth-of-type(2n) img { animation-duration: 7s; animation-delay: -2s; }
  .cn-float.is-offscreen img { animation-play-state: paused; }
}
@keyframes cn-flutter {
  from { transform: translateY(10px) rotate(-3deg); }
  to   { transform: translateY(-10px) rotate(3deg); }
}

/* ---------- Modal (<dialog>, js/modules/modal.js) ----------
   Tela inteira transparente; o card centraliza. Fecha no X, no Esc e ao
   clicar fora. Setas opcionais (.cn-modal__nav) ficam fora do card. */
.cn-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: var(--space-24) var(--gutter); border: 0;
  background: transparent; color: var(--text-body);
  overflow: hidden;
}
.cn-modal[open] { display: grid; place-items: center; }
.cn-modal::backdrop { background: color-mix(in srgb, var(--purple-900) 72%, transparent); backdrop-filter: blur(4px); }
.cn-modal__card {
  position: relative;
  width: min(100%, var(--modal-w)); max-height: calc(100dvh - 2 * var(--space-24));
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-panel);
}
.cn-modal__close {
  position: absolute; top: var(--space-16); right: var(--space-16); z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1.5px solid var(--gray-900); border-radius: 50%; background: var(--white); color: var(--gray-900);
  transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-base) var(--ease-out);
}
.cn-modal__close:hover { background: var(--purple-900); border-color: var(--purple-900); color: var(--white); transform: rotate(90deg); }
.cn-modal__nav { position: absolute; top: 50%; translate: 0 -50%; }
.cn-modal__nav--prev { left: max(var(--gutter), calc(50% - var(--modal-w) / 2 - 72px)); }
.cn-modal__nav--next { right: max(var(--gutter), calc(50% - var(--modal-w) / 2 - 72px)); }
@media (prefers-reduced-motion: no-preference) {
  .cn-modal[open] .cn-modal__card { animation: cn-modal-in .45s var(--ease-out); }
  .cn-modal[open]::backdrop { animation: cn-fade .35s ease-out; }
  .cn-modal.is-closing .cn-modal__card { animation: cn-modal-out .2s ease-in forwards; }
  .cn-modal.is-closing::backdrop { animation: cn-fade .2s ease-in reverse forwards; }
}
@keyframes cn-modal-in  { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes cn-modal-out { to   { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes cn-fade { from { opacity: 0; } }
@media (max-width: 767px) {
  /* espaço embaixo para as setas não cobrirem o card */
  .cn-modal { padding: var(--space-16) var(--space-16) 80px; }
  .cn-modal__card { padding: var(--space-24) var(--space-20); max-height: calc(100dvh - 96px); }
  /* setas embaixo, fora do card */
  .cn-modal__nav { top: auto; bottom: var(--space-16); translate: none; }
  .cn-modal__nav--prev { left: var(--space-16); }
  .cn-modal__nav--next { right: var(--space-16); }
}

/* Carrossel com muitas posições: barra de progresso no lugar dos pontos (carousel.js, MAX_DOTS) */
.cn-dots.is-progress { position: relative; width: min(220px, 60%); height: 4px; border-radius: var(--radius-pill); background: var(--lilac-325); overflow: hidden; }
.cn-dots__bar { position: absolute; inset: 0; border-radius: inherit; background: var(--purple-700); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .4s var(--ease-out); }