/* =====================================================================
   metodologia-ciclo.css
   Componente "Nossa metodologia: um ciclo que se repete a cada aula"
   (notebook + celular cujas telas percorrem as 4 etapas da aula).
   Uso: <link rel="stylesheet" href="/css/metodologia-ciclo.css">
        <script src="/js/metodologia-ciclo.js" defer></script>
        <div class="mt-slot" data-lang="ingles"></div>
   Todas as regras usam o prefixo .mt- ; as variaveis da marca tem fallback.
   ===================================================================== */

.mt-slot{ display:block; }
.mt{
  --mt-dur:3.5s;
  margin:46px 0 4px; padding:34px 34px 30px; border-radius:26px; position:relative;
  background:linear-gradient(135deg,#F3F7FF 0%,#FFFFFF 55%,#F4FAF1 100%);
  border:1px solid #E1E8F6; box-shadow:0 24px 50px -38px rgba(32,61,131,.5);
}
.mt-head{ margin-bottom:26px; }
.mt-title{ font-family:"Poppins", Arial, sans-serif; font-size:26px; font-weight:800; line-height:1.22; color:var(--navy,#203D83); max-width:30ch; margin:0; }
.mt-body{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:36px; align-items:center; }

/* cores das etapas */
.mt-c0{ --c:#D6941A; --soft:#FFF6E0; --line:#F1D493; --ink:#8A6116; }
.mt-c1{ --c:#2F6FED; --soft:#EEF3FF; --line:#B9CDF8; --ink:#1E4FBE; }
.mt-c2{ --c:#5FB347; --soft:#EEF8EA; --line:#BFE0B4; --ink:#3F8F49; }
.mt-c3{ --c:#203D83; --soft:#ECEFF8; --line:#B8C3E2; --ink:#203D83; }

/* lista de etapas */
.mt-stages-wrap{ position:relative; padding-right:50px; }
.mt-stages{ list-style:none; margin:0; padding:0; display:grid; grid-auto-rows:1fr; gap:10px; }
.mt-stage{
  appearance:none; font:inherit; text-align:left; width:100%; height:100%; display:flex; align-items:center; gap:14px;
  padding:15px 18px; border-radius:16px; border:1.5px solid #E4EAF6; background:#fff; cursor:pointer; position:relative; overflow:hidden;
  color:var(--ink-main, #0B1830); transition:background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.mt-stage:focus-visible{ outline:3px solid var(--blue,#2F6FED); outline-offset:2px; }
.mt-badge{
  width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--soft); color:var(--ink);
  font:800 15px/1 "Poppins", Arial, sans-serif; transition:background .4s ease, color .4s ease, transform .4s ease;
}
.mt-stage-txt b{ display:block; font-size:15.5px; line-height:1.3; }
.mt-stage-bar{ position:absolute; left:0; right:0; bottom:0; height:3px; }
.mt-stage-bar i{ display:block; height:100%; background:var(--c); transform:scaleX(0); transform-origin:left; }
.mt-stage.is-active{ border-color:var(--c); background:var(--soft); box-shadow:0 12px 26px -16px var(--c); }
.mt-stage.is-active .mt-badge{ background:var(--c); color:#fff; transform:scale(1.08); animation:mt-pulse 1.7s ease-out infinite; }
.mt-stage.is-active .mt-stage-bar i{ transform:none; animation:mt-fill var(--mt-dur) linear both; }
@keyframes mt-fill{ from{ transform:scaleX(0); } }
@keyframes mt-pulse{ 0%{ box-shadow:0 0 0 0 var(--line); } 75%,100%{ box-shadow:0 0 0 11px transparent; } }

/* seta circular do ciclo */
.mt-loop{
  position:absolute; right:12px; width:26px; top:calc((100% - 30px) / 8); bottom:calc((100% - 30px) / 8);
  border:2px dashed #AEBCE0; border-left:0; border-radius:0 20px 20px 0; pointer-events:none; transition:border-color .4s ease;
}
.mt-loop::before{
  content:""; position:absolute; left:-9px; top:-7px; border-style:solid; border-width:6px 9px 6px 0; border-color:transparent #AEBCE0 transparent transparent;
  transition:border-color .4s ease;
}
.mt-loop-badge{
  position:absolute; right:-17px; top:50%; margin-top:-16px; width:32px; height:32px; border-radius:50%; background:#fff;
  border:2px solid #C8D4EE; display:grid; place-items:center; color:var(--navy,#203D83); transition:border-color .4s ease, color .4s ease;
}
.mt-loop-badge svg{ width:16px; height:16px; animation:mt-spin 6s linear infinite; }
@keyframes mt-spin{ to{ transform:rotate(360deg); } }
.mt[data-stage="3"] .mt-loop{ border-color:var(--blue,#2F6FED); }
.mt[data-stage="3"] .mt-loop::before{ border-right-color:var(--blue,#2F6FED); }
.mt[data-stage="3"] .mt-loop-badge{ border-color:var(--blue,#2F6FED); color:var(--blue,#2F6FED); }

/* ---------- aparelho ---------- */
.mt-device{ position:relative; padding:0 46px 24px 0; }
.mt-laptop{ position:relative; width:100%; max-width:580px; margin:0 auto; }
.mt-lid{
  position:relative; margin:0 3%; padding:10px 10px 12px; border-radius:16px 16px 6px 6px;
  background:linear-gradient(160deg,#1E2D50,#0B1830); box-shadow:inset 0 0 0 1.5px #2F4070, 0 30px 46px -30px rgba(11,24,48,.7);
}
.mt-cam{ position:absolute; top:4px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:#3A4C78; }
.mt-screen{ position:relative; aspect-ratio:16/10; container-type:inline-size; border-radius:5px; overflow:hidden; background:#fff; }
.mt-base{
  position:relative; height:13px; background:linear-gradient(#E3E8F4,#B7C2DA); border-radius:0 0 16px 16px;
  box-shadow:0 16px 22px -14px rgba(11,24,48,.55);
}
.mt-base::before{ content:""; position:absolute; top:0; left:50%; width:16%; height:5px; margin-left:-8%; background:#A3B0CC; border-radius:0 0 8px 8px; }

.mt-phone{
  position:absolute; right:0; bottom:0; width:104px; aspect-ratio:9/18.5; padding:5px; border-radius:22px; z-index:3;
  background:linear-gradient(160deg,#1E2D50,#0B1830); box-shadow:inset 0 0 0 1.5px #33456E, 0 22px 34px -16px rgba(11,24,48,.7);
}
.mt-notch{ position:absolute; top:9px; left:50%; width:30px; height:7px; margin-left:-15px; border-radius:6px; background:#0B1830; z-index:2; }
.mt-ph-scr{ position:relative; height:100%; border-radius:17px; overflow:hidden; background:#fff; }
.mt-ph-st{ position:absolute; top:6px; left:10px; right:10px; z-index:2; display:flex; justify-content:space-between; font-size:8px; font-weight:700; color:#33415C; }
.mt-ph-s{
  position:absolute; inset:0; padding:26px 8px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
  background:linear-gradient(180deg,var(--soft),#fff 75%); opacity:0; transform:scale(.94); transition:opacity .5s ease, transform .5s ease;
}
.mt-ph-s.is-on{ opacity:1; transform:none; }
.mt-ph-ic{ width:44px; height:44px; border-radius:14px; background:var(--c); color:#fff; display:grid; place-items:center; }
.mt-ph-ic svg{ width:22px; height:22px; }
.mt-ph-s.is-on .mt-ph-ic{ animation:mt-pulse 1.7s ease-out infinite; }
.mt-ph-s b{ font-size:12px; line-height:1.2; color:var(--ink); }
.mt-ph-s small{ font-size:9.5px; line-height:1.3; color:var(--text-soft,#5B6B8C); }

/* ---------- tela (tudo em em; 1em = 1/40 da largura da tela) ---------- */
.mt-scr{
  position:absolute; inset:0; font-size:2.5cqw; line-height:1.25; color:#0B1830; background:#fff;
  display:flex; flex-direction:column; font-family:Arial, Helvetica, sans-serif;
}
.mt-bar{
  flex:none; display:flex; align-items:center; gap:.7em; height:3.3em; padding:0 1.2em;
  background:#F3F6FC; border-bottom:.1em solid #E3E8F3;
}
.mt-logo{ width:1.9em; height:1.9em; border-radius:.55em; background:var(--navy,#203D83); color:#fff; font:800 1em/1.9em "Poppins", Arial, sans-serif; text-align:center; font-style:normal; }
.mt-bar-t{ font-size:.95em; color:#33415C; white-space:nowrap; }
.mt-scr .mt-flag{ width:2.2em; height:1.55em; border-radius:.3em; display:block; flex:none; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.mt-sp{ flex:1; }
.mt-dots{ display:flex; gap:.35em; }
.mt-dots i{ width:.7em; height:.7em; border-radius:1em; background:#CBD5EA; transition:width .4s ease, background .4s ease; }
.mt-dots i:nth-child(1){ --dc:#D6941A; } .mt-dots i:nth-child(2){ --dc:#2F6FED; } .mt-dots i:nth-child(3){ --dc:#5FB347; } .mt-dots i:nth-child(4){ --dc:#203D83; }
.mt-dots i.is-on{ width:1.8em; background:var(--dc); }
.mt-bar-lesson{ font-size:.8em; font-weight:700; color:var(--text-soft,#5B6B8C); white-space:nowrap; }
.mt-slides{ position:relative; flex:1; min-height:0; overflow:hidden; }
.mt-slide{
  position:absolute; inset:0; padding:1.2em 1.5em 1.3em; display:flex; flex-direction:column; opacity:0; transform:translateX(3em);
  transition:opacity .55s ease, transform .55s ease; pointer-events:none;
}
.mt-slide.is-on{ opacity:1; transform:none; }
.mt-slide.is-past{ transform:translateX(-3em); }
.mt-slide.dark{ background:linear-gradient(160deg,#122654,#0B1830); color:#fff; }
.mt-tagrow{ display:flex; align-items:center; gap:.7em; margin-bottom:.9em; flex:none; }
.mt-tag{ font-size:.75em; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.5em 1em; border-radius:99em; background:var(--c); color:#fff; white-space:nowrap; }
.mt-mut{ font-size:.8em; font-weight:700; color:var(--text-soft,#5B6B8C); white-space:nowrap; }
.mt-slide.dark .mt-mut{ color:#AFC2F2; }

/* etapa 1 */
.mt-warm{ flex:1; min-height:0; display:flex; gap:1.4em; align-items:stretch; }
.mt-fc{ flex:0 0 42%; perspective:60em; }
.mt-fc-in{ position:relative; width:100%; height:100%; transform-style:preserve-3d; }
.mt-slide.is-on .mt-fc-in{ animation:mt-flip var(--mt-dur) ease-in-out both; }
@keyframes mt-flip{ 0%,22%{ transform:rotateY(0); } 36%,100%{ transform:rotateY(180deg); } }
.mt-fc-f{
  position:absolute; inset:0; border-radius:1em; backface-visibility:hidden; background:#fff; border:.12em solid #F1D493;
  box-shadow:0 1em 1.6em -1.2em rgba(214,148,26,.7); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45em; text-align:center; padding:.5em;
}
.mt-fc-f.back{ transform:rotateY(180deg); background:linear-gradient(160deg,#FFF6E0,#fff); }
.mt-fc-f small{ font-size:.7em; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft,#5B6B8C); }
.mt-fc-f strong{ font:800 1.55em/1.15 "Poppins", Arial, sans-serif; color:var(--navy,#203D83); overflow-wrap:anywhere; }
.mt-fc-f em{ font-size:.7em; font-style:normal; color:#8A6116; font-weight:700; }
.mt-quiz{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:.6em; }
.mt-q{ font-weight:800; font-size:1em; margin-bottom:.15em; }
.mt-opt{
  display:flex; align-items:center; justify-content:space-between; gap:.5em; padding:.7em 1em; border-radius:.8em; border:.1em solid #DCE3F3; background:#fff;
  font-size:.92em; font-weight:700; color:#33415C;
}
.mt-opt svg{ width:1.3em; height:1.3em; flex:none; }
.mt-opt.ok{ border-color:#5FB347; background:#EAF7E5; color:#2F7A3A; }
.mt-slide.is-on .mt-opt.ok{ animation:mt-ok .45s ease 1.7s backwards; }
.mt-slide.is-on .mt-opt.ok svg{ animation:mt-pop .45s ease 1.8s backwards; }
@keyframes mt-ok{ from{ border-color:#DCE3F3; background:#fff; color:#33415C; } }
@keyframes mt-pop{ from{ opacity:0; transform:scale(.2); } }
.mt-prog{ width:8em; height:.55em; border-radius:1em; background:#F1D493; overflow:hidden; }
.mt-prog i{ display:block; width:40%; height:100%; background:#D6941A; border-radius:1em; }

/* etapa 2 */
.mt-live{ display:inline-flex; align-items:center; gap:.5em; background:#E0574B; color:#fff; font-size:.75em; font-weight:800; letter-spacing:.08em; padding:.5em 1em; border-radius:99em; }
.mt-live i{ width:.7em; height:.7em; border-radius:50%; background:#fff; }
.mt-slide.is-on .mt-live i{ animation:mt-blink 1s ease-in-out infinite; }
@keyframes mt-blink{ 50%{ opacity:.25; } }
.mt-tiles{ flex:1; min-height:0; display:grid; grid-template-columns:1.3fr 1fr; gap:.9em; }
.mt-tile{ position:relative; border-radius:.9em; overflow:hidden; background:linear-gradient(150deg,#31477F,#1B2B57); }
.mt-teacher{ background:linear-gradient(150deg,var(--t1,#203D83),var(--t2,#2F6FED)); }
.mt-slide.is-on .mt-teacher{ animation:mt-speak 1.3s ease-in-out infinite; }
@keyframes mt-speak{ 0%,100%{ box-shadow:inset 0 0 0 .18em rgba(156,206,141,0); } 50%{ box-shadow:inset 0 0 0 .18em rgba(156,206,141,.95); } }
.mt-avatar{ position:absolute; left:50%; bottom:0; width:58%; transform:translateX(-50%); fill:rgba(255,255,255,.3); }
.mt-student .mt-avatar{ fill:rgba(255,255,255,.2); }
.mt-teacher .mt-flagslot{ position:absolute; top:.7em; left:.7em; }
.mt-wave{ position:absolute; top:.7em; right:.7em; display:flex; gap:.22em; align-items:center; height:1.6em; }
.mt-wave i{ width:.28em; height:100%; background:#9CCE8D; border-radius:1em; transform:scaleY(.6); }
.mt-slide.is-on .mt-wave i{ animation:mt-bar .8s ease-in-out infinite alternate; }
.mt-wave i:nth-child(2){ animation-delay:.15s !important; } .mt-wave i:nth-child(3){ animation-delay:.3s !important; }
.mt-wave i:nth-child(4){ animation-delay:.1s !important; } .mt-wave i:nth-child(5){ animation-delay:.25s !important; } .mt-wave i:nth-child(6){ animation-delay:.05s !important; }
@keyframes mt-bar{ from{ transform:scaleY(.2); } to{ transform:scaleY(1); } }
.mt-cap{
  position:absolute; left:.7em; right:.7em; bottom:2.6em; background:rgba(11,24,48,.72); color:#fff; padding:.5em .8em; border-radius:.6em;
  font-size:.82em; font-weight:700; text-align:center;
}
.mt-nm{ position:absolute; left:.7em; bottom:.6em; font-size:.75em; font-weight:700; color:#fff; background:rgba(0,0,0,.35); padding:.3em .8em; border-radius:99em; }
.mt-ctrl{ flex:none; display:flex; justify-content:center; gap:.8em; margin-top:.8em; }
.mt-cb{ width:2.3em; height:2.3em; border-radius:50%; background:rgba(255,255,255,.14); display:grid; place-items:center; color:#fff; }
.mt-cb svg{ width:1.1em; height:1.1em; }
.mt-cb.end{ background:#E0574B; }

/* etapa 3 */
.mt-mic{ display:inline-flex; align-items:center; gap:.5em; font-size:.75em; font-weight:800; color:#3F8F49; background:#EAF7E5; border:.1em solid #BFE0B4; padding:.45em .9em; border-radius:99em; }
.mt-mic i{ width:.7em; height:.7em; border-radius:50%; background:#E0574B; }
.mt-slide.is-on .mt-mic i{ animation:mt-blink 1s ease-in-out infinite; }
.mt-slide.p3{ background:#F7F9FE; }
.mt-chat{ flex:1; min-height:0; display:flex; flex-direction:column; gap:.7em; overflow:hidden; }
.mt-msg{ max-width:80%; display:flex; flex-direction:column; gap:.25em; }
.mt-msg.me{ align-self:flex-end; align-items:flex-end; }
.mt-who{ font-size:.7em; font-weight:800; color:var(--text-soft,#5B6B8C); }
.mt-msg p{ padding:.65em .95em; border-radius:1em; font-size:.9em; line-height:1.35; font-weight:600; }
.mt-msg.me p{ background:var(--blue,#2F6FED); color:#fff; border-bottom-right-radius:.25em; }
.mt-msg.th p{ background:#fff; border:.1em solid #DCE3F3; border-bottom-left-radius:.25em; color:#0B1830; }
.mt-say{ flex:none; margin-top:.7em; display:flex; align-items:center; gap:.8em; padding:.6em .9em; border-radius:1em; background:#fff; border:.1em solid #BFE0B4; }
.mt-micico{ width:2.2em; height:2.2em; flex:none; border-radius:50%; background:#5FB347; color:#fff; display:grid; place-items:center; }
.mt-micico svg{ width:1.1em; height:1.1em; }
.mt-slide.is-on .mt-say .mt-micico{ animation:mt-micpulse 1.4s ease-out 2.4s infinite; }
@keyframes mt-micpulse{ 0%{ box-shadow:0 0 0 0 rgba(95,179,71,.55); } 75%,100%{ box-shadow:0 0 0 .7em rgba(95,179,71,0); } }
.mt-say div{ flex:1; min-width:0; }
.mt-say small{ display:block; font-size:.68em; font-weight:800; color:var(--text-soft,#5B6B8C); text-transform:uppercase; letter-spacing:.05em; }
.mt-say strong{ display:block; font-size:.92em; color:var(--navy,#203D83); line-height:1.25; }
.mt-say .mt-wave{ position:static; height:1.5em; flex:none; }
.mt-say .mt-wave i{ background:#5FB347; }
.mt-slide.is-on .mt-msg.me{ animation:mt-in .5s ease .3s backwards; }
.mt-slide.is-on .mt-msg.th{ animation:mt-in .5s ease 1.3s backwards; }
.mt-slide.is-on .mt-say{ animation:mt-in .5s ease 2.2s backwards; }
@keyframes mt-in{ from{ opacity:0; transform:translateY(.8em); } }

/* etapa 4 */
.mt-post{ flex:1; min-height:0; display:flex; gap:1em; }
.mt-card{ flex:1; min-width:0; background:#fff; border:.1em solid #E1E7F5; border-radius:1em; padding:.9em 1em; display:flex; flex-direction:column; gap:.7em; }
.mt-card h5{ margin:0; font-size:.78em; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--navy,#203D83); }
.mt-row{ display:flex; align-items:center; gap:.7em; font-size:.85em; font-weight:700; color:#33415C; }
.mt-box{ width:1.7em; height:1.7em; flex:none; border-radius:.45em; background:#5FB347; border:.12em solid #5FB347; display:grid; place-items:center; }
.mt-box svg{ width:1.15em; height:1.15em; }
.mt-box path{ stroke-dasharray:20; stroke-dashoffset:0; }
.mt-slide.is-on .mt-box{ animation:mt-box .3s ease var(--d,0s) backwards; }
.mt-slide.is-on .mt-box path{ animation:mt-draw .35s ease calc(var(--d,0s) + .15s) backwards; }
@keyframes mt-box{ from{ background:#fff; border-color:#C8D3EA; } }
@keyframes mt-draw{ from{ stroke-dashoffset:20; } }
.mt-skill{ display:grid; grid-template-columns:1fr auto; row-gap:.3em; font-size:.85em; font-weight:700; color:#33415C; }
.mt-skill b{ color:var(--sc); }
.mt-skill em{ grid-column:1 / 3; height:.6em; border-radius:1em; background:#E8EDF7; overflow:hidden; font-style:normal; }
.mt-skill em i{ display:block; height:100%; width:var(--w); background:var(--sc); border-radius:1em; }
.mt-slide.is-on .mt-skill em i{ animation:mt-grow 1s cubic-bezier(.2,.8,.2,1) var(--d,.2s) backwards; }
@keyframes mt-grow{ from{ width:0; } }

/* pausas: fora da tela ou com o mouse em cima */
.mt:not(.is-live) *, .mt:not(.is-live) *::before, .mt:not(.is-live) *::after,
.mt.is-paused *, .mt.is-paused *::before, .mt.is-paused *::after{ animation-play-state:paused !important; }

/* ---------- responsivo ---------- */
@media (max-width:960px){
  .mt-body{ grid-template-columns:1fr; gap:26px; }
  .mt-device{ max-width:640px; width:100%; margin:0 auto; }
  .mt-stages-wrap{ max-width:640px; margin:0 auto; width:100%; }
}
@media (max-width:560px){
  .mt{ margin:34px 0 0; padding:22px 14px 20px; border-radius:20px; }
  .mt-head{ margin-bottom:18px; }
  .mt-title{ font-size:21px; }
  .mt-device{ padding:0 0 4px; }
  .mt-phone{ display:none; }
  .mt-lid{ margin:0; padding:7px 7px 9px; border-radius:12px 12px 4px 4px; }
  .mt-screen{ aspect-ratio:4/3; }
  .mt-scr{ font-size:3.55cqw; }
  .mt-screen{ aspect-ratio:10/9; }
  .mt-stages-wrap{ padding-right:40px; }
  .mt-loop{ right:8px; width:22px; }
  .mt-stage{ padding:12px 12px; gap:11px; }
  .mt-badge{ width:30px; height:30px; font-size:14px; }
}

/* ---------- movimento reduzido: tudo estatico ---------- */
@media (prefers-reduced-motion: reduce){
  .mt *, .mt *::before, .mt *::after{ animation:none !important; transition:none !important; }
}