/* Ludário Match — visual moderno, clean e lúdico.
Tudo escopado em .lm- para não conflitar com o tema/Elementor. */
/* Blindagem: define um tamanho-base absoluto para os wrappers do plugin,
independente do tema. A partir daqui, 1rem = 16px DENTRO do plugin
mesmo que o tema force outro valor em . */
.lm-match,
.lm-quiz,
.lm-single,
.lm-single-page,
.lm-single-main,
.lm-tax-page,
.lm-minha,
.lm-guia,
.lm-inline {
font-size: 16px;
}
.lm-match,
.lm-single {
--lm-ink: #1f2430;
--lm-muted: #6b7280;
--lm-line: #ececf2;
--area: #64748b; /* fallback; cada card recebe sua cor via style inline */
font-family: "Inter", system-ui, sans-serif;
color: var(--lm-ink);
line-height: 1.55;
}
.lm-match * { box-sizing: border-box; }
.lm-eyebrow {
font-size: .72rem; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--lm-muted); margin: 0 0 16px;
}
/* chips ------------------------------------------------------------ */
.lm-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.lm-chip {
display: inline-flex; align-items: center; gap: 9px;
font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--lm-ink);
background: #fff; border: 2px solid var(--lm-line);
padding: 9px 17px; border-radius: 999px; cursor: pointer;
transition: transform .14s ease, box-shadow .14s ease, background .14s, border-color .14s, color .14s;
}
.lm-chip__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--area); flex: none; }
.lm-chip:hover, .lm-chip:focus { transform: translateY(-1px); border-color: var(--area); color: var(--area); background: color-mix(in srgb, var(--area) 8%, #fff); }
.lm-chip[aria-selected="true"],
.lm-chip[aria-selected="true"]:hover,
.lm-chip[aria-selected="true"]:focus {
background: var(--area); border-color: var(--area); color: #fff;
box-shadow: 0 10px 22px -10px var(--area);
}
.lm-chip[aria-selected="true"] .lm-chip__dot { background: rgba(255,255,255,.9); }
/* painel ----------------------------------------------------------- */
.lm-painel[hidden] { display: none; }
.lm-painel__resumo { color: var(--lm-muted); margin: 0 0 18px; font-size: 1.02rem; }
/* cards ------------------------------------------------------------ */
.lm-cards {
list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
}
.lm-card {
display: flex; flex-direction: column;
background:
linear-gradient(180deg, color-mix(in srgb, var(--area) 10%, #fff), #fff 62%);
border: 1.5px solid color-mix(in srgb, var(--area) 22%, var(--lm-line));
border-radius: 22px; padding: 20px 20px 22px;
box-shadow: 0 22px 38px -28px color-mix(in srgb, var(--area) 80%, #000);
transition: transform .16s ease, box-shadow .16s ease;
overflow: hidden;
}
.lm-card:hover { transform: translateY(-4px); box-shadow: 0 28px 44px -24px color-mix(in srgb, var(--area) 80%, #000); }
.lm-card__tag {
align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: color-mix(in srgb, var(--area) 72%, #000);
background: color-mix(in srgb, var(--area) 16%, #fff);
padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.lm-card__title { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 1.15rem; line-height: 1.18; margin: 0 0 8px; }
.lm-card__title a { color: var(--lm-ink); text-decoration: none; }
.lm-card__title a:hover { color: color-mix(in srgb, var(--area) 75%, #000); }
.lm-card__desc { font-size: .92rem; color: #444b57; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lm-card__meta { font-size: .78rem; color: var(--lm-muted); margin: 0 0 14px; }
.lm-card__cta {
align-self: flex-start; text-decoration: none;
background: var(--area); color: #fff; font-weight: 600; font-size: .9rem;
padding: 9px 15px; border-radius: 999px; border: none; cursor: pointer;
transition: filter .14s ease, transform .14s ease;
}
.lm-card__cta:hover { filter: brightness(.92); transform: translateY(-1px); }
.lm-card__cta--off { background: var(--lm-line); color: var(--lm-muted); cursor: not-allowed; }
.lm-card__aff { display: block; margin-top: 8px; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--lm-muted); }
.lm-empty { color: var(--lm-muted); font-style: italic; }
/* caixa na página do recurso -------------------------------------- */
.lm-single {
margin-top: 28px; padding: 20px; border-radius: 20px;
background: color-mix(in srgb, var(--area) 9%, #fff);
border: 1.5px solid color-mix(in srgb, var(--area) 24%, var(--lm-line));
}
.lm-match :focus-visible,
.lm-single :focus-visible { outline: 3px solid var(--area); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
.lm-chip, .lm-card, .lm-card__cta { transition: none; }
}
/* ---------------- imagem do card ---------------- */
.lm-card__media { margin: -20px -20px 16px; border-radius: 22px 22px 0 0; overflow: hidden; background: color-mix(in srgb, var(--area) 10%, #fff); }
.lm-card__media img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform .4s ease; }
.lm-card:hover .lm-card__media img { transform: scale(1.04); }
/* ---------------- quiz (recomendador) ---------------- */
.lm-quiz { font-family: "Inter", system-ui, sans-serif; color: #1f2430; width: 100%; }
.lm-quiz__inner {
background: #fff; border: 1.5px solid #ececf2; border-radius: 28px;
padding: 42px clamp(24px, 4vw, 56px);
box-shadow: 0 40px 80px -50px rgba(31,36,48,.45);
max-width: 100%;
}
.lm-quiz__progress { height: 7px; background: #eef0f5; border-radius: 999px; overflow: hidden; margin: 4px 0 22px; max-width: 320px; }
.lm-quiz__bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #FF7A59, #A855F7, #3B82F6); transition: width .3s ease; }
.lm-quiz__q { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; margin: 0 0 22px; }
.lm-opts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lm-opt {
--area: #64748B;
display: flex; align-items: center; gap: 12px; text-align: left;
font-family: inherit; font-size: 1.02rem; font-weight: 600; color: #1f2430;
background: color-mix(in srgb, var(--area) 7%, #fff);
border: 2px solid color-mix(in srgb, var(--area) 22%, #ececf2);
padding: 16px 18px; border-radius: 16px; cursor: pointer;
transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.lm-opt__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--area); flex: none; }
.lm-opt, .lm-opt:hover, .lm-opt:focus { color: #1f2430; }
.lm-opt .lm-opt__label, .lm-opt:hover .lm-opt__label { color: #1f2430; }
.lm-opt:hover { transform: translateY(-2px); border-color: var(--area); box-shadow: 0 16px 30px -20px var(--area); background: color-mix(in srgb, var(--area) 12%, #fff); }
.lm-opt--rich .lm-opt__label, .lm-opt--rich:hover .lm-opt__label { color: #1f2430 !important; }
.lm-opt--rich .lm-opt__sub, .lm-opt--rich:hover .lm-opt__sub { color: #6b7280 !important; }
.lm-quiz__nav { display: flex; gap: 18px; margin-top: 24px; }
.lm-quiz__link { background: none; border: none; cursor: pointer; font-family: inherit; font-size: .92rem; font-weight: 600; color: #6b7280; padding: 4px 2px; }
.lm-quiz__link:hover { color: #1f2430; }
.lm-quiz__rh { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 8px; }
.lm-quiz__resumo { color: #6b7280; margin: 0 0 18px; }
.lm-quiz .lm-cards { margin-top: 18px; }
@media (max-width: 600px) { .lm-quiz__inner { padding: 20px; } }
/* ---------------- selo de marketplace ---------------- */
.lm-card__shop {
display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
font-size: .72rem; font-weight: 700; letter-spacing: .01em;
padding: 5px 11px; border-radius: 999px; margin-bottom: 14px;
background: #f1f3f7; color: #3a4250; border: 1px solid #e4e7ee;
}
.lm-card__shop::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .7; }
.lm-shop--mercadolivre { background: #fff7d6; color: #8a6d00; border-color: #f3e08a; }
.lm-shop--amazon { background: #fef0e0; color: #9a4a00; border-color: #f6d2ad; }
/* ---------------- múltiplos botões de loja ---------------- */
.lm-card__ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.lm-card__cta--off { margin-top: auto; }
.lm-cta--mercadolivre { background: #FFE600; color: #2D3277; }
.lm-cta--amazon { background: #FF9900; color: #15212B; }
.lm-cta--shopee { background: #EE4D2D; color: #fff; }
.lm-cta--outra { background: var(--area); color: #fff; }
/* ---------------- aviso de afiliado (1x por seção) ---------------- */
.lm-disclosure {
font-size: .8rem; color: #6b7280; background: #f6f7f9;
border: 1px solid #ececf2; border-radius: 12px; padding: 9px 14px; margin: 0 0 18px;
}
/* ---------------- loading do quiz ---------------- */
.lm-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 0 50px; text-align: center; }
.lm-loading__ring {
width: 54px; height: 54px; border-radius: 50%;
border: 5px solid #eef0f5;
border-top-color: #FF7A59; border-right-color: #A855F7; border-bottom-color: #3B82F6;
animation: lm-spin .9s linear infinite;
}
.lm-loading__txt { font-family: "Fredoka", system-ui, sans-serif; font-weight: 500; font-size: 1.05rem; color: #1f2430; margin: 0; }
@keyframes lm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lm-loading__ring { animation-duration: 2.4s; } }
/* ---------------- lista por dropdown em 2 colunas ---------------- */
.lm-match--lista .lm-lista { display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: start; }
.lm-lista__menu { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 24px;
background: linear-gradient(160deg, #fff, #fafbff);
border: 1.5px solid #ececf2; border-radius: 22px; padding: 22px;
box-shadow: 0 22px 40px -32px rgba(31,36,48,.3);
}
.lm-select__label { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: #1f2430; margin-bottom: 4px; }
.lm-select {
font-family: "Inter", system-ui, sans-serif; font-size: 1rem; color: #1f2430;
background: #fff; border: 2px solid #ececf2; border-radius: 14px;
padding: 14px 44px 14px 16px; cursor: pointer; width: 100%;
appearance: none; -webkit-appearance: none; -moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
transition: border-color .14s ease, box-shadow .14s ease;
}
.lm-select:hover, .lm-select:focus { border-color: #1f2430; box-shadow: 0 8px 18px -12px rgba(31,36,48,.4); outline: none; }
.lm-painel__title { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 1.6rem; margin: 0 0 8px; letter-spacing: -.01em; }
@media (max-width: 820px) {
.lm-match--lista .lm-lista { grid-template-columns: 1fr; gap: 18px; }
.lm-lista__menu { position: static; }
}
/* ---------------- cards de profissão (moderno) ---------------- */
.lm-profs { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.lm-prof {
--area: #64748B;
display: flex; flex-direction: column; text-decoration: none; color: inherit;
background: #fff; border-radius: 28px; overflow: hidden;
border: 1.5px solid color-mix(in srgb, var(--area) 18%, #ececf2);
box-shadow: 0 30px 50px -38px color-mix(in srgb, var(--area) 80%, #000);
transition: transform .2s ease, box-shadow .2s ease;
position: relative;
}
.lm-prof::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(135deg, transparent 60%, color-mix(in srgb, var(--area) 10%, transparent));
opacity: 0; transition: opacity .25s ease;
}
.lm-prof:hover { transform: translateY(-6px); box-shadow: 0 40px 60px -32px color-mix(in srgb, var(--area) 80%, #000); }
.lm-prof:hover::after { opacity: 1; }
.lm-prof__img { background: color-mix(in srgb, var(--area) 12%, #fff); aspect-ratio: 4 / 3; overflow: hidden; }
.lm-prof__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.lm-prof:hover .lm-prof__img img { transform: scale(1.06); }
.lm-prof__emoji {
background:
radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--area) 30%, #fff), color-mix(in srgb, var(--area) 6%, #fff) 60%);
aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 5rem;
position: relative; overflow: hidden;
}
.lm-prof__emoji::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--area) 22%, transparent), transparent 50%),
radial-gradient(circle at 10% 90%, rgba(255,255,255,.6), transparent 40%);
pointer-events: none;
}
.lm-prof__body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; }
.lm-prof__nome { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 1.35rem; margin: 0; color: #1f2430; letter-spacing: -.01em; }
.lm-prof__resumo { font-size: .95rem; color: #444b57; margin: 0; line-height: 1.5; }
.lm-prof__count {
margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: .9rem; color: var(--area);
background: color-mix(in srgb, var(--area) 12%, #fff); padding: 7px 14px; border-radius: 999px;
transition: background .2s ease;
}
.lm-prof:hover .lm-prof__count { background: color-mix(in srgb, var(--area) 22%, #fff); }
/* ---------------- kit inicial (destaque) ---------------- */
.lm-kit-wrap {
background:
radial-gradient(circle at 85% 0%, color-mix(in srgb, #F0C34E 30%, transparent), transparent 55%),
radial-gradient(circle at 0% 100%, color-mix(in srgb, #8FC98A 26%, transparent), transparent 55%),
linear-gradient(135deg, #F7F1FC, #FBF6E9);
border: 1.5px solid #ECE3F7;
border-radius: 36px; padding: clamp(28px, 4vw, 48px);
color: #2E1065; position: relative; overflow: hidden;
box-shadow: 0 30px 60px -46px rgba(108,75,216,.35);
}
.lm-kit-wrap::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(circle at 12% 18%, rgba(108,75,216,.06) 0 8px, transparent 8px),
radial-gradient(circle at 88% 12%, rgba(108,75,216,.05) 0 5px, transparent 5px),
radial-gradient(circle at 75% 86%, rgba(108,75,216,.05) 0 6px, transparent 6px);
}
.lm-kit-banner { position: relative; z-index: 1; margin-bottom: 22px; max-width: 720px; }
.lm-eyebrow--light { color: #6C4BD8; }
.lm-eyebrow--light::before { background: #B57BE0; }
.lm-kit-banner__title {
font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
font-size: clamp(1.7rem, 3.5vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em;
margin: 0 0 12px; color: #2E1065;
}
.lm-kit-banner__txt { color: #5b5170; font-size: 1.05rem; margin: 0; line-height: 1.55; max-width: 60ch; }
.lm-kit-wrap .lm-disclosure { background: rgba(108,75,216,.06); color: #6b6480; border-color: rgba(108,75,216,.12); position: relative; z-index: 1; }
.lm-cards--kit { position: relative; z-index: 1; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.lm-cards--kit .lm-card { background: #fff; border-color: #ECE3F7; }
/* ---------------- botão "+ Minha lista" ---------------- */
.lm-save {
align-self: flex-start; margin-top: 12px;
font-family: "Inter", system-ui, sans-serif; font-size: .82rem; font-weight: 600;
background: transparent; color: #5d6b65; border: 1.5px dashed color-mix(in srgb, var(--area, #64748B) 35%, #d8dde4);
padding: 7px 13px; border-radius: 999px; cursor: pointer;
transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.lm-save:hover { background: color-mix(in srgb, var(--area, #64748B) 10%, #fff); border-style: solid; color: var(--area, #1f2430); }
.lm-save--on { background: var(--area, #1f2430); color: #fff; border-color: var(--area, #1f2430); border-style: solid; }
.lm-save--on:hover { filter: brightness(.92); }
/* ---------------- guia curado ---------------- */
.lm-guia { max-width: 920px; margin-inline: auto; }
.lm-guia__head { margin-bottom: 28px; }
.lm-guia__heading { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 14px; }
.lm-guia__intro p { color: #444b57; font-size: 1.05rem; line-height: 1.6; margin: 0 0 12px; }
.lm-guia__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; counter-reset: lmstep; }
.lm-guia__row {
--area: #64748B;
display: grid; grid-template-columns: 64px 220px 1fr; gap: 22px; align-items: start;
padding: 22px; border-radius: 22px;
background: linear-gradient(180deg, color-mix(in srgb, var(--area) 6%, #fff), #fff 65%);
border: 1.5px solid color-mix(in srgb, var(--area) 20%, #ececf2);
box-shadow: 0 20px 40px -32px color-mix(in srgb, var(--area) 70%, #000);
}
.lm-guia__num {
display: grid; place-items: center;
width: 56px; height: 56px; border-radius: 50%;
background: var(--area); color: #fff;
font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 1.6rem;
box-shadow: 0 10px 20px -12px var(--area);
}
.lm-guia__media { width: 220px; height: 160px; overflow: hidden; border-radius: 16px; background: color-mix(in srgb, var(--area) 10%, #fff); }
.lm-guia__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-guia__body { display: flex; flex-direction: column; gap: 8px; }
.lm-guia__title { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 1.35rem; margin: 0; letter-spacing: -.01em; }
.lm-guia__title a { color: #1f2430; text-decoration: none; }
.lm-guia__title a:hover { color: var(--area); }
.lm-guia__nota { font-size: .98rem; color: #38463f; margin: 6px 0 4px; line-height: 1.55; }
.lm-guia__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.lm-guia__actions .lm-card__ctas { margin-top: 0; }
.lm-guia__actions .lm-save { margin-top: 0; }
@media (max-width: 760px) {
.lm-guia__row { grid-template-columns: 56px 1fr; gap: 14px; padding: 18px; }
.lm-guia__media { display: none; }
.lm-guia__num { width: 48px; height: 48px; font-size: 1.4rem; }
}
/* ---------------- minha lista ---------------- */
.lm-minha { max-width: 1080px; margin-inline: auto; }
.lm-minha__head { margin-bottom: 22px; }
.lm-minha__title { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 0 0 12px; letter-spacing: -.02em; }
.lm-minha__txt { color: #5d6b65; max-width: 60ch; margin: 0 0 14px; }
.lm-minha__actions { display: flex; gap: 18px; }
.lm-minha__empty {
text-align: center; padding: 60px 24px;
background: #fafbff; border: 1.5px dashed #e4e7ee; border-radius: 24px;
}
.lm-minha__empty .lm-eyebrow { justify-content: center; }
@media print {
.lm-save, .lm-minha__actions, .lm-disclosure { display: none !important; }
.lm-card__cta { color: #000 !important; background: transparent !important; border: 1px solid #000 !important; }
}
/* =========================================================
PÁGINA INDIVIDUAL DO RECURSO — layout 2 colunas estilo loja
========================================================= */
.lm-single-page { --area: #64748B; max-width: 1180px; margin-inline: auto; padding-inline: 6px; }
.lm-single-main { max-width: none; padding-inline: 0; padding-block: 36px; } /* container externo do template — só margem vertical */
.lm-single-page * { box-sizing: border-box; }
.lm-single__crumb { font-size: .82rem; color: #6b7280; margin-bottom: 14px; }
.lm-single__crumb a { color: #6b7280; text-decoration: none; }
.lm-single__crumb a:hover { color: var(--area); }
.lm-single__cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.lm-single__media {
background: color-mix(in srgb, var(--area) 8%, #fff);
border: 1.5px solid color-mix(in srgb, var(--area) 18%, #ececf2);
border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3;
box-shadow: 0 36px 60px -44px color-mix(in srgb, var(--area) 60%, #000);
}
.lm-single__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-single__media--empty {
background:
radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--area) 22%, #fff), color-mix(in srgb, var(--area) 8%, #fff) 60%);
}
.lm-single__buy { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.lm-single__buy .lm-card__tag { align-self: flex-start; }
.lm-single__title {
font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.08; letter-spacing: -.02em;
margin: 0;
}
.lm-single__lead { font-size: 1.05rem; color: #38463f; line-height: 1.55; margin: 4px 0 8px; }
.lm-single__meta { font-size: .98rem; color: #1f2430; margin: 0; }
.lm-single__meta strong { color: #1f2430; }
.lm-single__ctaBox {
background: color-mix(in srgb, var(--area) 7%, #fff);
border: 1.5px solid color-mix(in srgb, var(--area) 22%, #ececf2);
border-radius: 20px; padding: 18px;
}
.lm-single__ctaBox .lm-disclosure { margin-bottom: 14px; background: #fff; }
.lm-single__ctaBox .lm-card__ctas { margin-bottom: 12px; }
.lm-single__ctaBox .lm-save { margin-top: 0; }
.lm-single__taxs { border-top: 1px solid #ececf2; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.lm-single__taxrow { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; }
.lm-single__taxlabel { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; }
.lm-single__taxvals { display: flex; flex-wrap: wrap; gap: 6px; }
.lm-single__tag {
display: inline-block; font-size: .82rem; font-weight: 500;
background: #f6f7f9; color: #1f2430; text-decoration: none;
padding: 4px 10px; border-radius: 999px; border: 1px solid #ececf2;
transition: background .14s ease, border-color .14s ease;
}
.lm-single__tag:hover { background: color-mix(in srgb, var(--area) 12%, #fff); border-color: var(--area); color: var(--area); }
/* corpo do post abaixo das colunas (review/tutorial) */
.lm-single__body { margin-top: 56px; }
.lm-single__bodyInner {
max-width: 760px; margin-inline: auto;
font-size: 1.05rem; line-height: 1.7; color: #2c3338;
}
.lm-single__bodyInner h2 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 1.6rem; margin-top: 1.6em; }
.lm-single__bodyInner h3 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 1.25rem; margin-top: 1.4em; }
.lm-single__bodyInner p { margin: 0 0 1em; }
.lm-single__bodyInner ul, .lm-single__bodyInner ol { padding-left: 1.4em; margin: 0 0 1em; }
.lm-single__bodyInner li { margin-bottom: .4em; }
.lm-single__bodyInner img { max-width: 100%; height: auto; border-radius: 14px; margin: .6em 0; }
.lm-single__bodyInner blockquote {
margin: 1.2em 0; padding: 14px 18px;
background: color-mix(in srgb, var(--area) 7%, #fff); border-left: 4px solid var(--area); border-radius: 8px;
color: #1f2430; font-style: italic;
}
/* relacionados */
.lm-single__related { margin-top: 60px; padding-top: 36px; border-top: 1px solid #ececf2; }
.lm-single__relatedTitle { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 1.6rem; margin: 6px 0 22px; letter-spacing: -.01em; }
/* responsivo */
@media (max-width: 880px) {
.lm-single__cols { grid-template-columns: 1fr; gap: 24px; }
.lm-single__media { aspect-ratio: 4 / 3; max-width: 520px; margin: 0 auto; }
.lm-single__taxrow { grid-template-columns: 1fr; gap: 4px; }
}
/* impressão */
@media print {
.lm-single__related, .lm-save { display: none !important; }
}
/* container do template do plugin: ver regras de padding mais abaixo */
/* =========================================================
RESPONSIVO + MARGENS — wrapper interno para todos os shortcodes
========================================================= */
.lm-match, .lm-quiz, .lm-single-main {
/* margens laterais internas: o plugin já se encarrega do respiro */
padding-inline: clamp(16px, 4vw, 36px);
/* limita largura em telas muito grandes pra não ficar gigante */
max-width: 1200px;
margin-inline: auto;
width: 100%;
}
/* MOBILE: dá mais largura aos cards reduzindo padding interno do plugin.
Se o tema/Elementor ainda apertar, o plugin compensa com padding mínimo. */
@media (max-width: 600px) {
.lm-match, .lm-quiz, .lm-tax-page, .lm-minha, .lm-guia, .lm-ludic {
padding-inline: 10px;
}
}
/* ajustes do quiz no mobile (era 42px de padding interno) */
@media (max-width: 600px) {
.lm-quiz__inner { padding: 26px 22px; border-radius: 22px; }
.lm-quiz__q { font-size: 1.35rem; line-height: 1.15; }
.lm-opt { font-size: .95rem; padding: 13px 15px; }
}
/* CARDS MOBILE: 1 coluna real e proporção menor */
@media (max-width: 720px) {
.lm-cards {
grid-template-columns: 1fr;
gap: 14px;
}
.lm-card {
padding: 16px 16px 18px;
border-radius: 18px;
}
.lm-card__media {
margin: -16px -16px 14px;
border-radius: 16px 16px 0 0;
}
.lm-card__media img { height: 200px; }
.lm-card__title { font-size: 1.05rem; }
.lm-card__desc { font-size: .9rem; }
.lm-card__ctas { gap: 6px; }
.lm-card__cta { padding: 8px 13px; font-size: .85rem; }
}
/* em tela bem pequena, 2 cards lado a lado fica apertado: garante 1 coluna */
@media (max-width: 500px) {
.lm-cards--kit { grid-template-columns: 1fr; }
.lm-card__media img { height: 180px; }
}
/* CHIPS no mobile: rolagem horizontal em vez de quebra desorganizada */
@media (max-width: 600px) {
.lm-chips {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 6px;
margin-inline: -4px;
padding-inline: 4px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.lm-chips::-webkit-scrollbar { height: 4px; }
.lm-chips::-webkit-scrollbar-thumb { background: #d8dde4; border-radius: 999px; }
.lm-chip { flex: 0 0 auto; }
}
/* PROFISSÕES no mobile: cards menores, 1 coluna */
@media (max-width: 600px) {
.lm-profs { grid-template-columns: 1fr; gap: 16px; }
.lm-prof__emoji { font-size: 4rem; }
.lm-prof__nome { font-size: 1.2rem; }
.lm-prof__body { padding: 20px; }
}
/* KIT BANNER mobile: ajusta padding e título */
@media (max-width: 600px) {
.lm-kit-wrap { padding: 26px 20px; border-radius: 24px; }
.lm-kit-banner__title { font-size: 1.5rem; }
.lm-kit-banner__txt { font-size: .98rem; }
}
/* GUIA no mobile: número menor, sem imagem (já estava), padding menor */
@media (max-width: 600px) {
.lm-guia__heading { font-size: 1.5rem; }
.lm-guia__row { padding: 16px; gap: 12px; }
.lm-guia__title { font-size: 1.15rem; }
.lm-guia__nota { font-size: .92rem; }
}
/* PÁGINA SINGLE mobile: imagem menor, padding ajustado */
@media (max-width: 600px) {
.lm-single-main { padding: 24px 0 48px; }
.lm-single-page { padding-inline: 0; }
.lm-single__title { font-size: 1.6rem; }
.lm-single__lead { font-size: 1rem; }
.lm-single__ctaBox { padding: 16px; border-radius: 16px; }
.lm-single__bodyInner { font-size: 1rem; }
.lm-single__related { margin-top: 42px; padding-top: 28px; }
.lm-single__relatedTitle { font-size: 1.4rem; }
}
/* LISTA (diagnósticos) mobile já era 1 coluna; ajuste fino do dropdown */
@media (max-width: 600px) {
.lm-lista__menu { padding: 16px; border-radius: 18px; }
.lm-painel__title { font-size: 1.25rem; }
}
/* MINHA LISTA mobile */
@media (max-width: 600px) {
.lm-minha__title { font-size: 1.4rem; }
.lm-minha__actions { flex-direction: column; gap: 8px; align-items: flex-start; }
}
/* EYEBROW menor no mobile, evita estourar */
@media (max-width: 600px) {
.lm-eyebrow { font-size: .68rem; }
.lm-disclosure { font-size: .76rem; padding: 8px 12px; }
}
/* =========================================================
Card individual [ludario_recurso] — para inserir dentro de posts
========================================================= */
.lm-inline {
--area: #64748B;
padding: 0; /* deixa o wrap controlar */
margin: 24px 0;
max-width: none; /* dentro do post, segue largura do post */
}
.lm-inline__wrap {
display: grid;
grid-template-columns: minmax(0, 260px) 1fr;
gap: 22px;
align-items: stretch;
background: linear-gradient(180deg, color-mix(in srgb, var(--area) 8%, #fff), #fff 70%);
border: 1.5px solid color-mix(in srgb, var(--area) 22%, #ececf2);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 22px 38px -32px color-mix(in srgb, var(--area) 70%, #000);
}
.lm-inline__media { display: block; background: color-mix(in srgb, var(--area) 10%, #fff); }
.lm-inline__media img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; display: block; }
.lm-inline__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.lm-inline__title { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.2; margin: 4px 0 2px; letter-spacing: -.01em; }
.lm-inline__title a { color: #1f2430; text-decoration: none; }
.lm-inline__title a:hover { color: var(--area); }
.lm-inline__desc { font-size: 1rem; color: #38463f; margin: 0; line-height: 1.55; }
.lm-inline__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.lm-inline__actions .lm-card__ctas { margin-top: 0; }
.lm-inline__actions .lm-save { margin-top: 0; }
.lm-inline__aff {
font-size: .74rem; color: #6b7280; margin: 8px 22px 18px;
letter-spacing: .02em;
}
@media (max-width: 640px) {
.lm-inline__wrap { grid-template-columns: 1fr; }
.lm-inline__media img { min-height: 0; height: 180px; }
.lm-inline__body { padding: 16px 18px; }
.lm-inline__title { font-size: 1.1rem; }
.lm-inline__desc { font-size: .94rem; }
.lm-inline__aff { margin: 6px 18px 16px; }
}
/* =========================================================
PÁGINA DE TAXONOMIA (profissão, área, demanda, diagnóstico, momento)
========================================================= */
.lm-tax-page { --area: #64748B; max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 36px); }
.lm-tax__hero {
display: grid;
grid-template-columns: minmax(0, 320px) 1fr;
gap: 36px;
align-items: center;
margin-bottom: 36px;
padding: 28px;
background: linear-gradient(180deg, color-mix(in srgb, var(--area) 10%, #fff), #fff 75%);
border: 1.5px solid color-mix(in srgb, var(--area) 22%, #ececf2);
border-radius: 28px;
box-shadow: 0 28px 50px -36px color-mix(in srgb, var(--area) 70%, #000);
}
.lm-tax__media {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 20px;
overflow: hidden;
background: color-mix(in srgb, var(--area) 14%, #fff);
}
.lm-tax__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-tax__media--emoji {
display: grid; place-items: center; font-size: 6rem;
background:
radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--area) 28%, #fff), color-mix(in srgb, var(--area) 8%, #fff) 60%);
}
.lm-tax__heroBody { display: flex; flex-direction: column; gap: 8px; }
.lm-tax__title {
font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.08; letter-spacing: -.02em;
margin: 0;
}
.lm-tax__resumo { font-size: 1.08rem; color: #38463f; margin: 6px 0 4px; line-height: 1.55; max-width: 60ch; }
.lm-tax__desc { font-size: 1rem; color: #5d6b65; margin: 0; max-width: 60ch; }
.lm-tax__count {
margin-top: 10px; align-self: flex-start;
font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: .92rem;
background: color-mix(in srgb, var(--area) 14%, #fff); color: var(--area);
padding: 6px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--area) 28%, #fff);
}
.lm-tax__list { margin-top: 8px; }
@media (max-width: 720px) {
.lm-tax__hero { grid-template-columns: 1fr; gap: 18px; padding: 20px; border-radius: 22px; }
.lm-tax__media { aspect-ratio: 16 / 10; }
.lm-tax__media--emoji { font-size: 4.2rem; aspect-ratio: 16 / 9; }
.lm-tax__title { font-size: 1.6rem; }
}
/* =========================================================
POLIMENTO LEVE PARA POSTS DO BLOG (quando o tema é genérico)
- Aplica largura legível e tipografia. Não tenta substituir o tema.
========================================================= */
.single-post .entry-content,
.single-post .post-content,
.single-post article .wp-block-post-content,
.single-post main article {
max-width: 760px;
margin-inline: auto;
padding-inline: clamp(16px, 4vw, 24px);
line-height: 1.7;
font-size: 1.05rem;
}
.single-post .lm-inline,
.single-post .lm-inline__wrap {
max-width: none;
}
/* =========================================================
BLINDAGEM ANTI-TEMA — força tamanhos mínimos em px quando o tema
tenta reduzir a base. Cobre os blocos de texto principais.
========================================================= */
.lm-match .lm-eyebrow { font-size: 12px; }
.lm-disclosure { font-size: 13px !important; }
.lm-card__title { font-size: 18px; }
.lm-card__desc { font-size: 15px; }
.lm-card__meta { font-size: 13px; }
.lm-card__tag { font-size: 11px; }
.lm-card__cta { font-size: 15px; padding: 10px 16px; }
.lm-chip { font-size: 15px; }
.lm-quiz__q { font-size: clamp(22px, 3vw, 30px); }
.lm-quiz__rh { font-size: clamp(22px, 3vw, 30px); }
.lm-opt { font-size: 16px; }
.lm-prof__nome { font-size: 22px; }
.lm-prof__resumo { font-size: 15px; }
.lm-prof__count { font-size: 14px; }
.lm-kit-banner__title { font-size: clamp(24px, 3.5vw, 36px); }
.lm-kit-banner__txt { font-size: 17px; }
.lm-painel__title { font-size: 22px; }
.lm-painel__resumo { font-size: 16px; }
.lm-select { font-size: 16px; }
.lm-select__label { font-size: 16px; }
.lm-guia__heading { font-size: clamp(28px, 4vw, 40px); }
.lm-guia__title { font-size: 22px; }
.lm-guia__nota { font-size: 16px; }
.lm-guia__num { font-size: 24px; }
.lm-single__title { font-size: clamp(28px, 3.6vw, 40px); }
.lm-single__lead { font-size: 17px; }
.lm-single__meta { font-size: 16px; }
.lm-single__crumb { font-size: 13px; }
.lm-single__tag { font-size: 13px; }
.lm-single__taxlabel { font-size: 12px; }
.lm-single__bodyInner { font-size: 17px; }
.lm-single__bodyInner h2 { font-size: 26px; }
.lm-single__bodyInner h3 { font-size: 20px; }
.lm-single__relatedTitle { font-size: 26px; }
.lm-tax__title { font-size: clamp(30px, 4vw, 42px); }
.lm-tax__resumo { font-size: 17px; }
.lm-tax__desc { font-size: 16px; }
.lm-tax__count { font-size: 15px; }
.lm-tax__media--emoji { font-size: 96px; }
.lm-inline__title { font-size: 20px; }
.lm-inline__desc { font-size: 16px; }
.lm-inline__aff { font-size: 12px; }
.lm-minha__title { font-size: clamp(26px, 3.4vw, 36px); }
.lm-minha__txt { font-size: 16px; }
.lm-save { font-size: 13px; }
/* mobile: mantém legibilidade sem encolher demais */
@media (max-width: 600px) {
.lm-card__title { font-size: 17px; }
.lm-card__desc { font-size: 14px; }
.lm-card__cta { font-size: 14px; padding: 9px 14px; }
.lm-single__title { font-size: 26px; }
.lm-single__bodyInner { font-size: 16px; }
.lm-quiz__q { font-size: 22px; }
.lm-opt { font-size: 15px; }
.lm-prof__nome { font-size: 19px; }
.lm-tax__title { font-size: 26px; }
.lm-guia__title { font-size: 18px; }
}
/* =========================================================
VER MAIS (limite de cards)
========================================================= */
.lm-card--extra[hidden] { display: none !important; }
.lm-morewrap { display: flex; justify-content: center; margin-top: 22px; }
.lm-more {
font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 15px;
background: #fff; color: #1f2430; border: 2px solid #e4e7ee;
padding: 12px 26px; border-radius: 999px; cursor: pointer;
transition: border-color .15s, background .15s, transform .12s;
}
.lm-more:hover { border-color: #1f2430; transform: translateY(-1px); }
/* =========================================================
BUSCA
========================================================= */
.lm-busca { max-width: 720px; margin: 0 auto; }
.lm-busca__bar { display: flex; gap: 10px; }
.lm-busca__input {
flex: 1; font-family: "Inter", system-ui, sans-serif; font-size: 16px; color: #1f2430;
background: #fff; border: 2px solid #e4e7ee; border-radius: 999px; padding: 14px 20px;
transition: border-color .15s, box-shadow .15s;
}
.lm-busca__input:focus { outline: none; border-color: #6D28D9; box-shadow: 0 8px 22px -12px rgba(109,40,217,.5); }
.lm-busca__btn {
font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 15px;
background: #1E1B4B; color: #fff; border: none; border-radius: 999px; padding: 14px 26px; cursor: pointer;
transition: filter .15s;
}
.lm-busca__btn:hover { filter: brightness(1.15); }
.lm-busca__results { margin-top: 22px; }
.lm-busca__results .lm-cards { margin-top: 0; }
.lm-busca__status { text-align: center; color: #6b7280; font-size: 15px; padding: 16px; }
@media (max-width: 520px) {
.lm-busca__bar { flex-direction: column; }
.lm-busca__btn { width: 100%; }
}
/* =========================================================
TAGS/CHIPS no mobile: grid de 2 colunas em vez de scroll lateral
========================================================= */
@media (max-width: 600px) {
.lm-chips {
flex-wrap: wrap;
overflow-x: visible;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-inline: 0;
padding-inline: 0;
}
.lm-chip {
flex: initial;
width: 100%;
justify-content: center;
text-align: center;
font-size: 13px;
padding: 11px 10px;
}
.lm-chip__dot { display: none; } /* economiza espaço no mobile */
}
/* =========================================================
Esconde meta do tema (autor/data/comentários) nas páginas do plugin
========================================================= */
.lm-single-main .entry-meta,
.lm-single-main .posted-on,
.lm-single-main .byline,
.lm-single-main .author,
.lm-single-main .entry-footer,
.lm-single-main .cat-links,
.lm-single-main .comments-link,
.lm-tax-page .entry-meta,
.lm-tax-page .posted-on,
.lm-tax-page .byline { display: none !important; }
/* =========================================================
HOME MOBILE — respiro lateral consistente
========================================================= */
@media (max-width: 600px) {
.lm-match, .lm-quiz, .lm-tax-page, .lm-minha, .lm-guia, .lm-ludic {
padding-inline: 10px;
}
/* cards praticamente na largura toda no celular */
.lm-cards { grid-template-columns: 1fr; gap: 12px; }
}
/* =========================================================
QUIZ PREMIUM — opções com ícone, gradiente e microinterações
========================================================= */
.lm-quiz__inner {
background:
radial-gradient(circle at 100% 0%, color-mix(in srgb, #6D28D9 8%, transparent), transparent 45%),
radial-gradient(circle at 0% 100%, color-mix(in srgb, #EC4899 6%, transparent), transparent 45%),
#fff;
}
/* grid de opções ricas (área) */
.lm-opts--rich { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.lm-opt--rich {
--area: #64748B;
display: flex; align-items: center; gap: 16px; text-align: left;
padding: 18px; border-radius: 20px;
background: #fff;
border: 1.5px solid #edeef3;
position: relative; overflow: hidden;
animation: lm-pop .32s cubic-bezier(.2,.8,.2,1) backwards;
}
.lm-opts--rich .lm-opt--rich:nth-child(1) { animation-delay: .02s; }
.lm-opts--rich .lm-opt--rich:nth-child(2) { animation-delay: .06s; }
.lm-opts--rich .lm-opt--rich:nth-child(3) { animation-delay: .10s; }
.lm-opts--rich .lm-opt--rich:nth-child(4) { animation-delay: .14s; }
.lm-opts--rich .lm-opt--rich:nth-child(5) { animation-delay: .18s; }
.lm-opts--rich .lm-opt--rich:nth-child(6) { animation-delay: .22s; }
@keyframes lm-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.lm-opt--rich::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(135deg, color-mix(in srgb, var(--area) 10%, transparent), transparent 60%);
opacity: 0; transition: opacity .2s ease;
}
.lm-opt--rich:hover {
transform: translateY(-3px);
border-color: var(--area);
box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--area) 85%, #000);
}
.lm-opt--rich:hover::before { opacity: 1; }
.lm-opt--rich:active { transform: translateY(-1px) scale(.99); }
.lm-opt__iconwrap { flex: 0 0 auto; position: relative; z-index: 1; }
.lm-opt__icon {
width: 58px; height: 58px; border-radius: 18px;
display: grid; place-items: center;
color: var(--area);
background: color-mix(in srgb, var(--area) 14%, #fff);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--area) 20%, transparent);
transition: transform .2s ease, background .2s ease;
}
.lm-opt--rich:hover .lm-opt__icon { transform: scale(1.08) rotate(-3deg); background: color-mix(in srgb, var(--area) 22%, #fff); }
.lm-opt__icon svg { width: 30px; height: 30px; }
.lm-opt__icon--emoji { font-size: 30px; }
.lm-opt__icon--img { overflow: hidden; }
.lm-opt__icon--img img { width: 100%; height: 100%; object-fit: cover; }
.lm-opt__icon--dot { background: var(--area); }
.lm-opt__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; z-index: 1; }
.lm-opt--rich .lm-opt__label { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 17px; color: #1f2430; line-height: 1.15; }
.lm-opt__sub { font-size: 12.5px; color: #6b7280; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lm-opt__arrow {
margin-left: auto; z-index: 1; color: var(--area);
font-weight: 700; font-size: 20px; opacity: 0; transform: translateX(-6px);
transition: opacity .2s ease, transform .2s ease;
}
.lm-opt--rich:hover .lm-opt__arrow { opacity: 1; transform: none; }
/* barra de progresso mais viva */
.lm-quiz__bar { background: linear-gradient(90deg, #6D28D9, #EC4899, #FBBF24); }
@media (max-width: 600px) {
.lm-opts--rich { grid-template-columns: 1fr; }
.lm-opt__icon { width: 50px; height: 50px; border-radius: 15px; }
.lm-opt__icon svg { width: 26px; height: 26px; }
.lm-opt--rich .lm-opt__label { font-size: 16px; }
}
/* =========================================================
Título de seção e de painel (1 demanda, N recursos)
========================================================= */
.lm-section-title {
font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
font-size: clamp(24px, 3vw, 34px); color: #2E1065; letter-spacing: -.02em;
margin: 2px 0 22px;
}
.lm-painel__title {
font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
font-size: clamp(22px, 2.6vw, 30px); color: #2E1065; letter-spacing: -.01em;
margin: 0 0 2px;
}
.lm-painel__sub {
font-family: "Inter", system-ui, sans-serif; font-size: 15px; color: #8b7fa8;
margin: 0 0 18px; font-weight: 500;
}
/* =========================================================
PROFISSÕES — nome sobre a foto (overlay)
========================================================= */
.lm-profs { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.lm-prof {
--area: #6C4BD8;
position: relative; display: block; text-decoration: none;
border-radius: 26px; overflow: hidden; min-height: 320px;
box-shadow: 0 26px 46px -34px color-mix(in srgb, var(--area) 90%, #000);
transition: transform .22s ease, box-shadow .22s ease;
isolation: isolate;
}
.lm-prof:hover { transform: translateY(-6px); box-shadow: 0 40px 60px -30px color-mix(in srgb, var(--area) 90%, #000); }
.lm-prof__bg { position: absolute; inset: 0; z-index: 0; }
.lm-prof__bg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.lm-prof:hover .lm-prof__bg img { transform: scale(1.08); }
.lm-prof__bg--emoji {
display: grid; place-items: center;
background: linear-gradient(160deg, color-mix(in srgb, var(--area) 55%, #fff), var(--area));
}
.lm-prof__bg--emoji span { font-size: 5.5rem; filter: drop-shadow(0 6px 14px rgba(0,0,0,.2)); }
/* gradiente escuro embaixo pra leitura do texto */
.lm-prof__overlay {
position: relative; z-index: 1;
display: flex; flex-direction: column; gap: 6px; justify-content: flex-end;
height: 100%; min-height: 320px; padding: 24px;
text-align: center; align-items: center;
background: linear-gradient(to top,
color-mix(in srgb, var(--area) 92%, #000) 0%,
color-mix(in srgb, var(--area) 60%, transparent) 38%,
transparent 70%);
}
.lm-prof__nome {
font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 26px;
color: #fff; margin: 0; letter-spacing: -.01em;
text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.lm-prof__resumo {
font-size: 14px; color: rgba(255,255,255,.92); margin: 0; line-height: 1.45;
max-width: 30ch; text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.lm-prof__count {
margin-top: 10px; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 14px;
color: #fff; background: rgba(255,255,255,.22); backdrop-filter: blur(4px);
padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3);
transition: background .2s ease;
}
.lm-prof:hover .lm-prof__count { background: rgba(255,255,255,.34); }
@media (max-width: 600px) {
.lm-profs { grid-template-columns: 1fr; }
.lm-prof, .lm-prof__overlay { min-height: 280px; }
.lm-prof__nome { font-size: 23px; }
}
/* =========================================================
HERO (título + quiz) — paleta da logo
========================================================= */
.lm-hero {
font-size: 16px;
position: relative; overflow: hidden;
/* largura total da página, estourando o container do tema/Elementor */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
border-radius: 0;
/* padding-top maior que os demais: dá respiro entre o menu (agora transparente) e o badge */
padding: clamp(76px, 11vw, 132px) clamp(20px, 5vw, 72px) clamp(40px, 7vw, 96px);
background:
radial-gradient(circle at 12% 18%, color-mix(in srgb, #E68CC9 40%, transparent), transparent 42%),
radial-gradient(circle at 88% 12%, color-mix(in srgb, #F0C34E 34%, transparent), transparent 40%),
radial-gradient(circle at 78% 88%, color-mix(in srgb, #8FC98A 34%, transparent), transparent 42%),
radial-gradient(circle at 20% 90%, color-mix(in srgb, #B57BE0 40%, transparent), transparent 45%),
linear-gradient(160deg, #F7F3FC, #FBF7FF);
}
.lm-hero__inner { position: relative; z-index: 1; max-width: 840px; margin: 0 auto; }
.lm-hero__head { text-align: center; margin-bottom: 38px; }
.lm-hero__badge {
display: inline-block; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600;
font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
color: #6C4BD8; background: rgba(255,255,255,.6);
padding: 9px 22px; border-radius: 999px; margin-bottom: 24px;
box-shadow: 0 4px 14px -6px rgba(108,75,216,.3);
}
.lm-hero__title {
font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
font-size: clamp(38px, 6.4vw, 76px); line-height: 1.04; letter-spacing: -.02em;
color: #2E1065; margin: 0 0 20px;
}
/* No mobile o
do desktop atrapalha; deixamos o texto fluir naturalmente. */
@media (max-width: 560px) {
.lm-hero__title br { display: none; }
.lm-hero__title { font-size: clamp(30px, 9vw, 44px); line-height: 1.1; }
.lm-hl-amarelo { padding: 1px 10px; }
}
.lm-hl-verde {
font-style: italic; color: #8FC98A; font-weight: 600;
}
.lm-hl-amarelo {
display: inline-block;
background: linear-gradient(120deg, #FEF08A 0%, #FDE68A 100%); color: #2E1065;
padding: 0 .15em; border-radius: 8px;
transform: rotate(-1.5deg);
box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.lm-hero__dot { color: #2E1065; }
.lm-hero__sub {
font-size: clamp(15px, 2vw, 18px); line-height: 1.6; color: #6b6480;
max-width: 52ch; margin: 0 auto; font-family: "Inter", system-ui, sans-serif;
}
.lm-hero__quiz { position: relative; }
/* decorações flutuantes (bolinha amarela + quadradinho verde) */
.lm-hero__deco { position: absolute; z-index: 0; pointer-events: none; }
.lm-hero__deco--bola {
width: 54px; height: 54px; border-radius: 50%;
background: #F5C518; box-shadow: inset 0 0 0 10px #F7E36B;
top: 14%; left: 6%;
animation: lm-float 6s ease-in-out infinite;
}
.lm-hero__deco--quad {
width: 56px; height: 56px; border-radius: 16px;
background: #7BD4A8; box-shadow: inset 0 0 0 10px #A7E8C6;
top: 26%; right: 7%;
animation: lm-float 7s ease-in-out infinite reverse;
}
@keyframes lm-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
@media (prefers-reduced-motion: reduce) { .lm-hero__deco { animation: none; } }
@media (max-width: 680px) {
.lm-hero__deco--bola { top: 6%; left: 4%; width: 40px; height: 40px; box-shadow: inset 0 0 0 8px #F7E36B; }
.lm-hero__deco--quad { top: 15%; right: 4%; width: 42px; height: 42px; box-shadow: inset 0 0 0 8px #A7E8C6; }
}
/* MOBILE: o menu do tema é transparente e fica POR CIMA do hero.
O padding-top precisa reservar a altura do cabeçalho (--lm-header-h),
senão o badge sobe atrás da logo. Ajuste a variável se trocar o header. */
@media (max-width: 600px) {
.lm-hero {
--lm-header-h: 84px;
border-radius: 0;
padding: calc(var(--lm-header-h) + 28px) 18px 44px;
}
.lm-hero__head { margin-bottom: 28px; }
.lm-hero__badge {
font-size: 11px; letter-spacing: .06em; line-height: 1.35;
padding: 8px 16px; margin-bottom: 18px; max-width: 30ch;
}
.lm-hero__title { margin-bottom: 14px; }
.lm-hero__sub { max-width: 34ch; }
/* decorações ancoradas ABAIXO do cabeçalho, não em % da seção */
.lm-hero__deco--bola { top: calc(var(--lm-header-h) + 4px); left: 10px; }
.lm-hero__deco--quad { top: calc(var(--lm-header-h) + 60px); right: 10px; }
}
@media (max-width: 380px) {
.lm-hero__deco--bola, .lm-hero__deco--quad { display: none; }
}
/* =========================================================
LUDICIONÁRIO
========================================================= */
.lm-ludic__intro { color: #5b5170; font-size: 16px; max-width: 60ch; margin: 0 0 24px; }
.lm-ludic__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.lm-ludic-card {
display: flex; flex-direction: column; gap: 8px; text-decoration: none;
background: #fff; border: 1.5px solid #ece7f5; border-radius: 20px; padding: 22px;
box-shadow: 0 18px 34px -28px rgba(46,16,101,.4);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lm-ludic-card:hover { transform: translateY(-4px); border-color: #B57BE0; box-shadow: 0 26px 44px -26px rgba(108,75,216,.5); }
.lm-ludic-card__t { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 20px; color: #2E1065; margin: 0; }
.lm-ludic-card__d { font-size: 14.5px; color: #5b5170; margin: 0; line-height: 1.5; }
.lm-ludic-card__go { margin-top: 4px; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 14px; color: #6C4BD8; }
/* verbete individual */
.lm-verbete { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 28px; }
.lm-verbete__bloco { }
.lm-verbete__h { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 24px; color: #2E1065; margin: 0 0 12px; letter-spacing: -.01em; }
.lm-verbete__bloco p { font-size: 17px; line-height: 1.7; color: #2c3338; margin: 0; }
.lm-verbete__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lm-verbete__list li {
position: relative; padding: 12px 16px 12px 44px; font-size: 16px; line-height: 1.5; color: #2c3338;
background: #F7F3FC; border-radius: 14px;
}
.lm-verbete__list li::before {
content: "•"; position: absolute; left: 18px; top: 12px; color: #B57BE0; font-size: 18px; font-weight: 700;
}
.lm-verbete__list--check li::before { content: "✓"; color: #6C4BD8; }
.lm-verbete__recursos { margin-top: 8px; }
.lm-verbete__recursos .lm-match { padding-inline: 0; }
/* =========================================================
POSTS (blog) na home
========================================================= */
.lm-posts { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.lm-post {
display: flex; flex-direction: column; text-decoration: none;
background: #fff; border: 1.5px solid #ece7f5; border-radius: 22px; overflow: hidden;
box-shadow: 0 20px 38px -30px rgba(46,16,101,.4);
transition: transform .16s ease, box-shadow .16s ease;
}
.lm-post:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -28px rgba(108,75,216,.45); }
.lm-post__media { aspect-ratio: 16 / 10; overflow: hidden; background: #F7F3FC; }
.lm-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.lm-post:hover .lm-post__media img { transform: scale(1.06); }
.lm-post__media--empty { background: linear-gradient(135deg, #E9DEFA, #F7F3FC); }
.lm-post__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.lm-post__cat {
align-self: flex-start; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600;
font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
color: #6C4BD8; background: rgba(108,75,216,.1); padding: 4px 12px; border-radius: 999px;
}
.lm-post__title { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 20px; color: #2E1065; margin: 0; line-height: 1.2; }
.lm-post__ex { font-size: 14.5px; color: #5b5170; margin: 0; line-height: 1.5; }
.lm-post__go { margin-top: 4px; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 14px; color: #6C4BD8; }
.lm-posts__all { display: flex; justify-content: center; margin-top: 26px; }
@media (max-width: 600px) {
.lm-posts { grid-template-columns: 1fr; }
}
/* aviso de adaptabilidade na página do recurso */
.lm-single__adapt {
font-size: 13.5px; line-height: 1.5; color: #6b6480;
background: #F7F3FC; border: 1px solid #ECE3F7; border-radius: 12px;
padding: 12px 14px; margin: 4px 0 0;
}
/* =========================================================
FILTRO DE TAGS (vitrine) — muitas demandas sem virar parede
Estados:
1) navegação → tags visíveis, lista cortada + busca
2) foco → depois de escolher, só a tag ativa fica na tela
========================================================= */
.lm-filtro { margin-bottom: 24px; }
.lm-filtro__topo {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.lm-filtro__label {
display: flex; align-items: center; gap: 8px; margin: 0;
font-family: "Fredoka", system-ui, sans-serif; font-weight: 600;
font-size: 15px; color: #2E1065;
}
.lm-filtro__count {
font-family: "Inter", system-ui, sans-serif; font-size: 12px; font-weight: 600;
color: #6C4BD8; background: rgba(108,75,216,.1);
padding: 3px 9px; border-radius: 999px;
}
.lm-filtro__input {
flex: 0 1 260px; min-width: 0;
font-family: "Inter", system-ui, sans-serif; font-size: 15px; color: #1f2430;
background: #fff; border: 1.5px solid #e4e7ee; border-radius: 999px;
padding: 10px 16px; transition: border-color .15s, box-shadow .15s;
}
.lm-filtro__input:focus {
outline: none; border-color: #6C4BD8;
box-shadow: 0 8px 20px -14px rgba(108,75,216,.7);
}
.lm-filtro__vazio { margin: 10px 0 0; color: var(--lm-muted); font-size: 14px; font-style: italic; }
/* tags escondidas pela busca */
.lm-chip[hidden] { display: none !important; }
/* lista cortada + botão "mostrar todas" */
.lm-chips--cortado {
max-height: 158px; overflow: hidden;
-webkit-mask-image: linear-gradient(#000 62%, rgba(0,0,0,.15));
mask-image: linear-gradient(#000 62%, rgba(0,0,0,.15));
}
.lm-chips__tudo {
display: inline-flex; align-items: center; gap: 6px; margin: -14px 0 0;
font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 14px;
color: #6C4BD8; background: none; border: none; padding: 8px 2px; cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
}
.lm-chips__tudo:hover { color: #2E1065; }
/* --- estado FOCADO: escolheu uma tag, as outras somem --- */
.lm-filtro__ativo {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap; margin-bottom: 12px;
}
.lm-filtro__ativoTxt {
margin: 0; font-size: 14px; color: var(--lm-muted);
}
.lm-filtro__ativoNome { color: #2E1065; font-weight: 700; }
.lm-filtro__trocar {
font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 14px;
color: #6C4BD8; background: rgba(108,75,216,.08);
border: 1.5px solid rgba(108,75,216,.2); border-radius: 999px;
padding: 8px 16px; cursor: pointer; transition: background .15s, border-color .15s;
}
.lm-filtro__trocar:hover { background: rgba(108,75,216,.15); border-color: #6C4BD8; }
.lm-filtro__trocar::before { content: "↺ "; }
.lm-filtro--focado .lm-filtro__topo,
.lm-filtro--focado .lm-filtro__vazio,
.lm-filtro--focado .lm-chips__tudo { display: none !important; }
.lm-filtro--focado .lm-chips {
display: flex; flex-wrap: wrap; max-height: none;
-webkit-mask-image: none; mask-image: none; margin-bottom: 0;
}
.lm-filtro--focado .lm-chip:not([aria-selected="true"]) { display: none !important; }
.lm-filtro--focado .lm-chip[aria-selected="true"] { width: auto; }
.lm-filtro--focado .lm-chip[aria-selected="true"]::after {
content: "×"; margin-left: 4px; font-size: 17px; line-height: 1; opacity: .8;
}
/* o painel de resultados precisa de folga do cabeçalho fixo ao rolar */
.lm-painel { scroll-margin-top: 90px; }
.lm-filtro { scroll-margin-top: 84px; }
@media (max-width: 600px) {
.lm-filtro__topo { gap: 10px; }
.lm-filtro__label { font-size: 14px; width: 100%; }
.lm-filtro__input { flex: 1 1 100%; font-size: 16px; } /* 16px evita zoom no iOS */
.lm-chips--cortado { max-height: 146px; }
.lm-filtro--focado .lm-chip[aria-selected="true"] {
width: auto; max-width: 100%; justify-content: center;
font-size: 14px; padding: 11px 18px;
}
.lm-filtro__ativo { gap: 8px; }
.lm-filtro__ativoTxt { font-size: 13px; }
}
/* =========================================================
KIT INICIAL — carrossel de blocos (pilares)
========================================================= */
.lm-kitcar { position: relative; z-index: 1; margin-top: 6px; }
.lm-kitcar__bar {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: 16px;
}
.lm-kitcar__tabs {
display: flex; gap: 8px; overflow-x: auto; flex: 1 1 auto;
padding-bottom: 4px; scrollbar-width: none;
}
.lm-kitcar__tabs::-webkit-scrollbar { display: none; }
.lm-kitcar__tab {
--area: #6C4BD8;
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 14px;
color: #4b4361; background: #fff; border: 1.5px solid #ece7f5;
padding: 9px 16px; border-radius: 999px; cursor: pointer;
transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.lm-kitcar__tabnum {
font-size: 11px; font-weight: 700; letter-spacing: .04em;
color: var(--area); background: color-mix(in srgb, var(--area) 14%, #fff);
padding: 2px 7px; border-radius: 999px;
}
.lm-kitcar__tab:hover { border-color: var(--area); color: var(--area); }
.lm-kitcar__tab[aria-selected="true"] {
background: var(--area); border-color: var(--area); color: #fff;
box-shadow: 0 10px 22px -12px var(--area);
}
.lm-kitcar__tab[aria-selected="true"] .lm-kitcar__tabnum { background: rgba(255,255,255,.24); color: #fff; }
.lm-kitcar__nav { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.lm-kitcar__pos { font-size: 13px; color: #6b6480; font-variant-numeric: tabular-nums; }
.lm-kitcar__pos b { color: #2E1065; }
.lm-kitcar__arrow {
width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
display: grid; place-items: center; font-size: 22px; line-height: 1;
color: #2E1065; background: #fff; border: 1.5px solid #ece7f5;
transition: border-color .15s, transform .12s, opacity .15s;
}
.lm-kitcar__arrow:hover:not(:disabled) { border-color: #6C4BD8; transform: translateY(-1px); }
.lm-kitcar__arrow:disabled { opacity: .35; cursor: default; }
.lm-kitcar__track {
display: flex; gap: 16px;
overflow-x: auto; scroll-snap-type: x mandatory;
scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
padding-bottom: 6px; scrollbar-width: none;
}
.lm-kitcar__track::-webkit-scrollbar { display: none; }
.lm-kitcar__track:focus-visible { outline: 3px solid #6C4BD8; outline-offset: 4px; border-radius: 24px; }
.lm-kitslide {
--area: #6C4BD8;
flex: 0 0 100%; scroll-snap-align: start; min-width: 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--area) 9%, #fff), #fff 55%);
border: 1.5px solid color-mix(in srgb, var(--area) 22%, #ece7f5);
border-radius: 24px; padding: 26px 26px 28px;
box-shadow: 0 24px 44px -34px color-mix(in srgb, var(--area) 80%, #000);
}
.lm-kitslide__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.lm-kitslide__num {
flex: 0 0 auto; display: grid; place-items: center;
width: 44px; height: 44px; border-radius: 14px;
font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 17px;
color: #fff; background: var(--area);
box-shadow: 0 12px 22px -14px var(--area);
}
.lm-kitslide__title {
font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 21px;
color: #2E1065; margin: 2px 0 2px; line-height: 1.15; letter-spacing: -.01em;
}
.lm-kitslide__sub {
margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em;
text-transform: uppercase; color: color-mix(in srgb, var(--area) 70%, #000);
}
.lm-kitslide__txt { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #5b5170; max-width: 62ch; }
.lm-kititems {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.lm-kititem {
--area: #6C4BD8;
display: flex; gap: 14px; align-items: flex-start;
background: #fff; border: 1.5px solid #efeaf8; border-radius: 18px; padding: 14px;
}
.lm-kititem--base { background: color-mix(in srgb, var(--area) 5%, #fff); border-style: dashed; }
.lm-kititem__media {
flex: 0 0 auto; width: 74px; height: 74px; border-radius: 14px; overflow: hidden;
background: color-mix(in srgb, var(--area) 10%, #fff); display: block;
}
.lm-kititem__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-kititem__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lm-kititem__nome {
font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 16px;
color: #2E1065; margin: 0; line-height: 1.25;
}
.lm-kititem__nome a { color: inherit; text-decoration: none; }
.lm-kititem__nome a:hover { color: #6C4BD8; text-decoration: underline; }
.lm-kititem__desc { margin: 0; font-size: 14px; line-height: 1.5; color: #5b5170; }
.lm-kititem__selo {
align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: #6b6480; background: rgba(46,16,101,.06);
padding: 4px 10px; border-radius: 999px;
}
.lm-kititem__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.lm-kititem__acoes .lm-card__ctas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.lm-kititem__acoes .lm-card__cta { font-size: 13px; padding: 8px 14px; }
.lm-save--mini { font-size: 12px; }
/* desktop: 2 blocos por vez, ganha comparação lado a lado */
@media (min-width: 1000px) {
.lm-kitslide { flex-basis: calc(50% - 8px); }
}
@media (max-width: 600px) {
.lm-kitcar__bar { flex-direction: column; align-items: stretch; gap: 10px; }
.lm-kitcar__nav { justify-content: space-between; order: 2; }
.lm-kitcar__tabs { order: 1; margin-inline: -10px; padding-inline: 10px; }
.lm-kitcar__tabtxt { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-kitcar__track { gap: 12px; margin-inline: -10px; padding-inline: 10px; scroll-padding-inline: 10px; }
.lm-kitslide { padding: 20px 18px 22px; border-radius: 22px; }
.lm-kitslide__title { font-size: 19px; }
.lm-kitslide__num { width: 38px; height: 38px; font-size: 15px; border-radius: 12px; }
.lm-kitslide__txt { font-size: 14px; margin-bottom: 14px; }
.lm-kititems { grid-template-columns: 1fr; gap: 10px; }
.lm-kititem__media { width: 62px; height: 62px; }
.lm-kititem__nome { font-size: 15px; }
.lm-kititem__desc { font-size: 13.5px; }
}