/* =====================================================================
   FORMULARIO DE CALIFICACIÓN · MULTICONSULTORÍAS
   Layout: una tarjeta centrada (máx. 540px), barra de progreso arriba,
   una pregunta por pantalla, avance automático al tocar una respuesta.
   Diseño Glass (vidrio claro), anillo de progreso, pensado para celular.
   ===================================================================== */

/* --- Solo vista previa: fondo de la página. Al pegarlo en tu landing puedes borrar estas 3 líneas. --- */
:root{color-scheme:light}
body{background:#E7E1D8;margin:0}

.mc-app{
  --f-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-impact:'Montserrat', 'Arial Black', Arial, sans-serif;
  --f-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  position:relative; isolation:isolate; min-height:100svh; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding-block:24px 48px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  background:var(--bg); color:var(--fg); font-family:var(--f-body);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow:hidden;
}
.mc-app *, .mc-app *::before, .mc-app *::after{box-sizing:border-box}
.mc-app [hidden]{display:none !important}

/* ---------- Colores y vidrio ---------- */
.mc-app{
  --bg:#E7E1D8; --deep:#064D35; --accent:#00A86B; --mint:#A7E8C5; --fg:#10241B;
  --brand-accent:#00895A;
  --muted:rgba(16,36,27,.68); --soft:rgba(16,36,27,.50);
  --card-bg:rgba(255,255,255,.56);
  --card-border:rgba(255,255,255,.75);
  --card-shadow:0 30px 70px rgba(45,55,45,.18), inset 0 1px 0 rgba(255,255,255,.85);
  --tile-bg:rgba(255,255,255,.48); --tile-border:rgba(255,255,255,.85); --tile-border-strong:rgba(16,36,27,.28);
  --tile-hover:rgba(255,255,255,.75); --tile-sel:rgba(0,168,107,.13); --sel-shadow:0 10px 26px rgba(6,77,53,.14);
  --icon-bg:rgba(0,168,107,.13); --icon-fg:#064D35;
  --track:rgba(16,36,27,.09); --track-strong:rgba(16,36,27,.16);
  --input-bg:rgba(255,255,255,.66);
  --chip-bg:rgba(255,255,255,.55); --chip-border:rgba(255,255,255,.9);
  --btn-bg:linear-gradient(135deg,#0B6446 0%,#064D35 100%); --btn-fg:#FFFFFF;
  --btn-shadow:0 14px 30px rgba(6,77,53,.30);
  --glow:none;
  --metal:linear-gradient(100deg,#064D35 0%,#00A86B 45%,#2BC48A 55%,#064D35 100%);
  --err:#B3261E;
  color-scheme:light;
}

/* ---------- Fondo ---------- */
.mc-bg{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.mc-bg{background:
  radial-gradient(38% 32% at 18% 18%, rgba(167,232,197,.95), transparent 70%),
  radial-gradient(42% 36% at 88% 20%, rgba(242,217,191,.95), transparent 72%),
  radial-gradient(48% 42% at 72% 92%, rgba(0,168,107,.40), transparent 72%),
  radial-gradient(40% 40% at 8% 92%, rgba(214,196,172,.9), transparent 70%),
  #E7E1D8}
.mc-bg::after{content:""; position:absolute; width:440px; height:440px; right:-90px; top:30%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,168,107,.30), transparent)}


/* ---------- Tarjeta ---------- */
.mc-card{position:relative; width:100%; max-width:540px; border-radius:28px; background:var(--card-bg); border:1px solid var(--card-border); box-shadow:var(--card-shadow);
  padding:22px 20px 16px; display:flex; flex-direction:column; gap:18px}
@media (min-width:480px){.mc-card{padding:28px 30px 20px}}

.mc-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.mc-brand{display:flex; align-items:center; gap:10px; min-width:0}
.mc-logo{width:34px; height:34px; flex:none}
.mc-logo-img{height:34px; width:auto; flex:none}
.mc-word{font:800 18px/1 var(--f-impact); letter-spacing:-.2px; white-space:nowrap}
.mc-word b{font-weight:800; color:var(--brand-accent)}
.mc-safe{display:inline-flex; align-items:center; gap:6px; font:700 10.5px/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:7px 10px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--chip-border); white-space:nowrap}
.mc-safe svg{width:13px; height:13px; color:var(--brand-accent)}
@media (max-width:400px){.mc-safe span{display:none}}
.mc-form{flex:1 1 auto}
/* Celular: la tarjeta ocupa casi toda la pantalla */
@media (max-width:560px){
  .mc-app{padding-block:8px; gap:0;
    padding-left:max(8px, env(safe-area-inset-left, 0px)); padding-right:max(8px, env(safe-area-inset-right, 0px))}
  .mc-card{min-height:calc(100svh - 16px); border-radius:24px; padding:16px 16px 10px; gap:14px}
  .mc-step{gap:12px}
  .mc-h .num{font-size:clamp(60px, 18vw, 84px)}
  .mc-h .ser{font-size:clamp(38px, 10.5vw, 52px)}
  .mc-opt{min-height:70px; padding:12px}
  .mc-txt strong{font-size:16px}
  .mc-safe{display:none}
}
@media (max-width:360px){ .mc-tag{display:none} .mc-logo-img{height:40px} }

/* ---------- Progreso ---------- */
.mc-prog{display:flex; flex-direction:column; gap:9px}
.mc-prog-row{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; font:500 13px/1.25 var(--f-body); color:var(--muted)}
.mc-prog-row strong{color:var(--fg); font-weight:700}
.mc-inline{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.mc-inline svg{width:14px; height:14px; color:var(--brand-accent)}
.mc-track{position:relative; height:10px; border-radius:999px; background:var(--track); overflow:hidden}
.mc-fill{position:absolute; inset:0 auto 0 0; width:4%; border-radius:inherit; overflow:hidden;
  background:linear-gradient(90deg, var(--deep), var(--accent) 60%, var(--mint)); box-shadow:var(--glow); transition:width .7s var(--ease)}
.mc-fill::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  background-size:40% 100%; background-repeat:no-repeat; animation:mc-shine 2.6s ease-in-out infinite}
.mc-app .mc-fill{background:#00A86B}
.mc-app .mc-fill::before{content:""; position:absolute; right:0; top:0; bottom:0; width:26px;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.6) 0 3px, transparent 3px 7px)}
@keyframes mc-shine{0%{background-position:-150% 0}100%{background-position:250% 0}}
.mc-ring{display:none; position:relative; width:60px; height:60px; flex:none}
.mc-app .mc-ring{display:block}
.mc-ring svg{width:60px; height:60px; rotate:-90deg}
.mc-ring circle{fill:none; stroke-width:6}
.mc-ring .bg{stroke:var(--track)}
.mc-ring .fg{stroke:#00A86B; stroke-linecap:round; transition:stroke-dashoffset .7s var(--ease)}
.mc-ring span{position:absolute; inset:0; display:grid; place-items:center; font:800 14px/1 var(--f-impact); color:var(--fg); font-variant-numeric:tabular-nums}

/* ---------- Pasos ---------- */
.mc-form{margin:0}
.mc-step{display:flex; flex-direction:column; gap:14px}
.mc-step.is-in{animation:mc-in .5s var(--ease) both}
.mc-step.is-back{animation:mc-in-back .5s var(--ease) both}
@keyframes mc-in{from{opacity:0; transform:translateX(28px)}to{opacity:1; transform:none}}
@keyframes mc-in-back{from{opacity:0; transform:translateX(-28px)}to{opacity:1; transform:none}}
.mc-kicker{display:inline-flex; align-self:flex-start; align-items:center; gap:8px; margin:0; font:800 11px/1 var(--f-impact); letter-spacing:.16em; text-transform:uppercase; color:var(--brand-accent)}
.mc-kicker::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brand-accent); box-shadow:var(--glow)}
.mc-q{margin:0; font:italic 800 clamp(24px, 6.4vw, 30px)/1.14 var(--f-impact); letter-spacing:-.5px; text-wrap:balance; outline:none}
.mc-app .mc-q{font-style:normal; font-weight:700; letter-spacing:-.7px}
.mc-q em, .mc-h em, .mc-route em{font-family:var(--f-display); font-style:italic; font-weight:700; font-size:1.2em; letter-spacing:0; line-height:.9;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.08em}
.mc-help{margin:-4px 0 0; color:var(--muted); font-size:15px; text-wrap:pretty}

