/* ==========================================================================
   Submeter trabalho · "Trabalhos D · etapas melhoradas"
   IDOMED 30:527 (desktop 1440) · 30:581 (mobile 390) · componente Etapa 30:465
   (original nos wireframes vUVXnbuRbYHpxsceFLdUTR: 53:105 / 54:186 / 51:199).
   Substitui o grupo 1:958. Fundo sólido --purple-900; o painel "Para quem é?"
   pisa 76px no topo (o padding compensa) e a borboleta 1:844 sai pela direita.
   Estados das etapas pela data: js/modules/trabalhos.js + SUBMISSAO (config.js).
   ========================================================================== */

.cn-submeter {
  position: relative; /* sem isolation: a borboleta passa por cima dos Palestrantes */
  padding-block: calc(var(--publico-overlap) + var(--sub-pad)) var(--sub-pad);
  /* brilhos lilás sobre o roxo da marca */
  background: var(--sub-glow), var(--purple-900);
  color: var(--white);
}
.cn-submeter > .container { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-48); }

/* ---------- Topo: texto + cartão de prazo (30:528) ---------- */
.cn-sub__top { display: grid; grid-template-columns: minmax(0, 1fr) var(--sub-deadline-w); gap: var(--space-48); align-items: end; }
.cn-sub__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-20); }
.cn-sub__lead { color: color-mix(in srgb, var(--white) 82%, transparent); }

.cn-sub__deadline {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--space-28) var(--space-32);
  border-radius: var(--radius-lg); background: var(--white); color: var(--purple-900);
}
.cn-sub__deadline-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.cn-sub__deadline-kicker { font: var(--fw-semibold) var(--fs-small)/1 var(--font-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.cn-sub__deadline-chip { padding: 5px var(--space-10); border-radius: var(--radius-pill); background: var(--purple-900); color: var(--white); font: var(--fw-semibold) var(--fs-caption)/1.55 var(--font-sans); white-space: nowrap; }
.cn-sub__deadline-date { font: var(--fw-semibold) var(--fs-deadline)/1 var(--font-sans); letter-spacing: -.01em; }
.cn-sub__deadline-info { display: flex; align-items: center; gap: var(--space-8); font: var(--fw-regular) var(--fs-body-s)/1.5 var(--font-sans); color: var(--text-body); }
.cn-sub__deadline-info svg { flex: none; color: var(--purple-700); }

/* ---------- Como funciona: trilho + cards (30:542) ---------- */
.cn-sub__how { display: flex; flex-direction: column; gap: var(--space-16); }
.cn-sub__label { color: var(--gray-400); }
.cn-sub__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); }
.cn-step { display: flex; flex-direction: column; gap: var(--space-16); }

/* trilho (mesma linguagem do stepper de lotes) */
.cn-step__rail { display: flex; align-items: center; height: 18px; padding-left: 22px; }
.cn-step__dot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--step-line); background: var(--purple-900); transition: background-color .4s, border-color .4s, box-shadow .4s; }
.cn-step__line { flex: 1; height: 2px; margin-left: var(--space-8); background: var(--step-line); transform-origin: left center; }
.cn-step:last-child .cn-step__line { visibility: hidden; }
/* etapas concluídas e atual */
.cn-step.is-done .cn-step__dot { border-color: var(--lilac-400); background: var(--lilac-400); }
.cn-step.is-done .cn-step__line { background: var(--lilac-400); }
.cn-step.is-current .cn-step__dot { width: 18px; height: 18px; border: 2px solid color-mix(in srgb, var(--lilac-150) 70%, transparent); background: var(--lilac-400); box-shadow: var(--glow-lot-active); }
.cn-step.is-current .cn-step__line { background: linear-gradient(90deg, var(--lilac-400), transparent); }
/* desenho do trilho até a etapa atual quando a seção entra (js marca .is-drawn) */
@media (prefers-reduced-motion: no-preference) {
  .js .cn-sub__steps .cn-step.is-done .cn-step__line,
  .js .cn-sub__steps .cn-step.is-current .cn-step__line { transition: transform .7s var(--ease-out) calc(.25s + var(--i) * .35s); }
  .js .cn-sub__steps:not(.is-drawn) .cn-step.is-done .cn-step__line,
  .js .cn-sub__steps:not(.is-drawn) .cn-step.is-current .cn-step__line { transform: scaleX(0); }
  .cn-step.is-current .cn-step__dot { animation: cn-lot-breathe 2.8s ease-in-out infinite; }
}

