/* GERADO por ferramentas/gerar_material.py. Não editar à mão: mexe no gerador e roda de novo. */
.mc {
  --mc-tinta: oklch(0.235 0.016 50);
  --mc-apoio: oklch(0.46 0.02 55);
  --mc-laranja: oklch(0.655 0.188 44);
  --mc-creme: oklch(0.985 0.008 75);
  --mc-curva: cubic-bezier(0.16, 1, 0.3, 1);
}
.mc-topo { text-align: center; max-width: 720px; margin: 0 auto; }
.mc-topo .lead { margin: 14px auto 0; max-width: 560px; }
.mc-corpo { display: grid; gap: clamp(20px, 3vw, 48px); align-items: center; margin-top: clamp(24px, 4vw, 48px); }
.mc-ciclo { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; font-family: var(--font-display); overflow: visible; }
.mc-titulo-ciclo { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.015em; color: var(--mc-tinta); margin: 0 0 14px; }
.mc-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: passo; }
.mc-passos li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: baseline; padding: 10px 14px; border-radius: 14px;
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.45; font-weight: 450; color: var(--mc-apoio);
  animation: mc-passo 13.2s linear infinite; animation-delay: var(--atraso); }
.mc-passos b { color: var(--mc-tinta); font-weight: 700; }
.mc-passos .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-family: var(--font-display); font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums; color: var(--mc-creme); background: var(--mc-tinta); animation: mc-passo-n 13.2s linear infinite; animation-delay: var(--atraso); }
@keyframes mc-passo { 0% { background: oklch(0.655 0.188 44 / 0.12); } 14.17% { background: oklch(0.655 0.188 44 / 0.12); } 16.67%, 100% { background: transparent; } }
@keyframes mc-passo-n { 0% { background: var(--mc-laranja); transform: scale(1.12); } 3.33% { transform: scale(1); } 14.17% { background: var(--mc-laranja); } 16.67%, 100% { background: var(--mc-tinta); transform: scale(1); } }

.mc-itens { display: grid; gap: 14px; margin-top: clamp(28px, 4vw, 56px); }
.mc-item { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; padding: 14px 18px 14px 14px; border-radius: 22px; background: var(--mc-creme);
  box-shadow: inset 0 0 0 1px oklch(0.3 0.03 50 / 0.07), 0 1px 1px -1px oklch(0.35 0.05 50 / 0.18), 0 6px 10px -6px oklch(0.35 0.05 50 / 0.14), 0 22px 40px -22px oklch(0.35 0.05 50 / 0.3); }
.mc-item svg { display: block; width: 100%; height: auto; }
.mc-item h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; color: var(--mc-tinta); }
.mc-item p { margin: 4px 0 0; font-family: var(--font-body); font-size: 15px; line-height: 1.45; font-weight: 450; color: var(--mc-apoio); }
@media (min-width: 900px) {
  .mc-corpo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .mc-itens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-item { grid-template-columns: 1fr; padding: 18px 22px 22px; }
  .mc-item svg { max-width: 200px; margin: 0 auto; }
}

/* ── o ciclo ── */
.mc-ponto { fill: var(--mc-laranja); offset-path: path("M 480 160 A 345 345 0 1 1 480 850 A 345 345 0 1 1 480 160"); offset-rotate: 0deg; animation: mc-volta 13.2s linear infinite; }
.mc-ponto-luz { fill: oklch(0.655 0.188 44 / 0.22); offset-path: path("M 480 160 A 345 345 0 1 1 480 850 A 345 345 0 1 1 480 160"); offset-rotate: 0deg; animation: mc-volta 13.2s linear infinite; }
@keyframes mc-volta { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.mc-no { animation: mc-ativo 13.2s linear infinite; }
@keyframes mc-ativo { 0% { transform: scale(1); } 3.00% { transform: scale(1.1); } 6.67% { transform: scale(1.06); } 16.67%, 100% { transform: scale(1); } }
.mc-anel { fill: none; stroke: var(--mc-laranja); stroke-width: 5; opacity: 0; animation: mc-anel 13.2s linear infinite; }
@keyframes mc-anel { 0% { opacity: 0; } 2.00% { opacity: 1; } 14.17% { opacity: 1; } 16.67%, 100% { opacity: 0; } }
.mc-rotulo-fundo { fill: var(--mc-tinta); animation: mc-rotulo 13.2s linear infinite; }
.mc-rotulo-num { fill: var(--mc-laranja); }
@keyframes mc-rotulo { 0% { fill: var(--mc-laranja); } 14.17% { fill: var(--mc-laranja); } 16.67%, 100% { fill: var(--mc-tinta); } }
.mc-seta { opacity: 0.35; animation: mc-seta 13.2s linear infinite; }
@keyframes mc-seta { 0% { opacity: 1; } 26.67% { opacity: 1; } 33.33%, 100% { opacity: 0.35; } }
.mc-tracejado { animation: mc-roda 40s linear infinite; }
@keyframes mc-roda { to { transform: rotate(360deg); } }
/* o que cada estação faz */
.mc-balanca { transform-box: fill-box; transform-origin: 50% 100%; animation: mc-balanca 3.2s ease-in-out infinite alternate; }
@keyframes mc-balanca { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.mc-cristal { animation: mc-brilha 1.4s ease-in-out infinite alternate; }
@keyframes mc-brilha { from { opacity: 0.35; } to { opacity: 1; } }
.mc-bolha { animation: mc-sobe 1.8s linear infinite; }
@keyframes mc-sobe { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-46px); opacity: 0; } }
.mc-grao { animation: mc-pula 1.1s ease-in-out infinite alternate; }
@keyframes mc-pula { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.mc-pendulo { transform-origin: 0 -70px; animation: mc-pendulo 2.4s ease-in-out infinite alternate; }
@keyframes mc-pendulo { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.mc-forma { animation: mc-forma 13.2s linear infinite; animation-delay: 8.80s; }
@keyframes mc-forma { 0% { transform: scale(0.45); opacity: 0.4; } 5.83% { transform: scale(1.14); opacity: 1; } 10.00%, 100% { transform: scale(1); opacity: 1; } }
.mc-faisca { opacity: 0; animation: mc-faisca 13.2s linear infinite; animation-delay: 8.80s; }
@keyframes mc-faisca { 0%, 4.17% { opacity: 0; } 6.67% { opacity: 1; } 14.17%, 100% { opacity: 0; } }
.mc-gira { animation: mc-roda 6s linear infinite; }
/* os três itens */
.mi-ok { transform-box: fill-box; transform-origin: center; animation: mi-ok 2.6s var(--mc-curva) infinite; }
@keyframes mi-ok { 0%, 60% { transform: scale(1); } 70% { transform: scale(1.14); } 80%, 100% { transform: scale(1); } }
.mi-fatia { animation: mi-fatia 3s ease-in-out infinite alternate; }
@keyframes mi-fatia { from { transform: translate(-10px, 2px); } to { transform: translate(4px, -1px); } }
.mi-muda { transform-box: fill-box; transform-origin: 50% 100%; animation: mc-balanca 2.8s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .mc *, .mc *::before { animation-play-state: paused !important; }
}