/* Formulário Haiiro — fundo cinza, cartões claros, preto como destaque.
   A cor fica por conta das paletas e das miniaturas: o resto é neutro de
   propósito, para não competir com o que o cliente está escolhendo. */

:root{
  --bg:#e4e4e1;
  --bg-2:#d9d9d5;
  --card:#f3f3f0;
  --card-h:#f9f9f7;
  --linha:#cdcdc8;
  --linha-2:#b9b9b3;
  --tinta:#111112;
  --tinta-2:#4f4f4b;
  --mudo:#85857f;
  --erro:#b3261e;
  --ok:#1f7a4d;
  --raio:18px;
  --ease:cubic-bezier(.16,1,.3,1);
  --fonte:'DM Sans',Arial,sans-serif;
  --topo:64px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topo) + 16px)}
body{
  margin:0;min-height:100svh;
  background:
    radial-gradient(1200px 700px at 85% -10%,#efefec 0,transparent 60%),
    radial-gradient(900px 600px at -10% 110%,#d4d4d0 0,transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--tinta);font-family:var(--fonte);font-size:16px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
a{color:inherit}
h1,h2,p{margin:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
h2:focus,h2:focus-visible{outline:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mel{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
[hidden]{display:none!important}

/* ------------------------------------------------------------ topo */
.topo{
  position:sticky;top:0;z-index:20;height:var(--topo);
  display:flex;align-items:center;gap:24px;padding:0 max(16px,env(safe-area-inset-left));
  background:rgb(228 228 225 / .82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.marca svg{height:24px;width:auto;fill:var(--tinta)}
.marca span{font-size:12px;letter-spacing:.32em;text-transform:uppercase;font-weight:500}
.trilha{display:none;list-style:none;margin:0 auto;padding:0;gap:4px}
.trilha button{font-size:13px;color:var(--mudo);padding:8px 10px;border-radius:99px;display:flex;align-items:center;gap:7px;transition:color .3s,background .3s}
.trilha button::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35}
.trilha .feito button{color:var(--tinta-2)}
.trilha .feito button::before{opacity:1;background:var(--tinta-2)}
.trilha .agora button{color:var(--tinta);background:var(--card)}
.trilha .agora button::before{opacity:1;background:var(--tinta)}
.trilha button:not(:disabled):hover{color:var(--tinta)}
.trilha button:disabled{cursor:default}
.contador{margin-left:auto;font-size:13px;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.barra{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--linha)}
.barra i{position:absolute;inset:0;background:var(--tinta);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
body:not(.na-etapa) .barra{opacity:0}
@media (min-width:980px){
  body.na-etapa .trilha{display:flex}
  body.na-etapa .contador{margin-left:0}
}

/* ------------------------------------------------------------ palco */
.palco{max-width:860px;margin:0 auto;padding:32px 16px 150px}
body{overflow-x:clip}
.etapa{animation:entra-dir .7s var(--ease) both}
.etapa.vem-esq{animation-name:entra-esq}
@keyframes entra-dir{from{opacity:0;transform:translateX(28px)}}
@keyframes entra-esq{from{opacity:0;transform:translateX(-28px)}}
.etapa-num{font-size:13px;letter-spacing:.14em;color:var(--tinta);font-variant-numeric:tabular-nums;margin-bottom:18px}
.etapa-num span{color:var(--mudo)}
h1,h2{font-weight:500;letter-spacing:-.035em;line-height:1.02}
h1{font-size:clamp(42px,8.4vw,80px)}
h2{font-size:clamp(32px,5.6vw,52px);max-width:17ch}
.sub{margin-top:16px;font-size:clamp(16px,2vw,18px);color:var(--tinta-2);max-width:56ch;line-height:1.55}

/* ------------------------------------------------------------ abertura */
.abertura{display:grid;gap:40px;align-items:center;min-height:calc(100svh - var(--topo) - 80px);opacity:1;transform:none}
.selo{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--tinta-2);background:var(--card);border:1px solid var(--linha);padding:7px 14px 7px 11px;border-radius:99px;margin-bottom:26px}
.selo i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgb(31 122 77 / .15)}
.abertura-lista{list-style:none;margin:30px 0 34px;padding:0;display:grid;gap:2px;max-width:420px}
.abertura-lista li{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-top:1px solid var(--linha);font-size:16px}
.abertura-lista li:last-child{border-bottom:1px solid var(--linha)}
.abertura-lista b{font-size:12px;font-weight:500;color:var(--mudo);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.nota{margin-top:18px;font-size:14px;color:var(--tinta-2)}
.link{text-decoration:underline;text-underline-offset:3px;font-weight:500;color:var(--tinta)}

.pilulas{display:flex;flex-direction:column;align-items:center;justify-self:center;width:min(100%,340px);padding:10px 0 20px}
.pilulas i{
  display:block;width:100%;height:78px;border-radius:99px;background:var(--c);margin-top:-34px;
  box-shadow:0 18px 30px -12px rgb(0 0 0 / .35),inset 0 1px 0 rgb(255 255 255 / .12);
  opacity:0;transform:translateY(40px);
  animation:pilula .9s var(--ease) forwards;animation-delay:calc(.15s + var(--d) * .09s);
}
.pilulas i:first-child{margin-top:0}
.pilulas i:last-child{height:130px}
@keyframes pilula{to{opacity:1;transform:none}}
@media (min-width:860px){
  .abertura{grid-template-columns:1.25fr .9fr;gap:56px}
  .pilulas i{height:92px;margin-top:-40px}
  .pilulas i:last-child{height:150px}
}
@media (max-width:859px){
  .abertura{min-height:0}
  .abertura{gap:26px}
  .pilulas{order:-1;width:min(46%,170px);padding:0;justify-self:start}
  .pilulas i{height:30px;margin-top:-14px}
  .pilulas i:last-child{height:46px}
  .selo{margin-bottom:18px}
}
@media (max-width:600px){
  .abertura-lista{display:none}
  .abertura .btn{margin-top:28px;width:100%}
}

/* ------------------------------------------------------------ campos */
.campos{margin-top:30px;display:grid;gap:30px}
.campo{display:grid;gap:10px}
.rotulo{font-size:15px;font-weight:500;color:var(--tinta)}
.rotulo small{font-weight:400;color:var(--mudo);font-size:13px;margin-left:6px}
legend.rotulo{margin-bottom:10px}
.dica{font-size:13px;color:var(--mudo)}
.erro{font-size:13px;color:var(--erro);min-height:0}
.erro:empty{display:none}
.entrada{
  width:100%;background:var(--card);border:1px solid var(--linha);border-radius:14px;
  padding:15px 17px;font-size:17px;line-height:1.4;transition:border-color .2s,box-shadow .2s,background .2s;
  -webkit-appearance:none;appearance:none;
}
textarea.entrada{resize:vertical;min-height:96px}
.entrada::placeholder{color:#a3a39d}
.entrada:hover{border-color:var(--linha-2)}
.entrada:focus{outline:none;border-color:var(--tinta);background:var(--card-h);box-shadow:0 0 0 4px rgb(17 17 18 / .08)}
.com-erro .entrada{border-color:var(--erro);box-shadow:0 0 0 4px rgb(179 38 30 / .1)}
.entrada-outro{margin-top:4px;max-width:420px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:10px 16px;border-radius:99px;background:var(--card);border:1px solid var(--linha);
  font-size:15px;line-height:1.3;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease);
}
.chip:hover{border-color:var(--linha-2);background:var(--card-h)}
.chip:active{transform:scale(.97)}
.chip.on{background:var(--tinta);border-color:var(--tinta);color:#f4f4f1}

/* cartões selecionáveis */
.grade{display:grid;gap:12px}
.cartao{
  position:relative;display:flex;flex-direction:column;gap:10px;text-align:left;
  background:var(--card);border-radius:var(--raio);padding:8px 8px 12px;
  box-shadow:inset 0 0 0 1px var(--linha);transition:box-shadow .25s,transform .35s var(--ease),background .2s;
}
.cartao:hover{background:var(--card-h);transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--linha-2),0 14px 30px -18px rgb(0 0 0 / .35)}
.cartao.on{box-shadow:inset 0 0 0 2px var(--tinta),0 14px 30px -18px rgb(0 0 0 / .4)}
.cartao-txt{display:grid;gap:2px;padding:0 6px}
.cartao-txt b{font-weight:500;font-size:15px;line-height:1.25}
.cartao-txt small{font-size:13px;color:var(--tinta-2);line-height:1.4}
.visto{
  position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;
  background:var(--tinta);opacity:0;transform:scale(.4);transition:opacity .2s,transform .35s var(--ease);
  box-shadow:0 0 0 3px rgb(255 255 255 / .9);
}
.visto::after{content:"";position:absolute;left:9px;top:5px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cartao.on .visto{opacity:1;transform:none}

.grade-estilos{grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.grade-estilos{grid-template-columns:repeat(3,1fr);gap:14px}}
@media (max-width:420px){.estilo .cartao-txt small{display:none}}

.grade-paletas{grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){.grade-paletas{grid-template-columns:repeat(3,1fr)}}
@media (min-width:800px){.grade-paletas{grid-template-columns:repeat(4,1fr)}}

.grade-fontes{grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.grade-fontes{grid-template-columns:repeat(3,1fr)}}

/* ---------- paleta em pílulas empilhadas (como nas referências) */
.paleta-fundo{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1.08;border-radius:12px;overflow:hidden;container-type:inline-size}
.paleta-pilulas{display:flex;flex-direction:column;align-items:center;width:100%}
.paleta-pilulas i{
  display:block;width:70cqw;height:18cqw;border-radius:99px;background:var(--c);margin-top:-8.5cqw;
  box-shadow:0 3cqw 5cqw -1.5cqw rgb(0 0 0 / .45),inset 0 1px 0 rgb(255 255 255 / .1);
  transition:margin .45s var(--ease);
}
.paleta-pilulas i:first-child{margin-top:0}
.paleta-pilulas i:last-child{height:24cqw}
.paleta:hover .paleta-pilulas i:not(:first-child),.paleta.on .paleta-pilulas i:not(:first-child){margin-top:-6.5cqw}

/* ---------- fontes */
.fonte-amostra{
  display:flex;align-items:center;justify-content:center;text-align:center;min-height:96px;padding:12px;
  background:var(--bg);border-radius:12px;font-size:clamp(22px,4.4vw,28px);line-height:1.1;overflow:hidden;word-break:break-word;
}
.fonte[data-item="forte"] .fonte-amostra{text-transform:uppercase;letter-spacing:.01em}
.fonte[data-item="manuscrita"] .fonte-amostra{font-size:clamp(28px,5.4vw,36px)}

/* ---------- cores da marca */
.alternar{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:500;justify-self:start;padding:6px 0}
.caixa{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--linha-2);background:var(--card);position:relative;transition:background .2s,border-color .2s}
.alternar.on .caixa{background:var(--tinta);border-color:var(--tinta)}
.alternar.on .caixa::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cores{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cores .dica{flex-basis:100%}
.cor{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:7px 14px 7px 7px;cursor:pointer;font-size:14px;font-variant-numeric:tabular-nums}
.cor input{width:40px;height:40px;border:0;padding:0;border-radius:10px;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.cor input::-webkit-color-swatch-wrapper{padding:0}
.cor input::-webkit-color-swatch{border:1px solid rgb(0 0 0 / .12);border-radius:10px}
.cor input::-moz-color-swatch{border:1px solid rgb(0 0 0 / .12);border-radius:10px}
.cor input[data-vazio]{opacity:.35}

/* ---------- réguas de personalidade */
.regua{padding:14px 0 6px;border-top:1px solid var(--linha)}
.regua:first-child{border-top:0;padding-top:0}
.regua-rot{display:flex;justify-content:space-between;font-size:15px;font-weight:500;margin-bottom:10px}
.regua input{
  --v:50%;width:100%;height:30px;margin:0;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.regua input::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--tinta) var(--v),var(--linha) var(--v))}
.regua input::-moz-range-track{height:6px;border-radius:99px;background:var(--linha)}
.regua input::-moz-range-progress{height:6px;border-radius:99px;background:var(--tinta)}
.regua input::-webkit-slider-thumb{
  -webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;
  background:#fff;border:2px solid var(--tinta);box-shadow:0 4px 10px -2px rgb(0 0 0 / .3);transition:transform .2s var(--ease)
}
.regua input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--tinta);box-shadow:0 4px 10px -2px rgb(0 0 0 / .3)}
.regua input:active::-webkit-slider-thumb{transform:scale(1.12)}
.regua input[data-intocado]::-webkit-slider-runnable-track{background:var(--linha)}
.regua input[data-intocado]::-moz-range-progress{background:transparent}
.regua input[data-intocado]::-webkit-slider-thumb{border-color:var(--mudo)}

/* ---------- revisão */
.resumo{margin-top:28px;display:grid;gap:10px}
@media (min-width:700px){.resumo{grid-template-columns:1fr 1fr}}
.resumo-bloco{background:var(--card);border-radius:16px;padding:16px 18px;box-shadow:inset 0 0 0 1px var(--linha)}
.resumo-topo{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.resumo-topo b{font-weight:500;font-size:15px}
.resumo-topo button{font-size:13px;color:var(--tinta-2);text-decoration:underline;text-underline-offset:3px;padding:4px 0 4px 12px}
.resumo-topo button:hover{color:var(--tinta)}
.resumo dl{margin:0;display:grid;gap:8px}
.resumo-item dt{font-size:12px;color:var(--mudo)}
.resumo-item dd{margin:0;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.resumo .vazio{font-size:14px;color:var(--mudo)}
.tira{display:flex;height:14px;border-radius:99px;overflow:hidden;margin-top:6px;max-width:220px}
.tira i{flex:1}

/* ------------------------------------------------------------ rodapé */
.rodape{
  position:fixed;left:0;right:0;bottom:0;z-index:15;
  display:flex;justify-content:space-between;gap:12px;
  padding:26px max(16px,calc((100% - 860px) / 2 + 16px)) calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgb(228 228 225 / 0),rgb(228 228 225 / .92) 38%,var(--bg));
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:99px;
  font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap;
  transition:transform .35s var(--ease),background .2s,box-shadow .3s,opacity .2s;
}
.btn span{transition:transform .35s var(--ease)}
.btn-cheio{background:var(--tinta);color:#f4f4f1;box-shadow:0 12px 26px -12px rgb(0 0 0 / .55)}
.btn-cheio:hover{transform:translateY(-2px);box-shadow:0 18px 30px -12px rgb(0 0 0 / .55)}
.btn-cheio:hover span{transform:translateX(3px)}
.btn-cheio:disabled{opacity:.7;cursor:progress;transform:none}
.btn-vazio{background:transparent;box-shadow:inset 0 0 0 1px var(--linha-2)}
.btn-vazio:hover{background:var(--card)}
.btn-vazio:hover span{transform:translateX(-3px)}
.rodape .btn-cheio{flex:1;max-width:320px;margin-left:auto}
@media (max-width:420px){.rodape .btn-vazio{padding:0 18px}}

.gira{width:16px;height:16px;border-radius:50%;border:2px solid rgb(255 255 255 / .35);border-top-color:#fff;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

.tremer{animation:tremer .45s}
@keyframes tremer{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

/* ------------------------------------------------------------ fim */
.fim{text-align:center;display:flex;flex-direction:column;align-items:center;padding-top:8vh}
.fim h2{margin:0 auto}
.fim .sub{margin:16px auto 0}
.fim-marca{width:84px;height:84px;border-radius:50%;background:var(--tinta);display:grid;place-items:center;margin-bottom:28px;color:#fff;font-size:40px;font-weight:500;box-shadow:0 20px 40px -18px rgb(0 0 0 / .6)}
.fim-marca svg{width:40px;height:40px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:risca .7s .35s var(--ease) forwards}
@keyframes risca{to{stroke-dashoffset:0}}
.fim-aviso{background:#8a5a12}
.ref{margin-top:20px;font-size:14px;color:var(--tinta-2);background:var(--card);border:1px solid var(--linha);border-radius:99px;padding:8px 16px}
.ref b{font-weight:600;letter-spacing:.04em;color:var(--tinta)}
.fim-acoes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
@media (max-width:520px){.fim-acoes{flex-direction:column;align-self:stretch}.fim-acoes .btn{width:100%}}

/* ------------------------------------------------------------ miniaturas de estilo
   Tudo em cqw: a miniatura encolhe inteira, igual a um print. */
.mk{
  display:flex;flex-direction:column;aspect-ratio:4/3.1;border-radius:12px;overflow:hidden;
  padding:6% 6.5%;container-type:inline-size;position:relative;
}
.mk *{display:block}
.mk > * + *{margin-top:5cqw}
.mk-nav{display:flex;align-items:center;gap:3cqw}
.mk-nav i{width:6cqw;height:6cqw;border-radius:50%;background:currentColor}
.mk-nav s{width:8cqw;height:1.6cqw;border-radius:9px;background:currentColor;opacity:.35;text-decoration:none}
.mk-nav s:first-of-type{margin-left:auto}
.mk-hero{display:flex;gap:5cqw;flex:1;min-height:0}
.mk-txt{flex:1.35;display:flex;flex-direction:column;gap:2.4cqw;justify-content:center}
.mk-txt b{font-size:8.6cqw;line-height:1;letter-spacing:-.02em;font-weight:500}
.mk-txt em{height:1.7cqw;border-radius:9px;background:currentColor;opacity:.22;width:92%}
.mk-txt em + em{width:66%}
.mk-txt u{align-self:flex-start;text-decoration:none;font-size:3.4cqw;padding:1.8cqw 3.6cqw;border-radius:99px;margin-top:1.4cqw;font-weight:500}
.mk-img{flex:1;border-radius:3cqw}
.mk-cards{display:flex;gap:3cqw;height:9cqw}
.mk-cards i{flex:1;border-radius:2cqw}

.mk-minimalista{background:#fbfbf9;color:#161616;font-family:'DM Sans',sans-serif}
.mk-minimalista .mk-txt b{font-weight:400;letter-spacing:-.04em}
.mk-minimalista .mk-txt u{box-shadow:inset 0 0 0 1px #161616;border-radius:0}
.mk-minimalista .mk-img{background:#ececE8;border-radius:0}
.mk-minimalista .mk-cards i{background:#f0f0ec}

.mk-elegante{background:#0f0f10;color:#e9dfc7;font-family:'Playfair Display',serif}
.mk-elegante .mk-nav i{border-radius:0;transform:rotate(45deg) scale(.7);background:#c9a86a}
.mk-elegante .mk-txt b{font-style:italic;font-weight:500}
.mk-elegante .mk-txt u{box-shadow:inset 0 0 0 1px #c9a86a;color:#c9a86a;border-radius:0;font-family:'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;font-size:2.6cqw}
.mk-elegante .mk-img{background:linear-gradient(160deg,#3b3122,#16130e 70%);border-radius:40cqw 40cqw 0 0;border:1px solid #c9a86a55}
.mk-elegante .mk-cards i{background:#1a1a1b;border-top:1px solid #c9a86a}

.mk-moderno{background:radial-gradient(60cqw 50cqw at 80% 20%,#5b2eff66,transparent 70%),radial-gradient(50cqw 40cqw at 10% 100%,#00d4ff44,transparent 70%),#0b0d1a;color:#fff;font-family:'Space Grotesk',sans-serif}
.mk-moderno .mk-nav i{border-radius:1.6cqw;background:linear-gradient(135deg,#7c5cff,#00d4ff)}
.mk-moderno .mk-txt b{font-weight:700}
.mk-moderno .mk-txt u{background:linear-gradient(90deg,#7c5cff,#00d4ff);color:#fff}
.mk-moderno .mk-img{background:linear-gradient(145deg,rgb(255 255 255 / .16),rgb(255 255 255 / .03));border:1px solid rgb(255 255 255 / .18);border-radius:4cqw}
.mk-moderno .mk-cards i{background:rgb(255 255 255 / .07);border:1px solid rgb(255 255 255 / .1);border-radius:3cqw}

.mk-ousado{background:#ffe600;color:#111;font-family:'Anton',sans-serif}
.mk-ousado .mk-txt b{font-size:14cqw;text-transform:uppercase;letter-spacing:0;font-weight:400;line-height:.9}
.mk-ousado .mk-txt em{opacity:.85;height:1.5cqw}
.mk-ousado .mk-txt u{background:#111;color:#ffe600;border-radius:0;font-family:'DM Sans',sans-serif;font-weight:600;text-transform:uppercase}
.mk-ousado .mk-img{background:#111;border-radius:0;clip-path:polygon(12% 0,100% 0,88% 100%,0 100%)}
.mk-ousado .mk-cards i{background:#111;border-radius:0}

.mk-organico{background:#efe6d8;color:#4a3524;font-family:'Fraunces',serif}
.mk-organico .mk-txt b{font-size:7.6cqw;font-weight:500}
.mk-organico .mk-txt em{background:#bca88c;opacity:.6}
.mk-organico .mk-txt u{background:#6f7f52;color:#fff;font-family:'DM Sans',sans-serif}
.mk-organico .mk-img{background:linear-gradient(180deg,#d7b48d,#b68860);border-radius:40cqw 40cqw 4cqw 4cqw}
.mk-organico .mk-cards i{background:#e2d4bf;border-radius:99px}

.mk-divertido{background:#fff4e8;color:#2b1f5c;font-family:'Space Grotesk',sans-serif}
.mk-divertido .mk-nav i{background:#ff5c8a}
.mk-divertido .mk-txt b{font-weight:700;font-size:8cqw}
.mk-divertido .mk-txt em{background:#2b1f5c}
.mk-divertido .mk-txt u{background:#ff5c8a;color:#fff;transform:rotate(-3deg);font-weight:700}
.mk-divertido .mk-img{background:#7c5cff;border-radius:42% 58% 55% 45% / 50% 40% 60% 50%;box-shadow:3cqw 3cqw 0 #ffd23f}
.mk-divertido .mk-cards i:nth-child(1){background:#ffd23f}
.mk-divertido .mk-cards i:nth-child(2){background:#3ddc97}
.mk-divertido .mk-cards i:nth-child(3){background:#4cc9f0}

/* ------------------------------------------------------------ movimento reduzido */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .etapa{transform:none!important}
}