/* card da etapa (componente 30:465) */
.cn-step__card {
  position: relative; isolation: isolate;
  flex: 1; display: flex; flex-direction: column; gap: var(--space-14);
  padding: 22px; border-radius: var(--radius-card);
  /* vidro: gradiente sutil + desfoque dos brilhos da seção + linha de luz no topo */
  border: 1px solid transparent; background: var(--step-glass);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 10%, transparent);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
/* borda em degradê (lilás em cima, sumindo embaixo) */
.cn-step__card::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--step-border-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .3s var(--ease-out);
}
/* número da etapa ao fundo, em Fraunces itálico, quase marca d'água */
.cn-sub__steps { counter-reset: etapa; }
.cn-step { counter-increment: etapa; }
.cn-step__card::after {
  content: counter(etapa, decimal-leading-zero); position: absolute; z-index: -1; right: 16px; bottom: -14px; pointer-events: none;
  font: italic 600 112px/1 var(--font-serif); font-variation-settings: var(--fraunces-axes); letter-spacing: -.02em;
  color: color-mix(in srgb, var(--white) 5%, transparent);
}
.cn-step__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.cn-step[data-step="0"] .cn-step__top { min-height: 40px; padding-right: 80px; }
.cn-step__label { font: var(--fw-semibold) var(--fs-week)/1 var(--font-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-400); }
.cn-step__tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--white) 8%, transparent); color: var(--lilac-400); }
/* ---------- Ilustração da etapa 1: documento sendo escrito e enviado (teste) ----------
   Fica no canto do card sem mudar a altura. Lilás bem suave → transparente.
   Anima só quando a etapa é a atual; nas outras, e em reduced-motion, fica a folha pronta com o check. */