/* Opciones */
.mc-opts{display:grid; gap:10px}
.mc-opts.two{grid-template-columns:1fr 1fr}
.mc-opt{appearance:none; font:inherit; color:inherit; text-align:left; cursor:pointer; position:relative;
  display:flex; align-items:center; gap:14px; width:100%; min-height:64px; padding:12px 14px; border-radius:16px;
  background:var(--tile-bg); border:1px solid var(--tile-border);
  transition:transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s}
.mc-opt:hover{background:var(--tile-hover); transform:translateY(-2px)}
.mc-opt:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mc-opt[aria-pressed="true"]{background:var(--tile-sel); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset, var(--sel-shadow)}
.mc-step.is-in .mc-opt{animation:mc-rise .5s var(--ease) both; animation-delay:calc(var(--i, 0) * 55ms + 80ms)}
@keyframes mc-rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.mc-opts.two .mc-opt{flex-direction:column; align-items:flex-start; gap:12px; min-height:118px; padding:16px}
.mc-opts.two .mc-tick{position:absolute; top:12px; right:12px}
.mc-ico{flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--icon-bg); color:var(--icon-fg)}
.mc-ico svg{width:22px; height:22px}
.mc-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.mc-txt strong{font:700 15.5px/1.25 var(--f-impact)}
.mc-txt small{font-size:13px; line-height:1.35; color:var(--muted)}
.mc-tick{flex:none; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--tile-border-strong); display:grid; place-items:center; transition:background .25s, border-color .25s}
.mc-tick svg{width:14px; height:14px; color:#FFFFFF; opacity:0; transform:scale(.4); transition:opacity .3s var(--ease), transform .3s var(--ease)}
.mc-opt[aria-pressed="true"] .mc-tick{background:var(--accent); border-color:var(--accent)}
.mc-opt[aria-pressed="true"] .mc-tick svg{opacity:1; transform:none}
/* Medidor de montos */
.mc-meter{flex:none; width:42px; height:42px; border-radius:12px; background:var(--icon-bg); display:flex; align-items:flex-end; justify-content:center; gap:3px; padding:9px 8px}
.mc-meter i{width:5px; border-radius:2px; background:var(--track-strong)}
.mc-meter i:nth-child(1){height:30%} .mc-meter i:nth-child(2){height:55%} .mc-meter i:nth-child(3){height:78%} .mc-meter i:nth-child(4){height:100%}
.mc-meter i.on{background:var(--accent)}

/* Portada */
.mc-h{margin:0; display:flex; flex-direction:column; gap:2px; outline:none}
.mc-h .l1{font:italic 800 clamp(26px, 7vw, 34px)/1.05 var(--f-impact); letter-spacing:-.6px}
.mc-h .l2{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.mc-h .num{font:900 clamp(72px, 21vw, 108px)/.9 var(--f-impact); letter-spacing:-4px; font-variant-numeric:tabular-nums;
  background:var(--metal); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent}
.mc-h .ser{font:italic 700 clamp(42px, 11.5vw, 60px)/1 var(--f-display); color:var(--fg)}
.mc-h .l3{font:italic 800 clamp(21px, 5.8vw, 27px)/1.15 var(--f-impact); letter-spacing:-.4px; text-wrap:balance}
.mc-app .mc-h .l1, .mc-app .mc-h .l3{font-style:normal; font-weight:700; letter-spacing:-.8px}
.mc-reveal{display:block; animation:mc-reveal .9s var(--ease) both; animation-delay:var(--d, 0s)}
@keyframes mc-reveal{from{clip-path:inset(0 0 100% 0); transform:translateY(24px)}to{clip-path:inset(0 0 -20% 0); transform:none}}
@keyframes mc-metal{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.mc-trio{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px}
.mc-svc{display:flex; flex-direction:column; gap:8px; padding:12px 10px; border-radius:14px; background:var(--tile-bg); border:1px solid var(--tile-border); min-width:0}
.mc-svc .mc-ico{width:34px; height:34px; border-radius:10px}
.mc-svc .mc-ico svg{width:18px; height:18px}
.mc-svc strong{font:700 13px/1.2 var(--f-impact)}
.mc-svc small{font-size:11.5px; line-height:1.3; color:var(--muted)}
.mc-trust{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; font-size:12.5px; color:var(--muted)}
.mc-trust span{display:inline-flex; align-items:center; gap:6px}
.mc-trust svg{width:15px; height:15px; color:var(--brand-accent)}

/* Botones */
.mc-btn{appearance:none; border:0; cursor:pointer; text-decoration:none; position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:56px; padding:14px 22px; border-radius:999px;
  font:800 16px/1.1 var(--f-impact); letter-spacing:.01em; text-align:center; color:var(--btn-fg); background:var(--btn-bg); box-shadow:var(--btn-shadow);
  transition:transform .25s var(--ease), box-shadow .25s}
.mc-btn:hover{transform:translateY(-2px)}
.mc-btn:active{transform:scale(.99)}
.mc-btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.mc-btn svg{width:20px; height:20px; flex:none}
.mc-btn::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform:translateX(-120%); animation:none}
@keyframes mc-sweep{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.mc-btn.wa{background:linear-gradient(135deg, #25D366, #128C4A); color:#FFFFFF; box-shadow:0 14px 32px rgba(18,140,74,.38)}
.mc-btn.ghost{background:transparent; color:var(--fg); box-shadow:none; border:1px solid var(--tile-border-strong); font-weight:700; min-height:50px}
.mc-btn.ghost::after{display:none}
.mc-fine{margin:-4px 0 0; font-size:12.5px; color:var(--soft); text-align:center}

/* Opciones de la portada */
.mc-intro-opts .mc-opt{min-height:74px}
.mc-go{flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--icon-bg); color:var(--icon-fg); transition:transform .25s var(--ease), background .25s, color .25s}
.mc-go svg{width:16px; height:16px}
.mc-opt:hover .mc-go{transform:translateX(3px)}
.mc-opt[aria-pressed="true"] .mc-go{background:var(--accent); color:#FFFFFF}
.mc-link{appearance:none; background:none; border:0; cursor:pointer; align-self:center; margin-top:-4px; padding:6px 8px; border-radius:8px;
  font:600 14px/1.3 var(--f-body); color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.mc-link:hover{color:var(--fg)}
.mc-link:focus-visible{outline:2px solid var(--accent)}
.mc-hint{margin:-2px 0 2px; font-size:12.5px; line-height:1.4; color:var(--soft)}
.mc-consent-note{margin:2px 0 -4px}
/* Redirección */
.mc-redirect{display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-radius:14px; background:rgba(0,168,107,.10); border:1px solid rgba(0,168,107,.32)}
.mc-redirect-row{display:flex; align-items:center; gap:10px; font:700 14.5px/1.3 var(--f-impact)}
.mc-redirect-row svg{width:18px; height:18px; flex:none; color:var(--brand-accent)}
.mc-redirect .mc-track{height:6px}

/* Logo */
.mc-logo-img{height:50px; width:auto; flex:none; display:block}
.mc-word-wrap{display:flex; flex-direction:column; gap:3px; min-width:0}
.mc-word{font:800 16px/1.05 var(--f-impact)}
.mc-word b{color:var(--brand-accent)}
.mc-tag{font:500 11px/1.2 var(--f-body); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Botón principal destacado */
.mc-btn.mc-btn-hero{min-height:62px; font-size:17px; color:#04120B;
  background:linear-gradient(135deg,#2BE09B 0%,#00A86B 55%,#067A50 100%);
  box-shadow:0 16px 38px rgba(0,168,107,.45); animation:mc-pulse 2.2s ease-in-out 5}
@keyframes mc-pulse{0%,100%{box-shadow:0 16px 38px rgba(0,168,107,.45), 0 0 0 0 rgba(0,168,107,.40)}60%{box-shadow:0 16px 38px rgba(0,168,107,.55), 0 0 0 12px rgba(0,168,107,0)}}
.mc-btn.wa{min-height:62px; font-size:17px}
.mc-wa-img{width:28px; height:28px; flex:none}
.mc-redirect-row .mc-wa-img{width:30px; height:30px}

/* Contacto */
.mc-field-city{gap:4px}
.mc-field-city label{font-size:12px; color:var(--soft)}
.mc-field-city .mc-input{min-height:40px; padding:9px 13px; font-size:14px; border-radius:11px; background:transparent; border-color:var(--tile-border)}
.mc-redirect-note{margin:0; font-size:13.5px; line-height:1.4; color:var(--fg)}
.mc-fields{display:flex; flex-direction:column; gap:14px}
.mc-field{display:flex; flex-direction:column; gap:6px}
.mc-field label{font:600 13px/1.2 var(--f-body); color:var(--muted)}
.mc-field label small{font-weight:500; color:var(--soft)}
.mc-input{width:100%; min-height:52px; padding:14px 16px; border-radius:14px; border:1px solid var(--tile-border-strong); background:var(--input-bg); color:var(--fg);
  font:500 16px/1.2 var(--f-body); outline:none; transition:border-color .2s, box-shadow .2s}
.mc-input::placeholder{color:var(--soft)}
.mc-input:focus{border-color:var(--accent); box-shadow:0 0 0 4px rgba(0,168,107,.18)}
.mc-input[aria-invalid="true"]{border-color:var(--err)}
.mc-tel{display:flex; gap:8px}
.mc-tel select{flex:none; width:104px; padding-inline:12px; cursor:pointer}
.mc-tel input{flex:1; min-width:0}
.mc-err{margin:0; font-size:12.5px; color:var(--err)}
.mc-checks{display:flex; flex-direction:column; gap:12px}
.mc-check{display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.45; color:var(--muted); cursor:pointer}
.mc-check input{appearance:none; flex:none; width:22px; height:22px; margin:1px 0 0; border-radius:7px; border:1.5px solid var(--tile-border-strong); background:var(--input-bg); display:grid; place-items:center; cursor:pointer; transition:background .2s, border-color .2s}
.mc-check input:checked{background:var(--accent); border-color:var(--accent)}
.mc-check input:checked::after{content:""; width:6px; height:11px; border:solid #FFFFFF; border-width:0 2px 2px 0; transform:translate(0,-1px) rotate(45deg)}
.mc-check input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mc-check input[aria-invalid="true"]{border-color:var(--err)}
.mc-check a{color:var(--brand-accent); font-weight:600}

/* Resultado */
.mc-badge{width:72px; height:72px; border-radius:50%; display:grid; place-items:center; color:#FFFFFF;
  background:radial-gradient(circle at 30% 30%, var(--mint), var(--accent) 60%, var(--deep));
  box-shadow:0 0 0 8px rgba(0,168,107,.12), 0 18px 40px rgba(0,168,107,.35); animation:mc-pop .7s var(--ease) both}
.mc-badge svg{width:34px; height:34px}
@keyframes mc-pop{0%{transform:scale(.4); opacity:0}60%{transform:scale(1.08); opacity:1}100%{transform:scale(1)}}
.mc-route{margin:0; font:italic 800 clamp(26px, 7vw, 34px)/1.12 var(--f-impact); letter-spacing:-.5px; text-wrap:balance; outline:none}
.mc-app .mc-route{font-style:normal; font-weight:700}
.mc-lead{margin:0; font-size:17px; font-weight:600; line-height:1.4}
.mc-body{margin:0; font-size:15px; color:var(--muted); text-wrap:pretty}
.mc-notebox{margin:0; font-size:13.5px; padding:12px 14px; border-radius:12px; background:rgba(0,168,107,.10); border:1px solid rgba(0,168,107,.30)}
.mc-code{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:14px; background:var(--tile-bg); border:1px dashed var(--tile-border-strong)}
.mc-code small{display:block; font:700 10.5px/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--soft)}
.mc-code strong{display:block; margin-top:4px; font:800 20px/1.1 var(--f-impact); letter-spacing:.08em; font-variant-numeric:tabular-nums}
.mc-copy{appearance:none; flex:none; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--tile-border-strong); background:transparent; color:var(--fg); border-radius:999px; padding:9px 13px; font:600 12.5px/1 var(--f-body); cursor:pointer}
.mc-copy svg{width:14px; height:14px}
.mc-copy:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mc-chips{display:flex; flex-wrap:wrap; gap:6px}
.mc-chips span{font-size:12px; padding:6px 10px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--chip-border); color:var(--muted)}
.mc-actions{display:flex; flex-direction:column; gap:10px}

/* Pie */
.mc-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; padding-top:14px; border-top:1px solid var(--tile-border)}
.mc-back{white-space:nowrap; appearance:none; background:none; border:0; color:var(--muted); font:600 14px/1 var(--f-body); display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:8px 4px; border-radius:8px}
.mc-back:hover{color:var(--fg)}
.mc-back:focus-visible{outline:2px solid var(--accent)}
.mc-back svg{width:16px; height:16px}
.mc-legal{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--soft); text-align:right}
.mc-legal svg{width:13px; height:13px; flex:none}

@media (prefers-reduced-motion:reduce){
  .mc-app *, .mc-app *::before, .mc-app *::after{animation:none !important; transition:none !important}
}