.cn-step__card { position: relative; }
.cn-ilu-doc { position: absolute; top: 2px; right: 8px; width: 88px; height: auto; overflow: visible; pointer-events: none; }
.cn-ilu-doc * { transform-box: fill-box; }
.cn-ilu-doc__papel { stroke: color-mix(in srgb, var(--lilac-300) 75%, transparent); stroke-width: 1.4; }
.cn-ilu-doc__dobra { stroke: color-mix(in srgb, var(--lilac-300) 75%, transparent); stroke-width: 1.4; stroke-linejoin: round; fill: color-mix(in srgb, var(--lilac-200) 18%, transparent); }
.cn-ilu-doc__linha { fill: color-mix(in srgb, var(--lilac-300) 55%, transparent); transform-origin: left center; }
.cn-ilu-doc__cursor { fill: var(--lilac-150); opacity: 0; }
.cn-ilu-doc__ok circle { fill: color-mix(in srgb, var(--lilac-400) 85%, transparent); }
.cn-ilu-doc__ok path { stroke: var(--purple-900); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.cn-ilu-doc__ok { transform-origin: center; }
.cn-ilu-doc__rastro { stroke: color-mix(in srgb, var(--lilac-300) 60%, transparent); stroke-width: 1.4; stroke-dasharray: .04 .035; stroke-linecap: round; opacity: 0; }
.cn-ilu-doc__aviao { fill: color-mix(in srgb, var(--lilac-200) 30%, transparent); stroke: var(--lilac-200); stroke-width: 1.4; stroke-linejoin: round; opacity: 0; transform-origin: center; }
.cn-ilu-doc__folha { transform-origin: center; }
@media (max-width: 767px) { .cn-ilu-doc { top: 0; right: 4px; width: 76px; } .cn-step__card::after { font-size: 72px; right: 12px; bottom: -8px; } }

@media (prefers-reduced-motion: no-preference) {
  .cn-step.is-current .cn-ilu-doc__folha { animation: cn-ilu-folha 7s var(--ease-out) infinite; }
  .cn-step.is-current .cn-ilu-doc__linha { animation: cn-ilu-l1 7s linear infinite; }
  .cn-step.is-current .cn-ilu-doc__linha:nth-of-type(2) { animation-name: cn-ilu-l2; }
  .cn-step.is-current .cn-ilu-doc__linha:nth-of-type(3) { animation-name: cn-ilu-l3; }
  .cn-step.is-current .cn-ilu-doc__linha:nth-of-type(4) { animation-name: cn-ilu-l4; }
  .cn-step.is-current .cn-ilu-doc__linha:nth-of-type(5) { animation-name: cn-ilu-l5; }
  .cn-step.is-current .cn-ilu-doc__cursor { animation: cn-ilu-cursor 7s linear infinite; }
  .cn-step.is-current .cn-ilu-doc__ok { animation: cn-ilu-ok 7s var(--ease-out) infinite; }
  .cn-step.is-current .cn-ilu-doc__rastro { animation: cn-ilu-rastro 7s ease-out infinite; }
  .cn-step.is-current .cn-ilu-doc__aviao { animation: cn-ilu-aviao 7s ease-in infinite; }
  .cn-step.is-current .cn-ilu-doc__halo { animation: cn-ilu-halo 7s ease-in-out infinite; }
  [data-trabalhos].is-offscreen .cn-ilu-doc * { animation-play-state: paused; }
}
/* 0–8% folha surge · 8–48% linhas escritas · 50–58% check · 62–80% folha sobe e o avião sai · 80–100% vazio */
@keyframes cn-ilu-folha {
  0% { opacity: 0; transform: translateY(6px); }
  8%, 60% { opacity: 1; transform: none; }
  78% { opacity: 0; transform: translate(14px, -22px) scale(.82) rotate(6deg); }
  100% { opacity: 0; transform: translateY(6px); }
}
@keyframes cn-ilu-l1 { 0%, 9% { transform: scaleX(0); } 17%, 99% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes cn-ilu-l2 { 0%, 17% { transform: scaleX(0); } 25%, 99% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes cn-ilu-l3 { 0%, 25% { transform: scaleX(0); } 33%, 99% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes cn-ilu-l4 { 0%, 33% { transform: scaleX(0); } 41%, 99% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes cn-ilu-l5 { 0%, 41% { transform: scaleX(0); } 48%, 99% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
/* cursor acompanha a ponta de cada linha (fill-box: posição pelo próprio x/y 0) */
@keyframes cn-ilu-cursor {
  0%, 8% { opacity: 0; transform: translate(38px, 38px); }
  9% { opacity: 1; transform: translate(38px, 38px); }
  17% { transform: translate(69px, 38px); } 17.01% { transform: translate(38px, 48px); }
  25% { transform: translate(79px, 48px); } 25.01% { transform: translate(38px, 58px); }
  33% { transform: translate(75px, 58px); } 33.01% { transform: translate(38px, 68px); }
  41% { transform: translate(79px, 68px); } 41.01% { transform: translate(38px, 78px); }
  48% { opacity: 1; transform: translate(61px, 78px); }
  52%, 100% { opacity: 0; transform: translate(61px, 78px); }
}
@keyframes cn-ilu-ok { 0%, 49% { opacity: 0; transform: scale(.4); } 54% { opacity: 1; transform: scale(1.15); } 58%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cn-ilu-rastro { 0%, 62% { opacity: 0; stroke-dashoffset: .6; } 66% { opacity: 1; } 78% { opacity: 1; stroke-dashoffset: 0; } 90%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes cn-ilu-aviao {
  0%, 62% { opacity: 0; transform: translate(-6px, 8px) scale(.7); }
  66% { opacity: 1; transform: translate(0, 0) scale(1); }
  84% { opacity: 0; transform: translate(30px, -40px) scale(.75); }
  100% { opacity: 0; transform: translate(30px, -40px) scale(.75); }
}
@keyframes cn-ilu-halo { 0%, 100% { opacity: .7; } 55% { opacity: 1; } 75% { opacity: .5; } }

.cn-step__title { font: var(--fw-semibold) var(--fs-step-title)/1.4 var(--font-sans); color: var(--white); }
.cn-step__desc { font: var(--fw-regular) var(--fs-body-s)/1.5 var(--font-sans); color: var(--gray-400); }
.cn-step__foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-10); padding-top: var(--space-14); border-top: 1px solid var(--step-border); }
.cn-step__date { display: inline-flex; align-items: center; gap: var(--space-8); font: var(--fw-semibold) var(--fs-body-s)/1.55 var(--font-sans); color: var(--white); }
.cn-step__cal { flex: none; color: var(--lilac-400); }
.cn-step__status { padding: 5px var(--space-10); border-radius: var(--radius-pill); border: 1px solid var(--step-border); font: var(--fw-semibold) var(--fs-caption)/1 var(--font-sans); color: var(--gray-400); white-space: nowrap; }

/* próximas: mais apagadas */
.cn-step.is-next .cn-step__title { color: color-mix(in srgb, var(--white) 80%, transparent); }
.cn-step.is-next .cn-step__date { color: color-mix(in srgb, var(--white) 75%, transparent); }
/* concluídas */
.cn-step.is-done .cn-step__status { background: color-mix(in srgb, var(--white) 8%, transparent); border-color: transparent; }
/* atual */
/* etapa atual: luz lilás nascendo do canto da ilustração + borda forte nesse canto */
.cn-step.is-current .cn-step__card { background: var(--step-current-glow), var(--step-glass); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 14%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--lilac-400) 45%, transparent); }
.cn-step.is-current .cn-step__card::before { background: var(--step-border-current); }
.cn-step.is-current .cn-step__card::after { color: color-mix(in srgb, var(--lilac-300) 9%, transparent); }
.cn-step.is-current .cn-step__label { color: var(--lilac-150); }
.cn-step.is-current .cn-step__tile { background: var(--lilac-400); color: var(--purple-900); }
.cn-step.is-current .cn-step__status { background: var(--lime-500); border-color: var(--lime-500); color: var(--purple-900); }
.cn-step.is-current .cn-step__status::before { content: "● "; }

@media (hover: hover) and (pointer: fine) {
  .cn-step__card:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 14%, transparent), var(--step-shadow-hover); }
  .cn-step__card:hover::before { background: linear-gradient(180deg, color-mix(in srgb, var(--lilac-400) 85%, transparent), color-mix(in srgb, var(--lilac-400) 25%, transparent)); }
  .cn-step.is-current .cn-step__card:hover::before { background: linear-gradient(225deg, var(--lilac-200), color-mix(in srgb, var(--lilac-400) 40%, transparent)); }
}

/* ---------- Aviso + premiação (30:562) ---------- */
.cn-sub__notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); align-items: stretch; }
/* Atenção e Premiação: mesma linguagem de vidro dos cards das etapas */
.cn-sub__notice, .cn-sub__prize {
  position: relative; isolation: isolate;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  background: var(--step-glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 10%, transparent);
}
.cn-sub__notice::before, .cn-sub__prize::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--step-border-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Atenção: discreto; barra lateral em degradê, ícone em pastilha, rótulo acima do texto */
.cn-sub__notice {
  display: flex; align-items: center; gap: var(--space-14);
  padding: 18px var(--space-20) 18px var(--space-24);
  font: var(--fw-regular) var(--fs-nav)/1.55 var(--font-sans); color: var(--gray-200);
}
.cn-sub__notice::after { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 3px 3px 0; background: var(--notice-bar); }
.cn-sub__notice-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--lilac-400) 16%, transparent); color: var(--lilac-300);
}
.cn-sub__notice-text { display: flex; flex-direction: column; gap: 2px; }
.cn-sub__notice-kicker { font: var(--fw-semibold) var(--fs-caption)/1.4 var(--font-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--lilac-300); }
/* Premiação: ilustração animada + luz nascendo dela */
.cn-sub__prize {
  display: flex; align-items: center; gap: var(--space-16);
  padding: var(--space-14) var(--space-20) var(--space-14) var(--space-14);
  background: var(--prize-glow), var(--step-glass);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.cn-sub__prize-ilu { flex: none; width: 88px; height: auto; overflow: visible; }
.cn-sub__prize-ilu * { transform-box: fill-box; }
.cn-premio__cert rect { fill: color-mix(in srgb, var(--lilac-200) 16%, transparent); stroke: color-mix(in srgb, var(--lilac-300) 60%, transparent); stroke-width: 1.3; }
.cn-premio__cert { transform-origin: center; transform: rotate(-10deg); }
.cn-premio__cert-linha { stroke: color-mix(in srgb, var(--lilac-300) 55%, transparent); stroke-width: 2.4; stroke-linecap: round; }
.cn-premio__fita { fill: color-mix(in srgb, var(--lilac-400) 55%, transparent); }
.cn-premio__selo { fill: var(--lilac-400); }
.cn-premio__alca { stroke: var(--lilac-300); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.cn-premio__contorno { stroke: color-mix(in srgb, var(--lilac-200) 70%, transparent); stroke-width: 1.2; fill: none; }
.cn-premio__base { fill: var(--purple-700); stroke: color-mix(in srgb, var(--lilac-300) 70%, transparent); stroke-width: 1.2; }
.cn-premio__reflexo { fill: color-mix(in srgb, var(--white) 45%, transparent); transform: translateX(-12px) skewX(-18deg); }
.cn-premio__taca { transform-origin: center; }
.cn-premio__brilho { fill: var(--lilac-200); transform-origin: center; opacity: .5; }
.cn-sub__prize-more { flex: none; display: inline-flex; align-items: center; gap: 6px; font: var(--fw-semibold) var(--fs-body-s)/1.55 var(--font-sans); color: var(--white); }
.cn-sub__prize-more svg { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cn-sub__prize:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 14%, transparent), var(--step-shadow-hover); }
  .cn-sub__prize:hover::before { background: linear-gradient(180deg, color-mix(in srgb, var(--lilac-400) 85%, transparent), color-mix(in srgb, var(--lilac-400) 25%, transparent)); }
  .cn-sub__prize:hover .cn-sub__prize-more svg { transform: translateY(3px); }
  .cn-sub__prize:hover .cn-premio__brilho { fill: var(--white); }
}
@media (prefers-reduced-motion: no-preference) {
  .cn-premio__taca { animation: cn-premio-flutua 4s ease-in-out infinite alternate; }
  .cn-premio__reflexo { animation: cn-premio-reflexo 4.2s ease-in-out infinite; }
  .cn-premio__brilho { animation: cn-premio-brilho 2.6s ease-in-out infinite; }
  .cn-premio__brilho:nth-of-type(2) { animation-delay: .7s; }
  .cn-premio__brilho:nth-of-type(3) { animation-delay: 1.4s; }
  .cn-premio__brilho:nth-of-type(4) { animation-delay: 2s; }
  .cn-sub__prize:hover .cn-premio__brilho { animation-duration: 1.2s; }
  .cn-sub__notice.is-seen .cn-sub__notice-icon svg { animation: cn-alerta .8s ease-in-out .3s 1; }
  [data-trabalhos].is-offscreen .cn-sub__prize-ilu * { animation-play-state: paused; }
}
@keyframes cn-premio-flutua { from { transform: translateY(1.5px); } to { transform: translateY(-2.5px); } }
@keyframes cn-premio-reflexo { 0%, 40% { transform: translateX(-12px) skewX(-18deg); } 75%, 100% { transform: translateX(46px) skewX(-18deg); } }
@keyframes cn-premio-brilho { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes cn-alerta { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
.cn-sub__prize-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); font: var(--fw-regular) var(--fs-body-s)/1.5 var(--font-sans); color: var(--gray-200); }
.cn-sub__prize-text strong { font: var(--fw-semibold) var(--fs-nav)/1.55 var(--font-sans); color: var(--white); }
.cn-sub__prize-more { flex: none; display: inline-flex; align-items: center; gap: 6px; font: var(--fw-semibold) var(--fs-body-s)/1.55 var(--font-sans); color: var(--white); }
.cn-sub__prize-more svg { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cn-sub__prize:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--lilac-400) 70%, transparent); box-shadow: var(--step-shadow-hover); }
  .cn-sub__prize:hover .cn-sub__prize-more svg { transform: translateY(3px); }
}

/* ---------- Botões (30:574) ---------- */
.cn-sub__buttons { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* ---------- Borboleta 1:844: sai pela direita, metade sobre os Palestrantes ---------- */
.cn-submeter__butterfly { width: 467px; right: -118px; bottom: -233px; }
/* desce sobre a Premiação: entre 1024 e 1439 o título centralizado chega perto — menor e mais para fora */
@media (max-width: 1439px) { .cn-submeter__butterfly { width: 360px; right: -130px; bottom: -150px; } }
@media (max-width: 1199px) { .cn-submeter__butterfly { width: 260px; right: -110px; bottom: -96px; } }

/* ---------- ≤1023 ---------- */
@media (max-width: 1023px) {
  .cn-sub__top { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .cn-sub__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-24); }
  .cn-sub__notes { grid-template-columns: minmax(0, 1fr); }
  .cn-submeter__butterfly { width: 300px; right: -70px; bottom: -150px; }
}

/* ---------- ≤767: frame 30:581 — linha do tempo vertical ---------- */
@media (max-width: 767px) {
  .cn-submeter { padding-block: calc(var(--publico-overlap-m) + var(--space-48)) var(--space-64); }
  .cn-submeter > .container { gap: var(--space-24); }
  .cn-sub__text { gap: var(--space-16); }
  .cn-sub__lead { font-size: var(--fs-nav); line-height: 1.5; }
  .cn-sub__deadline { padding: var(--space-20); border-radius: 18px; }
  .cn-sub__deadline-date { font-size: var(--fs-deadline-m); }
  .cn-sub__deadline-info { font-size: var(--fs-small); }

  .cn-sub__how { gap: var(--space-14); }
  .cn-sub__steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .cn-step { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-14); }
  .cn-step__rail { flex-direction: column; align-items: center; height: auto; padding: 22px 0 0; }
  .cn-step__line { width: 2px; height: auto; margin: var(--space-8) 0 0; transform-origin: center top; }
  .cn-step.is-current .cn-step__line { background: linear-gradient(180deg, var(--lilac-400), var(--step-line)); }
  .js .cn-sub__steps:not(.is-drawn) .cn-step.is-done .cn-step__line,
  .js .cn-sub__steps:not(.is-drawn) .cn-step.is-current .cn-step__line { transform: scaleY(0); }
  .cn-step__card { margin-bottom: var(--space-12); padding: var(--space-16); gap: var(--space-8); border-radius: var(--radius-tile); }
  .cn-step__tile { width: auto; height: auto; background: none; }
  .cn-step.is-current .cn-step__tile { background: none; color: var(--lilac-400); }
  .cn-step__title { font-size: var(--fs-step-title-m); }
  .cn-step__desc { font-size: var(--fs-small); }
  .cn-step__foot { flex-direction: row; align-items: center; justify-content: space-between; padding-top: var(--space-10); }
  .cn-step__cal { display: none; }
  .cn-step__date { font-size: var(--fs-small); }
  .cn-step__status { padding: 3px var(--space-8); font-size: var(--fs-week); }

  /* empilhados: ícone/ilustração em cima, texto embaixo */
  .cn-sub__notice { flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--space-20) var(--space-20) var(--space-20) var(--space-24); font-size: var(--fs-body-s); }
  .cn-sub__notice-icon { width: 40px; height: 40px; }
  .cn-sub__prize { flex-direction: column; align-items: flex-start; gap: var(--space-10); padding: var(--space-16) var(--space-20) var(--space-20); }
  .cn-sub__prize-ilu { width: 88px; margin: -4px 0 0 -8px; }
  .cn-sub__prize-text strong { font-size: var(--fs-body); }
  .cn-sub__prize-more { margin-top: var(--space-4); }
  .cn-sub__buttons { flex-direction: column; }
  .cn-sub__buttons .cn-btn { width: 100%; }
  .cn-submeter__butterfly { width: 170px; right: -40px; bottom: -90px; }
}