/* Lexiwi — visual. Celular primeiro (390px), claro e escuro, impressão A4. */

/* A fonte completa já distribuída cobre IPA e marcas nasais combinantes. */
@font-face {
  font-family: "Lexiwi IPA";
  src: url("../fontes/andika-400-completa.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.silabas[data-representacao="ipa"] { font-family: "Lexiwi IPA", var(--texto); font-weight: 400; }

:root {
  --fundo: #f7f5f0;
  --fundo-2: #efeae0;
  --cartao: #ffffff;
  --tinta: #1d1a2b;
  --tinta-2: #4a4560;
  --tinta-3: #625d78;
  --linha: #e6e0d4;
  --linha-2: #d8d0c2;
  --marca: #5b3df5;
  --marca-2: #4528d8;
  --marca-suave: #ece8ff;
  --marca-tinta: #3a22b5;
  --tonica: #d63c1c;
  --tonica-2: #b02f12;
  --tonica-texto: #ffffff;
  --tonica-suave: #ffe8e1;
  --sol: #ffc531;
  --verde: #16a05a;
  --amarelo: #d9a400;
  --cinza: #8a8696;
  --enc-dit: #7c4dff;
  --enc-hia: #ef5a2b;
  --enc-tri: #00999a;
  --enc-con: #2f9e44;
  --enc-dig: #1c7ed6;
  --sombra: 0 1px 2px rgba(29, 26, 43, .06), 0 10px 30px -14px rgba(29, 26, 43, .22);
  --sombra-forte: 0 2px 4px rgba(29, 26, 43, .08), 0 18px 40px -16px rgba(69, 40, 216, .35);
  --raio: 20px;
  --raio-m: 14px;
  --raio-p: 10px;
  --largura: 1040px;
  --h-topo: 60px;
  --texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #14111f; --fundo-2: #1b1729; --cartao: #1f1b30; --tinta: #f1eefb; --tinta-2: #c9c4dc; --tinta-3: #a59fbd;
    --linha: #2f2945; --linha-2: #3d3657; --marca: #9a86ff; --marca-2: #b3a4ff; --marca-suave: #2b2450; --marca-tinta: #cfc5ff;
    --tonica: #ff7657; --tonica-2: #ff8c71; --tonica-texto: #2a0c05; --tonica-suave: #43221f; --verde: #2fb874; --amarelo: #e6b521; --cinza: #6d6880;
    --enc-dit: #a98bff; --enc-hia: #ff8a5c; --enc-tri: #3ccfcf; --enc-con: #5fcf73; --enc-dig: #6fb2ff;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -16px rgba(0, 0, 0, .6);
    --sombra-forte: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #14111f; --fundo-2: #1b1729; --cartao: #1f1b30; --tinta: #f1eefb; --tinta-2: #c9c4dc; --tinta-3: #a59fbd;
  --linha: #2f2945; --linha-2: #3d3657; --marca: #9a86ff; --marca-2: #b3a4ff; --marca-suave: #2b2450; --marca-tinta: #cfc5ff;
  --tonica: #ff7657; --tonica-2: #ff8c71; --tonica-texto: #2a0c05; --tonica-suave: #43221f; --verde: #2fb874; --amarelo: #e6b521; --cinza: #6d6880;
  --enc-dit: #a98bff; --enc-hia: #ff8a5c; --enc-tri: #3ccfcf; --enc-con: #5fcf73; --enc-dig: #6fb2ff;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -16px rgba(0, 0, 0, .6);
  --sombra-forte: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta); font: 16px/1.55 var(--texto);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--marca); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--marca-2); }
img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.45rem, 5.6vw, 2.35rem); font-weight: 850; }
h2 { font-size: clamp(1.15rem, 4vw, 1.45rem); font-weight: 800; }
h3 { font-size: 1rem; font-weight: 750; }
p { margin: 0 0 .9em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--marca) 55%, transparent); outline-offset: 2px; border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.largura { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 16px; }
.i { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.22em; }
.pular { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--marca); color: #fff; padding: 8px 14px; border-radius: 10px; }
.pular:focus { top: 8px; }

/* ---------- topo ---------- */
.topo { position: relative; z-index: 20; }
.topo-linha { display: flex; align-items: center; gap: 10px; height: var(--h-topo); }
.marca { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; font-weight: 850; font-size: 1.12rem; letter-spacing: -.01em; margin-right: auto; }
.marca-sil { color: var(--tinta); background: var(--cartao); border: 1px solid var(--linha); border-radius: 9px; padding: 1px 6px 2px; box-shadow: 0 1px 0 var(--linha-2); transition: transform .2s; }
.marca-sil.tonica { color: var(--tonica-texto); background: var(--tonica); border-color: var(--tonica); box-shadow: 0 1px 0 var(--tonica-2); }
.marca:hover .marca-sil { transform: translateY(-1px); }
.marca:hover .marca-sil:nth-child(2) { transform: translateY(-2px); }
.nav-rapida { display: none; gap: 2px; }
.nav-rapida a { color: var(--tinta-2); text-decoration: none; font-weight: 600; font-size: .93rem; padding: 8px 10px; border-radius: 10px; }
.nav-rapida a:hover, .nav-rapida a[aria-current] { background: var(--cartao); color: var(--tinta); }
.botao-icone { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--linha); background: var(--cartao); color: var(--tinta-2); }
.botao-icone:hover { color: var(--tinta); border-color: var(--linha-2); }
.botao-tema .i-sol { display: none; }
:root[data-theme="dark"] .botao-tema .i-sol { display: block; }
:root[data-theme="dark"] .botao-tema .i-lua { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .botao-tema .i-sol { display: block; }
  :root:not([data-theme="light"]) .botao-tema .i-lua { display: none; }
}
.menu { position: relative; }
.botao-menu { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--tinta); color: var(--fundo); font-weight: 700; font-size: .95rem; cursor: pointer; user-select: none; }
.botao-menu::-webkit-details-marker { display: none; }
.menu[open] .botao-menu { background: var(--marca); color: #fff; }
.menu-painel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(92vw, 560px); background: var(--cartao); border: 1px solid var(--linha);
  max-height: calc(100vh - var(--h-topo) - 24px); max-height: calc(100svh - var(--h-topo) - 24px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--raio); box-shadow: var(--sombra-forte); padding: 14px; display: grid; grid-template-columns: 1fr; gap: 6px;
  animation: surgir .18s ease-out;
}
.menu-grupo ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.menu-titulo { margin: 4px 8px 4px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.menu-painel a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 11px; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .95rem; }
.menu-painel a .i { color: var(--marca); }
.menu-painel a:hover, .menu-painel a[aria-current] { background: var(--marca-suave); }
.menu-listas { border-top: 1px solid var(--linha); margin-top: 2px; padding-top: 12px !important; }
.idiomas { display: flex; flex-wrap: wrap; gap: 6px; }
.menu-painel .idiomas { border-top: 1px solid var(--linha); padding-top: 10px; }
.idiomas a { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--linha); background: var(--fundo); color: var(--tinta-2); font-weight: 650; font-size: .88rem; text-decoration: none; }
.menu-painel .idiomas a { display: inline-block; padding: 5px 12px; font-size: .88rem; }
.idiomas a:hover { border-color: var(--marca); color: var(--marca); }
.idiomas a[aria-current] { background: var(--marca); border-color: var(--marca); color: #fff; }
.idiomas-rodape { margin-top: 18px; }
.aviso-estimada { margin: -4px 0 10px; font-size: .88rem; color: var(--tinta-2); background: color-mix(in srgb, var(--sol) 18%, transparent); border-radius: 8px; padding: 4px 10px; }
@keyframes surgir { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- cabeça da página ---------- */
main { min-height: 50vh; }
.cabeca { padding: 6px 0 12px; }
.cabeca h1 { margin-bottom: .2em; }
.cabeca h1 em { font-style: normal; color: var(--marca); }
.lead { color: var(--tinta-2); margin: 0; font-size: .98rem; }

/* ---------- cartão da ferramenta ---------- */
.ferramenta {
  position: relative; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 14px; display: flex; flex-direction: column; min-height: 0;
}

/* ---------- palco: título e ferramenta cabem na tela; listas longas rolam dentro do cartão ---------- */
.palco { --altura-palco: max(500px, calc(100vh - var(--h-topo) - 14px)); display: flex; flex-direction: column; max-height: var(--altura-palco); margin-bottom: 26px; }
@supports (height: 100svh) { .palco { --altura-palco: max(500px, calc(100svh - var(--h-topo) - 14px)); } }
.palco.cheio { height: var(--altura-palco); }
.palco > .cabeca { flex: none; }
.palco > .ferramenta { flex: 0 1 auto; }
.palco.cheio > .ferramenta { flex: 1 1 auto; }
.painel-entrada { flex: none; min-width: 0; }
.painel-saida { flex: 0 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.painel-saida > * { flex: none; }
.palco.cheio .painel-saida { flex: 1 1 auto; }
.painel-saida > .rolagem {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  /* sombra em cima/embaixo só quando há mais para rolar */
  background:
    linear-gradient(var(--cartao) 30%, transparent) top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--cartao) 70%) bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--tinta) 16%, transparent), transparent) top / 100% 9px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--tinta) 16%, transparent), transparent) bottom / 100% 9px no-repeat scroll;
}
.busca { margin: 0; }
.caixa { position: relative; display: flex; align-items: center; }
.caixa .i-caixa { position: absolute; left: 15px; width: 22px; height: 22px; color: var(--tinta-3); pointer-events: none; }
.caixa input {
  width: 100%; height: 58px; border: 2px solid var(--linha-2); border-radius: 16px; background: var(--fundo);
  padding: 0 50px 0 48px; font-size: 1.25rem; font-weight: 650; letter-spacing: .01em; transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none; appearance: none;
}
.caixa input::-webkit-search-cancel-button { display: none; }
.caixa input::placeholder { color: var(--tinta-3); font-weight: 500; }
.caixa input:focus { outline: none; border-color: var(--marca); background: var(--cartao); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 18%, transparent); }
.limpar { position: absolute; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--tinta-3); display: grid; place-items: center; }
.limpar:hover { background: var(--fundo-2); color: var(--tinta); }
.exemplos { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 10px 2px 2px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.exemplos::-webkit-scrollbar { display: none; }
.exemplos-rotulo { font-size: .8rem; color: var(--tinta-3); font-weight: 600; flex: none; margin-right: 2px; }
.chip {
  flex: none; border: 1px solid var(--linha); background: var(--fundo); color: var(--tinta-2); border-radius: 999px; padding: 5px 12px;
  font-size: .9rem; font-weight: 600; line-height: 1.3; transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--marca); color: var(--marca); }
.chip.ativo, .chip[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }
.saida { margin-top: 14px; }
[data-ferramenta="separacao"] .saida, [data-ferramenta="tonica"] .saida, [data-ferramenta="encontros"] .saida, [data-ferramenta="inicio"] .saida { min-height: 120px; }
.aviso { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--sol) 22%, var(--cartao)); border: 1px solid color-mix(in srgb, var(--sol) 55%, var(--linha)); font-size: .95rem; }
.aviso button { border: 0; background: none; color: var(--marca); font-weight: 750; padding: 0; text-decoration: underline; text-underline-offset: .18em; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.acoes-ir { display: contents; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--marca); background: var(--marca); color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; transition: background .15s, transform .1s;
}
.botao:hover { background: var(--marca-2); color: #fff; }
.botao:active { transform: scale(.98); }
.botao.secundario { background: var(--cartao); color: var(--tinta); border-color: var(--linha-2); }
.botao.secundario:hover { border-color: var(--marca); color: var(--marca); }
.botao.secundario[aria-pressed="true"] { background: var(--marca-suave); border-color: var(--marca); color: var(--marca-tinta); }
.botao.ir { background: var(--marca-suave); color: var(--marca-tinta); border-color: transparent; }
.nota { color: var(--tinta-3); font-size: .88rem; margin: 6px 0; }
.contagem { font-weight: 750; margin: 10px 0 4px; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px); background: var(--tinta); color: var(--fundo); padding: 10px 16px; border-radius: 12px; font-weight: 700; opacity: 0; transition: .2s; z-index: 60; pointer-events: none; }
.toast.ver { opacity: 1; transform: translateX(-50%); }

/* ---------- resultado da palavra ---------- */
.silabas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: clamp(1.9rem, 9.2vw, 3rem); font-weight: 800; line-height: 1; margin: 2px 0 12px; }
.sil {
  display: inline-block; padding: .14em .36em .18em; border-radius: .32em; background: var(--marca-suave); color: var(--marca-tinta);
  letter-spacing: .01em; animation: pular .35s cubic-bezier(.2, .8, .3, 1.3) both;
}
.sil.tonica { background: var(--tonica); color: var(--tonica-texto); box-shadow: 0 .08em 0 var(--tonica-2), 0 .3em .7em -.3em color-mix(in srgb, var(--tonica) 70%, transparent); position: relative; }
.sil.tonica::after { content: ""; position: absolute; left: 50%; top: -.26em; width: .14em; height: .14em; border-radius: 50%; background: var(--tonica); transform: translateX(-50%); }
.sep { color: var(--tinta-3); font-weight: 400; font-size: .6em; opacity: .7; }
.sep.hifen { color: var(--tinta); opacity: 1; font-weight: 800; }
.silabas .sil:nth-of-type(2) { animation-delay: .03s; } .silabas .sil:nth-of-type(3) { animation-delay: .06s; }
.silabas .sil:nth-of-type(4) { animation-delay: .09s; } .silabas .sil:nth-of-type(5) { animation-delay: .12s; }
.silabas .sil:nth-of-type(n+6) { animation-delay: .15s; }
.silabas.pequena { font-size: 1.05rem; gap: 2px; margin: 0; }
.silabas.pequena .sil { animation: none; padding: .12em .34em; }
.silabas.pequena .sil.tonica::after { display: none; }
@keyframes pular { from { opacity: 0; transform: translateY(.25em) scale(.92); } to { opacity: 1; transform: none; } }
.fatos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; }
.fatos li { background: var(--fundo); border: 1px solid var(--linha); border-radius: 999px; padding: 3px 11px; font-size: .9rem; color: var(--tinta-2); }
.fatos b { color: var(--tinta); }
.cor-tonica { color: var(--tonica-2); }
.porques { margin: 0; border-top: 1px solid var(--linha); }
.porque { display: grid; grid-template-columns: 1fr; gap: 1px; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.porque dt { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.porque dd { margin: 0; font-size: .97rem; color: var(--tinta-2); }
.porque dd b { color: var(--tinta); }
.porque.alerta dd { color: var(--tinta); background: color-mix(in srgb, var(--sol) 20%, transparent); border-radius: 8px; padding: 4px 8px; margin: 2px -8px 0; }
.translinea { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; }
.translinea li { display: inline-flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: .9rem; background: var(--fundo); border: 1px dashed var(--linha-2); border-radius: 8px; padding: 2px 8px; color: var(--tinta); }
.translinea .quebra { color: var(--tonica); font-family: var(--texto); margin: 0 1px; }
.lista-frase { list-style: none; margin: 0; padding: 0; }
.linha-palavra { display: grid; grid-template-columns: minmax(80px, auto) 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.lp-nome { font-weight: 700; }
.lp-nome a { color: var(--tinta); }
.lp-info { color: var(--tinta-3); font-size: .85rem; text-align: right; }

/* encontros */
.grade-enc { display: grid; gap: 14px; margin: 6px 0 4px; }
.bloco-enc .t-grupo { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin-bottom: 6px; }
.encontros { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.enc { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 1px; align-items: center; background: var(--fundo); border: 1px solid var(--linha); border-left: 4px solid var(--cor-enc, var(--marca)); border-radius: 12px; padding: 8px 12px; }
.enc-palavra { grid-row: span 2; font-size: 1.25rem; font-weight: 750; letter-spacing: .02em; }
.enc-palavra mark { background: color-mix(in srgb, var(--cor-enc) 22%, transparent); color: var(--tinta); border-radius: 5px; padding: 0 2px; box-shadow: inset 0 -2px 0 var(--cor-enc); }
.enc-nome { font-size: .95rem; }
.enc-expl { font-size: .85rem; color: var(--tinta-3); }
.enc-decrescente, .enc-crescente { --cor-enc: var(--enc-dit); }
.enc-tritongo { --cor-enc: var(--enc-tri); }
.enc-hiato { --cor-enc: var(--enc-hia); }
.enc-perfeito, .enc-imperfeito { --cor-enc: var(--enc-con); }
.enc-consonantal, .enc-vocalico { --cor-enc: var(--enc-dig); }
.chips-enc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips-enc li { border-radius: 999px; padding: 3px 10px; font-size: .88rem; background: color-mix(in srgb, var(--cor-enc) 14%, var(--cartao)); color: var(--tinta); border: 1px solid color-mix(in srgb, var(--cor-enc) 35%, transparent); }
.chips-enc li b { color: var(--tinta); }

/* ---------- rimas, listas, nuvens ---------- */
.pronuncia-rima { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: .82rem; color: var(--tinta-2); }
.pronuncia-rima [data-final-rima] { overflow-wrap: anywhere; color: var(--tinta); }
.aviso-rima { margin-top: 8px; padding: 7px 10px; font-size: .82rem; line-height: 1.4; }
.filtros-rima { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; }
.segmentado { display: inline-flex; background: var(--fundo); border: 1px solid var(--linha); border-radius: 12px; padding: 3px; gap: 2px; }
.segmentado button { border: 0; background: transparent; padding: 6px 12px; border-radius: 9px; font-weight: 700; font-size: .92rem; color: var(--tinta-2); }
.segmentado button[aria-selected="true"], .segmentado button[aria-pressed="true"] { background: var(--cartao); color: var(--tinta); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.segmentado button small { color: var(--tinta-3); font-weight: 600; }
.segmentado.pequeno button { padding: 5px 10px; font-size: .88rem; }
.chips-filtro { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-filtro.rolagem { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips-filtro.rolagem::-webkit-scrollbar { display: none; }
.campo-mini { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--tinta-3); font-weight: 600; }
.campo-mini input { width: 86px; height: 34px; border: 1px solid var(--linha-2); border-radius: 10px; background: var(--fundo); padding: 0 10px; }
.grupo-rimas { margin: 4px 0 14px; }
.grupo-rimas .t-grupo { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin: 0 0 6px; }
.grupo-rimas .t-grupo small { color: var(--tinta-3); font-weight: 600; background: var(--fundo-2); border-radius: 999px; padding: 0 6px; margin-left: 4px; letter-spacing: 0; }
.nuvem { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nuvem li > a, .nuvem li > span {
  display: inline-block; padding: 5px 11px; border-radius: 10px; background: var(--fundo); border: 1px solid var(--linha); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.nuvem li > a { color: var(--marca-tinta); background: var(--marca-suave); border-color: transparent; }
.nuvem li > a:hover { background: var(--marca); color: #fff; }
.nuvem li.anagrama > span, .nuvem li.anagrama > a { background: var(--tonica); color: var(--tonica-texto); border-color: var(--tonica); }
.mais { margin-top: 8px; border: 0; background: none; color: var(--marca); font-weight: 750; padding: 4px 0; }
.lista-palavras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
html[lang="de"] .lista-palavras { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.lista-palavras a, .lista-palavras .sem-link { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: var(--cartao); border: 1px solid var(--linha); text-decoration: none; color: var(--tinta); transition: border-color .15s, transform .15s; }
.lista-palavras a:hover { border-color: var(--marca); transform: translateY(-1px); }
.lista-palavras b { font-weight: 700; }
.lista-palavras span span, .lista-palavras a span { color: var(--tinta-3); font-size: .85rem; }
.chips-links { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-links a { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--cartao); border: 1px solid var(--linha); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .93rem; }
.chips-links a:hover { border-color: var(--marca); color: var(--marca); }
.grupo-lista h2 small { font-size: .8rem; color: var(--tinta-3); font-weight: 600; }
.lista-pagina { margin-bottom: 28px; }
.grupo-lista { margin-bottom: 20px; }
.linha-pilulas .silabas { font-size: 1.6rem; }

/* ---------- palavras com letras / formar ---------- */
.linha-tamanho { display: grid; gap: 6px; }
.rotulo, .campo > span { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.grade-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 12px; }
.campo { display: grid; gap: 4px; min-width: 0; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 44px; border: 1.5px solid var(--linha-2); border-radius: 12px; background: var(--fundo); padding: 8px 12px; font-size: 1rem; font-weight: 600;
}
.campo textarea { resize: vertical; min-height: 64px; font-weight: 500; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--marca); background: var(--cartao); }
.campo small { color: var(--tinta-3); font-size: .8rem; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; margin: 6px 14px 0 0; }
.check input { width: 18px; height: 18px; accent-color: var(--marca); }
.barra-resultado { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.sorteada { margin-top: 8px; padding: 12px; border-radius: 14px; background: var(--marca-suave); color: var(--marca-tinta); font-weight: 750; font-size: 1.4rem; text-align: center; animation: surgir .25s ease-out; }
.ladrilhos { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; min-height: 46px; }
.ladrilho { width: 40px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--sol); color: #3b2a00; font-weight: 850; font-size: 1.35rem; text-transform: uppercase; box-shadow: 0 3px 0 #c99600; animation: pular .3s both; }
.ladrilho.coringa { background: var(--fundo-2); color: var(--tinta-3); box-shadow: 0 3px 0 var(--linha-2); }
.grupo-formar { margin-bottom: 12px; }
.grupo-formar h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin-bottom: 6px; }

/* ---------- Termo ---------- */
.termo { display: grid; justify-items: center; gap: 10px; }
.termo-instrucao { text-align: center; margin: 0; }
.termo-grade { display: grid; gap: 5px; }
.termo-linha { display: flex; gap: 5px; justify-content: center; }
.tecla-termo {
  width: clamp(42px, 12vw, 56px); aspect-ratio: 1; border-radius: 10px; border: 2px solid var(--linha-2); background: var(--cartao);
  font-size: clamp(1.4rem, 6vw, 1.8rem); font-weight: 850; text-transform: uppercase; color: var(--tinta); display: grid; place-items: center; padding: 0; transition: background .15s, border-color .15s, transform .12s;
}
.tecla-termo:disabled { cursor: default; }
.tecla-termo.cheia { border-color: var(--tinta-3); animation: pular .15s; }
.tecla-termo.atual { border-color: var(--marca); }
.tecla-termo.c { background: var(--cinza); border-color: var(--cinza); color: #fff; }
.tecla-termo.a { background: var(--amarelo); border-color: var(--amarelo); color: #fff; }
.tecla-termo.v { background: var(--verde); border-color: var(--verde); color: #fff; }
.tecla-termo:not(:disabled):hover { transform: translateY(-1px); }
.termo-barra { display: flex; gap: 8px; align-items: center; }
.teclado { display: grid; gap: 6px; width: 100%; max-width: 520px; }
.teclado-linha { display: flex; gap: 4px; justify-content: center; }
.tecla { flex: 1; max-width: 44px; height: 46px; border: 0; border-radius: 8px; background: var(--fundo-2); color: var(--tinta); font-weight: 800; text-transform: uppercase; font-size: 1rem; padding: 0; }
.tecla.larga { max-width: 62px; flex: 1.5; display: grid; place-items: center; }
.tecla.c { background: var(--cinza); color: #fff; } .tecla.a { background: var(--amarelo); color: #fff; } .tecla.v { background: var(--verde); color: #fff; }
.termo-cores { text-align: center; }
.bolinha { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin: 0 3px 0 6px; vertical-align: -1px; }
.bolinha.c { background: var(--cinza); } .bolinha.a { background: var(--amarelo); } .bolinha.v { background: var(--verde); }
.termo-resultado { margin-top: 14px; border-top: 1px solid var(--linha); padding-top: 6px; overflow-y: auto; overscroll-behavior: contain; }
.termo-resultado > .rolagem { flex: none; overflow: visible; }
@media (max-width: 999px) {
  .palco:has(> .ferramenta[data-ferramenta="termo"]) { height: var(--altura-palco); }
  .palco > .ferramenta[data-ferramenta="termo"] { flex: 1 1 0; }
  .ferramenta[data-ferramenta="termo"] > .painel-entrada { flex: 1 1 74%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .ferramenta[data-ferramenta="termo"] > .termo-resultado { flex: 1 1 26%; min-height: 130px; }
}
.sugestoes { margin: 4px 0 10px; }
.sugestoes .t-grupo { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin: 6px 0; }
.sugestoes .nuvem span { background: var(--marca-suave); color: var(--marca-tinta); border-color: transparent; }

/* ---------- caça-palavras ---------- */
.opcoes { display: grid; gap: 10px; min-width: 0; }
.barra-caca { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: end; justify-content: space-between; }
.campo-tema { flex: 1 1 180px; }
.botao.pequeno { min-height: 38px; padding: 0 12px; font-size: .9rem; }
.mais-filtros { margin-top: 8px; }
.mais-filtros summary, .mais-opcoes summary { cursor: pointer; color: var(--marca); font-weight: 700; font-size: .92rem; padding: 6px 0; list-style-position: inside; }
.mais-opcoes { margin-top: 10px; border-top: 1px solid var(--linha); padding-top: 4px; }
.mais-opcoes > .opcoes { padding-top: 6px; }
.linha-opcoes { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.campo.curto { max-width: 150px; }
.painel-entrada > .acoes { margin-top: 10px; }
.caca-folha { background: #fff; color: #1d1a2b; border-radius: 14px; border: 1px solid var(--linha); padding: 12px; }
.folha-nome > span { white-space: nowrap; }
.folha-cabeca { text-align: center; margin-bottom: 10px; }
.folha-titulo { font-size: 1.4rem; margin: 0 0 6px; letter-spacing: -.01em; }
.folha-nome { font-size: .9rem; color: #4a4560; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; align-items: baseline; margin: 0; }
.linha-escrever { display: inline-block; width: 180px; border-bottom: 1.5px solid #8a8696; }
.linha-escrever.curta { width: 90px; }
.caca-jogo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.caca-grade-envolta { position: relative; width: 100%; min-width: 0; max-width: 560px; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; container-type: inline-size; }
.caca-grade { min-width: 0; }
.cel { min-width: 0; overflow: hidden; }
.caca-grade { display: grid; grid-template-columns: repeat(var(--colunas, 13), 1fr); aspect-ratio: var(--colunas, 13) / var(--linhas, 13); border: 2px solid #1d1a2b; border-radius: 10px; overflow: hidden; background: #fff; }
.cel { display: grid; place-items: center; font-weight: 800; font-size: min(1.5rem, calc((100cqw - 4px) / var(--colunas, 13) * .6)); line-height: 1; color: #1d1a2b; position: relative; z-index: 1; font-family: var(--texto); }
.cel.marcada { color: #fff; }
.cel.composta { font-size: min(1rem, calc((100cqw - 4px) / var(--colunas, 13) * .95 / var(--caracteres, 2))); }
.tecla-termo.composta { font-size: 1.1rem; }
.caca-tracos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.caca-grade { position: relative; z-index: 1; background: transparent; }
.caca-grade-envolta { background: #fff; border-radius: 10px; }
.caca-tracos line { stroke-linecap: round; }
.caca-lista { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 12px; font-weight: 650; font-size: .95rem; }
.caca-lista li { break-inside: avoid; padding: 2px 0 2px 18px; position: relative; text-transform: uppercase; }
.caca-lista li::before { content: ""; position: absolute; left: 0; top: .5em; width: 11px; height: 11px; border: 1.5px solid #8a8696; border-radius: 3px; }
.caca-lista li.achada { color: #8a8696; text-decoration: line-through; }
.caca-lista li.achada::before { background: var(--verde); border-color: var(--verde); }
.caca-folha .nota { color: #6e6984; text-align: center; }
.caca-folha.minusculas .cel, .caca-folha.minusculas .caca-lista li { text-transform: lowercase; }
.gabarito-folha { margin-top: 16px; }
/* a grade é o maior quadrado que cabe no espaço da folha, em largura e em altura */
.palco.cheio .painel-saida.caca { container: folha / size; overflow-y: auto; overscroll-behavior: contain; }
.palco.cheio .caca-folha { --reserva: 128px; margin-block: auto; }
/* área mais alta que larga (monitor grande): a lista desce para baixo da grade e a grade cresce */
@container folha (min-width: 520px) and (max-aspect-ratio: 1 / 1) {
  .palco.cheio .caca-folha .caca-jogo { grid-template-columns: minmax(0, 1fr); }
  .palco.cheio .caca-folha .caca-lista { columns: 3; }
  .palco.cheio .caca-folha { --reserva: 250px; }
}
.palco.cheio .caca-grade-envolta { width: min(100%, max(260px, calc(100cqh - var(--reserva)))); max-width: none; }

/* ---------- folhas para imprimir ---------- */
.previa { margin-top: 12px; background: var(--fundo-2); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; overflow-y: auto; overscroll-behavior: contain; }
.folha-svg { flex: none; aspect-ratio: var(--papel-proporcao, 210 / 297); width: 100%; max-width: 640px; background: #fff; box-shadow: var(--sombra); border-radius: 6px; overflow: hidden; line-height: 0; }
.folha-svg svg { width: 100%; height: auto; display: block; }
/* a página A4 inteira cabe na altura da prévia (mais páginas: rola) */
.palco.cheio .previa > .folha-svg { height: 100%; width: auto; max-width: 100%; }
.palco.cheio .previa > .folha-svg svg { width: 100%; height: 100%; }

/* ---------- conteúdo de SEO ---------- */
.conteudo-seo { max-width: 760px; }
.conteudo-seo section { margin-bottom: 26px; }
.conteudo-seo p, .conteudo-seo li { color: var(--tinta-2); }
.conteudo-seo b { color: var(--tinta); }
.regras { padding-left: 1.2em; margin: 0; }
.regras li { margin-bottom: .45em; }
.regras li::marker { color: var(--marca); font-weight: 800; }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; font-size: .94rem; margin: 4px 0 8px; }
.tabela th, .tabela td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela th { background: var(--fundo-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); }
.tabela tr:last-child td { border-bottom: 0; }
.mais-links { margin-top: 10px; }
.mais-links a:not(.botao) { font-weight: 700; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.faq details { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 0 14px; margin-bottom: 8px; }
.faq summary { cursor: pointer; padding: 12px 24px 12px 0; font-weight: 700; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 9px; font-size: 1.3rem; color: var(--marca); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 12px; color: var(--tinta-2); }
.texto-corrido { padding-bottom: 20px; }
.texto-corrido h2 { margin-top: 1.2em; }

/* ---------- cartões de ferramenta ---------- */
.relacionadas { margin: 8px 0 26px; }
.cartoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.cartao-ferr { display: flex; gap: 12px; align-items: center; padding: 14px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; text-decoration: none; color: var(--tinta); transition: transform .15s, box-shadow .15s, border-color .15s; height: 100%; }
.cartao-ferr:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--marca); color: var(--tinta); }
.cartao-icone { width: 46px; height: 46px; flex: none; border-radius: 13px; background: var(--marca-suave); color: var(--marca); display: grid; place-items: center; }
.cartao-icone .i { width: 26px; height: 26px; }
.cartao-txt { display: grid; gap: 1px; }
.cartao-txt b { font-size: 1.02rem; }
.cartao-txt span { color: var(--tinta-3); font-size: .9rem; line-height: 1.35; }
.grupo-ferr { margin: 0 0 28px; }
.grupo-ferr:nth-of-type(3) .cartao-icone { background: var(--tonica-suave); color: var(--tonica-2); }
.grupo-ferr:nth-of-type(4) .cartao-icone { background: color-mix(in srgb, var(--sol) 28%, var(--cartao)); color: #9a6a00; }
.achou-erro { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; background: var(--cartao); border: 1px dashed var(--linha-2); border-radius: 18px; padding: 16px; margin: 0 0 28px; }
.achou-erro h2 { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.achou-erro h2 .i { color: var(--tonica); }
.achou-erro p { margin: 0; color: var(--tinta-3); font-size: .92rem; max-width: 560px; }

/* ---------- início ---------- */
.hero { position: relative; padding: 4px 0 6px; margin-bottom: 26px; }
.hero h1 { font-size: clamp(1.55rem, 6.6vw, 2.9rem); max-width: 18ch; }
.hero .lead { margin-bottom: 14px; max-width: 52ch; }
.hero .ferramenta { margin-bottom: 0; }
.hero-fundo { display: none; }
.resumo-extra { display: grid; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha); }
.resumo-bloco h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin-bottom: 8px; }
.selo { background: linear-gradient(135deg, var(--marca) 0%, #7b5cff 60%, var(--tonica) 140%); color: #fff; border-radius: var(--raio); padding: 20px; margin-bottom: 30px; }
.selo h2 { color: #fff; }
.selo p { margin: 0; color: rgba(255, 255, 255, .92); }
.selo a { color: #fff; font-weight: 750; }

/* ---------- migalhas e rodapé ---------- */
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 auto 18px; font-size: .85rem; color: var(--tinta-3); }
.migalhas li + li::before { content: "›"; margin-right: 4px; color: var(--linha-2); }
.migalhas a { color: var(--tinta-3); }
.rodape { background: var(--fundo-2); border-top: 1px solid var(--linha); padding: 30px 0 34px; margin-top: 10px; }
.rodape-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rodape h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin-bottom: 8px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rodape a { color: var(--tinta-2); text-decoration: none; font-size: .93rem; }
.rodape a:hover { color: var(--marca); text-decoration: underline; }
.privacidade { display: flex; gap: 8px; align-items: center; color: var(--tinta-3); font-size: .9rem; margin: 22px 0 6px; }
.privacidade .i { color: var(--verde); }
.copy { color: var(--tinta-3); font-size: .85rem; margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.marca-mini { display: inline-flex; gap: 2px; font-weight: 800; font-size: .8rem; }
.marca-mini span { background: var(--cartao); border: 1px solid var(--linha); border-radius: 5px; padding: 0 3px; color: var(--tinta); }
.marca-mini .tonica { background: var(--tonica); border-color: var(--tonica); color: var(--tonica-texto); }

/* ---------- telas maiores ---------- */
@media (min-width: 640px) {
  .ferramenta { padding: 20px; }
  .porque { grid-template-columns: 170px 1fr; gap: 16px; align-items: baseline; }
  .grade-campos { grid-template-columns: repeat(3, 1fr); }
  .cartoes { grid-template-columns: repeat(2, 1fr); }
  .grade-enc:not(.compacto) { grid-template-columns: 1fr; }
  .grade-enc.compacto { grid-template-columns: repeat(3, 1fr); }
  .resumo-extra { grid-template-columns: 1fr 1fr; }
  .caca-jogo { grid-template-columns: minmax(0, 1fr) 190px; align-items: start; }
  .caca-lista { columns: 1; }
  .rodape-colunas { grid-template-columns: repeat(4, 1fr); }
  .menu-painel { grid-template-columns: 1fr 1fr; }
  .menu-grupo:first-child { grid-column: span 2; }
  .menu-grupo:first-child ul { grid-template-columns: repeat(4, 1fr); }
  .menu-listas, .menu-painel .idiomas { grid-column: span 2; }
}
@media (min-width: 900px) {
  .nav-rapida { display: flex; }
  .cartoes { grid-template-columns: repeat(3, 1fr); }
  .relacionadas .cartoes { grid-template-columns: repeat(4, 1fr); }
  .cabeca { padding: 18px 0 18px; }
  .hero { padding: 26px 0 10px; }
  .hero-fundo { display: block; position: absolute; inset: -34px -40px auto auto; width: 360px; height: 220px; pointer-events: none; z-index: -1; }
  .hero-fundo span { position: absolute; display: grid; place-items: center; width: 74px; height: 80px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); box-shadow: var(--sombra); font-weight: 850; font-size: 2.1rem; color: var(--marca); }
  .hero-fundo span:nth-child(1) { right: 40px; top: 10px; transform: rotate(8deg); color: var(--tonica); }
  .hero-fundo span:nth-child(2) { right: 140px; top: 40px; transform: rotate(-10deg); }
  .hero-fundo span:nth-child(3) { right: 230px; top: 4px; transform: rotate(4deg); width: 96px; }
  .hero-fundo span:nth-child(4) { right: 70px; top: 120px; transform: rotate(-6deg); background: var(--sol); color: #3b2a00; border-color: transparent; }
  .hero-fundo span:nth-child(5) { right: 180px; top: 140px; transform: rotate(12deg); }
  .resumo-extra { grid-template-columns: 1.2fr 1fr; }
}

/* ---------- celular: o máximo de ferramenta na primeira tela ---------- */
@media (max-width: 639px) {
  :root { --h-topo: 54px; }
  .palco { margin-bottom: 20px; }
  /* ações numa linha só: copiar e link viram ícone; os atalhos rolam de lado */
  .acoes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .acoes::-webkit-scrollbar { display: none; }
  .acoes .botao { flex: none; }
  .acoes [data-copiar] span, .acoes [data-link] span, .acoes [data-mostrar-gabarito] span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .acoes [data-copiar], .acoes [data-link], .acoes [data-mostrar-gabarito] { width: 40px; padding: 0; }
  .filtros-rima { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 8px; gap: 8px; }
  .filtros-rima::-webkit-scrollbar { display: none; }
  .filtros-rima > *, .filtros-rima .chips-filtro { flex: none; flex-wrap: nowrap; }
  .ajuda-rima { font-size: .78rem; line-height: 1.35; margin: 6px 0 0; }
  .ladrilhos { min-height: 40px; margin-top: 8px; }
  .ladrilho { width: 34px; height: 38px; font-size: 1.15rem; }
  /* folhas para imprimir: opções compactas, prévia da página inteira */
  .painel-entrada .chips-filtro { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .painel-entrada .chips-filtro::-webkit-scrollbar { display: none; }
  .painel-entrada .campo > span { font-size: .68rem; }
  .painel-entrada .campo textarea { min-height: 52px; }
  .mais-opcoes { margin-top: 6px; }
  .previa { margin-top: 8px; padding: 8px; }
  /* caça-palavras: tema e tamanho numa linha, palavras em linha embaixo da grade */
  .ferramenta[data-ferramenta="caca"] .campo-tema { flex: 1 1 0; }
  .ferramenta[data-ferramenta="caca"] .barra-caca .campo > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ferramenta[data-ferramenta="caca"] .opcoes { gap: 8px; }
  .palco.cheio .ferramenta[data-ferramenta="caca"] > .painel-entrada:has([data-campo-palavras]:not([hidden])) { max-height: 48%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .ferramenta[data-ferramenta="caca"] .painel-entrada > .acoes { margin-top: 8px; }
  .ferramenta[data-ferramenta="caca"] [data-nova] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ferramenta[data-ferramenta="caca"] [data-nova] { width: 40px; padding: 0; }
  .ferramenta[data-ferramenta="caca"] .barra-caca { flex-wrap: nowrap; align-items: end; gap: 8px; }
  .ferramenta[data-ferramenta="caca"] .campo select { min-height: 40px; padding: 6px 8px; }
  .painel-saida.caca { margin-top: 8px; }
  .caca-folha { padding: 8px; }
  .folha-cabeca { margin-bottom: 6px; }
  .folha-titulo { font-size: 1.1rem; margin-bottom: 0; }
  .folha-nome { display: none; }
  .caca-jogo { grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; align-items: center; }
  .caca-lista { columns: auto; font-size: .75rem; line-height: 1.35; }
  .caca-lista li { padding-left: 15px; }
  .caca-lista li::before { width: 9px; height: 9px; top: .45em; }
  .caca-folha .nota { font-size: .78rem; margin: 4px 0 0; }
  /* A lista também precisa aparecer: reserva espaço para título, palavras e instrução. */
  .palco.cheio .caca-folha { --reserva: 80px; }
  .topo-linha { height: var(--h-topo); }
  .marca { font-size: 1.02rem; }
  .botao-icone, .botao-menu { height: 38px; }
  .botao-icone { width: 38px; }
  .cabeca { padding: 2px 0 8px; }
  .cabeca h1 { font-size: 1.3rem; margin: 0; }
  .cabeca .lead { display: none; }
  .cabeca .lead.escopo-lista { display: block; }
  .nominal-it .cabeca .lead.resposta-direta { display: block; }
  .hero h1 { font-size: 1.4rem; margin-bottom: .3em; }
  .hero .lead { display: none; }
  .ferramenta { padding: 10px; border-radius: 16px; }
  .caixa input { height: 52px; font-size: 1.15rem; }
  .exemplos { padding-top: 8px; }
  .saida { margin-top: 10px; min-height: 0; }
  .silabas { margin-bottom: 8px; }
  .fatos { gap: 4px; margin-bottom: 8px; }
  .fatos li { padding: 2px 9px; font-size: .84rem; }
  .porque { padding: 6px 0; }
  .porque dd { font-size: .92rem; line-height: 1.45; }
  .acoes { margin-top: 8px; gap: 6px; }
  .botao { min-height: 38px; padding: 0 12px; font-size: .9rem; }
  .termo-instrucao { font-size: .82rem; }
  .tecla { height: 42px; }
  .grade-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .grade-campos .campo input { min-height: 40px; padding: 6px 8px; }
  .rotulo, .campo > span { font-size: .7rem; }
}

/* ---------- desktop: a ferramenta inteira cabe na tela; só o resto rola ---------- */
@media (min-width: 1000px) {
  .cabeca { padding: 10px 0 12px; }
  .cabeca h1 { font-size: 2rem; }
  /* palavra: entrada em cima; pílulas e fatos à esquerda, explicações à direita */
  .resultado-palavra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "pil dl" "fat dl" "ext dl" ". dl"; column-gap: 32px; align-items: start; }
  .resultado-palavra > .silabas { grid-area: pil; }
  .resultado-palavra > .fatos { grid-area: fat; }
  .resultado-palavra > .grade-enc { grid-area: ext; }
  .resultado-palavra > .porques { grid-area: dl; border-top: 0; }
  .resultado-palavra .porque:first-child { padding-top: 0; }
  .grade-enc.compacto { grid-template-columns: 1fr; }
  /* título e subtítulo na mesma faixa: sobra altura para a ferramenta */
  .palco > .cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; padding: 10px 0 12px; }
  .palco > .cabeca h1 { font-size: 1.75rem; margin: 0; }
  .palco > .cabeca .lead { flex: 1 1 320px; min-width: 0; font-size: .95rem; }
  /* opções à esquerda, resultado à direita; cada coluna rola sozinha se precisar */
  .ferramenta.lado { flex-direction: row; gap: 28px; align-items: stretch; }
  .ferramenta.lado > .painel-entrada { flex: 0 0 340px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .ferramenta.lado > .painel-saida { flex: 1 1 0; }
  .ferramenta.lado .saida { margin-top: 0; }
  .ferramenta.lado > .painel-saida > .contagem, .ferramenta.lado > .painel-saida > .barra-resultado { margin-top: 0; }
  .ferramenta[data-ferramenta="letras"] .grade-campos { grid-template-columns: 1fr 1fr; }
  .filtros-rima { flex-direction: column; align-items: flex-start; }
  .ferramenta[data-ferramenta="termo"] > .painel-entrada { flex-basis: 420px; }
  .termo-resultado { margin-top: 0; border-top: 0; padding-top: 0; }
  .ferramenta[data-ferramenta="caca"] > .painel-entrada, .ferramenta[data-ferramenta="folha"] > .painel-entrada, .ferramenta[data-ferramenta="pontilhada"] > .painel-entrada { flex-basis: 300px; }
  .painel-saida.previa, .painel-saida.caca { margin-top: 0; }
  .caca-folha .caca-jogo { grid-template-columns: minmax(0, 1fr) 170px; }
  .hero { padding: 6px 0 0; margin-bottom: 26px; }
  .hero > .cabeca { display: block; padding: 10px 0 14px; }
  .hero > .cabeca h1 { font-size: 2.1rem; max-width: none; margin-bottom: .15em; }
  .hero > .cabeca .lead { max-width: 52ch; }
}
/* notebook de tela baixa (1366×768): tudo um pouco mais justo */
@media (min-width: 1000px) and (max-height: 760px) {
  .palco > .cabeca { padding: 6px 0 8px; }
  .palco > .cabeca h1, .hero > .cabeca h1 { font-size: 1.55rem; }
  .ferramenta { padding: 14px 16px; }
  .caixa input { height: 50px; font-size: 1.15rem; }
  .exemplos { padding-top: 6px; }
  .silabas { font-size: 2.5rem; margin-bottom: 8px; }
  .porque { padding: 6px 0; }
  .hero-fundo { transform: scale(.8); transform-origin: top right; }
}

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

/* ---------- impressão: só a folha ---------- */
@page { size: A4; margin: 0; }
@media print {
  html, body { background: #fff !important; color: #000; }
  .so-tela, .topo, .rodape, .migalhas, .relacionadas, .achou-erro, .conteudo-seo, .cabeca, .toast { display: none !important; }
  .conteudo-seo:has(> .atividade-editorial) { display: block !important; max-width: none; padding: 16mm; }
  .conteudo-seo:has(> .atividade-editorial) > :not(.atividade-editorial) { display: none !important; }
  .atividade-editorial { break-inside: avoid; font-size: 12pt; line-height: 1.45; }
  .atividade-editorial, .atividade-editorial p, .atividade-editorial summary { color: #000 !important; }
  .atividade-editorial details { border: 0; padding: 0; margin-top: 6mm; }
  main.largura { max-width: none; padding: 0; }
  .palco { display: block; height: auto; max-height: none; margin: 0; }
  .ferramenta { border: 0; box-shadow: none; padding: 0; margin: 0; background: #fff; display: block; }
  .ferramenta:not([data-ferramenta="caca"]):not([data-ferramenta="folha"]):not([data-ferramenta="pontilhada"]):not([data-ferramenta="embaralhadas"]):not([data-ferramenta="sudoku"]),
  .painel-entrada, .painel-saida > :not(.folha-a4) { display: none !important; }
  .painel-saida { display: block; overflow: visible; height: auto; container-type: normal !important; }
  .previa { background: none; padding: 0; margin: 0; display: block; }
  .palco.cheio .previa > .folha-svg { height: auto; width: auto; }
  .folha-a4 { width: var(--papel-largura, 210mm); min-height: var(--papel-altura, 297mm); margin: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; page-break-after: always; break-after: page; }
  .folha-a4:last-child { page-break-after: auto; break-after: auto; }
  .folha-svg { max-width: none; }
  .folha-svg svg { width: var(--papel-largura, 210mm); height: var(--papel-altura, 297mm); }
  .caca-folha { padding: 16mm 16mm 12mm; display: block; }
  .caca-folha .folha-titulo { font-size: 22pt; }
  .caca-folha .caca-jogo { grid-template-columns: 1fr; gap: 8mm; }
  .caca-grade-envolta, .palco.cheio .caca-grade-envolta { width: 100%; max-width: min(178mm, calc(var(--papel-altura, 297mm) - 115mm)); }
  .cel, .palco.cheio .cel { font-size: 15pt; }
  .cel.composta, .palco.cheio .cel.composta { font-size: min(15pt, calc((100cqw - 4px) / var(--colunas, 13) * 1.3 / var(--caracteres, 2))); }
  .folha-nome { display: flex !important; }
  .folha-nome[hidden] { display: none !important; }
  .caca-lista { display: block !important; }
  .caca-folha .caca-lista { columns: 3; font-size: 12pt; }
  .gabarito-folha:not([data-imprimir-gabarito]) { display: none !important; }
  .gabarito-folha[data-imprimir-gabarito] { display: block !important; }
  .caca-folha:not(.gabarito-folha) .caca-tracos { display: none; }
  .caca-folha:not(.gabarito-folha) .cel.marcada { color: #1d1a2b; }
}

/* Passatempos e fotografia local nas folhas. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.so-impressao { display: none; }
.foto-opcoes { border-top: 1px solid var(--linha); padding-top: 10px; display: grid; gap: 8px; }
.foto-opcoes input[type=file] { width: 100%; min-width: 0; font-size: .82rem; }
.foto-opcoes small { color: var(--tinta-2); line-height: 1.45; }
.foto-opcoes [data-foto-ajustes] { display: grid; gap: 8px; }
.foto-opcoes input[type=range] { width: 100%; accent-color: var(--marca); }
.foto-opcoes .nota:empty { display: none; }
.folha-a4 { position: relative; isolation: isolate; }
.folha-a4 > .foto-fundo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; border-radius: inherit; }
.folha-a4:has(> .foto-fundo) .caca-grade-envolta { background: transparent; }
.jogo-status { font-size: .85rem; line-height: 1.35; margin: 8px 0; min-height: 1.3em; }
.forca-jogo { align-items: center; justify-content: center; gap: 10px; overflow-y: auto; }
.forca-desenho { width: 130px; height: 130px; fill: none; stroke: var(--tinta); stroke-width: 5; stroke-linecap: round; }
.forca-palavra { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; text-transform: uppercase; }
.forca-palavra span { min-width: 22px; border-bottom: 2px solid var(--linha-2); font-weight: 800; font-size: 1.35rem; text-align: center; }
.forca-teclado { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; width: 100%; max-width: 450px; }
.forca-teclado button { border: 1px solid var(--linha); border-radius: 6px; color: var(--tinta); background: var(--fundo-2); min-height: 40px; padding: 0; font-weight: 750; }
.forca-teclado button.acertou, input.acertou { background: #e1f4e9; color: #135b32; }
.forca-teclado button.errou { opacity: .45; text-decoration: line-through; }
.passatempo-previa { overflow-y: auto; container: passatempo / size; margin-top: 8px; align-items: center; }
.passatempo-folha { width: 100%; max-width: 640px; background: #fff; color: #1d1a2b; padding: 12px; border: 1px solid var(--linha); border-radius: 12px; }
.passatempo-instrucao { margin: 4px 0 12px; font-size: .85rem; line-height: 1.4; color: #4a4560; }
.embaralhadas-lista { display: grid; gap: 10px; padding-left: 24px; margin: 12px 0; }
.embaralhadas-lista li { padding-left: 3px; }
.letras-misturadas { display: inline-block; width: 48%; font-weight: 750; letter-spacing: .1em; overflow-wrap: anywhere; vertical-align: middle; font-size: .9rem; }
.embaralhadas-lista label { display: inline-block; width: 50%; }
.embaralhadas-lista input { width: 100%; min-width: 0; border: 1px solid #b5b0c5; border-radius: 5px; background: #ffffffc9; color: #1d1a2b; padding: 6px; }
[aria-invalid=true] { outline: 2px solid #be3420; outline-offset: -2px; }
.sudoku-grade { display: grid; grid-template-columns: repeat(9, 1fr); width: min(100%, 460px, calc(100cqh - 125px)); aspect-ratio: 1; border: 2px solid #1d1a2b; margin: 10px auto; }
.sudoku-cel { display: grid; place-items: center; min-width: 0; min-height: 0; padding: 0; border: 0; border-right: 1px solid #b1aabe; border-bottom: 1px solid #b1aabe; border-radius: 0; font: 600 clamp(.9rem, 2.4vw, 1.5rem) var(--texto); color: #4b2bcc; background: #ffffff85; aspect-ratio: 1; }
.sudoku-cel.pista { color: #1d1a2b; font-weight: 800; background: #eae6f080; }
.sudoku-cel.selecionada { background: #dfd5ff; box-shadow: inset 0 0 0 2px #5b3df5; }
.sudoku-cel[data-bloco-col="2"], .sudoku-cel[data-bloco-col="5"] { border-right: 2px solid #1d1a2b; }
.sudoku-cel[data-bloco-linha="2"], .sudoku-cel[data-bloco-linha="5"] { border-bottom: 2px solid #1d1a2b; }
.sudoku-cel[data-bloco-col="8"] { border-right: 0; }
.sudoku-cel[data-bloco-linha="8"] { border-bottom: 0; }
.sudoku-teclado { display: flex; gap: 4px; max-width: 460px; margin: 8px auto 0; }
.sudoku-teclado button { flex: 1; min-width: 0; min-height: 34px; padding: 0; background: #ede8ff; color: #3a22b5; border: 1px solid #cec5ed; border-radius: 5px; font-weight: 750; }
.passatempo-folha.gabarito-folha { display: none; }
@media screen and (max-width: 899px) {
  .palco.cheio .painel-entrada:has(.mais-opcoes[open]) { max-height: 48%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .ferramenta:is([data-ferramenta=embaralhadas],[data-ferramenta=sudoku]) .painel-entrada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; column-gap: 8px; }
  .ferramenta:is([data-ferramenta=embaralhadas],[data-ferramenta=sudoku]) .painel-entrada > .opcoes,
  .ferramenta:is([data-ferramenta=embaralhadas],[data-ferramenta=sudoku]) .painel-entrada > .jogo-status,
  .ferramenta:is([data-ferramenta=embaralhadas],[data-ferramenta=sudoku]) .painel-entrada > details[open] { grid-column: 1 / -1; }
  .ferramenta:is([data-ferramenta=embaralhadas],[data-ferramenta=sudoku]) .painel-entrada > .acoes { margin: 0; }
  .ferramenta:is([data-ferramenta=embaralhadas],[data-ferramenta=sudoku]) .mais-opcoes { margin: 0; padding: 0; border: 0; }
  .ferramenta[data-ferramenta=sudoku] .opcoes > .acoes { flex-wrap: nowrap; }
  .ferramenta[data-ferramenta=sudoku] .opcoes > .acoes .botao { padding-inline: 8px; }
  .forca-desenho { width: 70px; height: 70px; }
  .forca-jogo { gap: 5px; }
  .forca-teclado button { min-height: 32px; }
  .forca-palavra span { font-size: 1.05rem; min-width: 16px; }
  .ferramenta:is([data-ferramenta=forca],[data-ferramenta=embaralhadas],[data-ferramenta=sudoku]) .painel-entrada { max-height: 48%; overflow-y: auto; }
  .ferramenta:is([data-ferramenta=embaralhadas],[data-ferramenta=sudoku]) .botao { min-height: 32px; font-size: .8rem; padding-inline: 10px; }
  .ferramenta:is([data-ferramenta=embaralhadas],[data-ferramenta=sudoku]) .opcoes { gap: 6px; }
  .ferramenta:is([data-ferramenta=embaralhadas],[data-ferramenta=sudoku]) .acoes { gap: 6px; }
  .passatempo-folha { padding: 8px; }
  .passatempo-instrucao { font-size: .72rem; margin: 4px 0; }
  .ferramenta[data-ferramenta=sudoku] .folha-titulo { display: none; }
  .sudoku-grade { width: min(100%, calc(100cqh - 90px)); margin: 6px auto; }
  .sudoku-teclado { margin-top: 6px; }
  .sudoku-cel { font-size: .9rem; }
  .embaralhadas-lista { gap: 8px; }
}
@media print {
  .so-impressao { display: inline; }
  .folha-a4 > .foto-fundo { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .passatempo-previa { margin: 0; display: block; overflow: visible; }
  .passatempo-folha { max-width: none; padding: 16mm; height: var(--papel-altura, 297mm); overflow: hidden; }
  .passatempo-folha .folha-titulo { font-size: 22pt; }
  .passatempo-instrucao { font-size: 11pt; margin: 4mm 0 10mm; }
  .sudoku-grade { width: 175mm; max-width: 100%; margin: 8mm auto; }
  .sudoku-cel { font-size: 22pt; background: transparent !important; color: #1d1a2b; box-shadow: none !important; outline: none; }
  .sudoku-cel.pista { font-weight: 800; }
  .embaralhadas-lista { gap: 8mm; margin-top: 10mm; }
  .letras-misturadas { font-size: 12pt; }
  .embaralhadas-lista input { display: none; }
  .linha-resposta { display: block; height: 7mm; border-bottom: 1px solid #6e6984; }
  .gabarito-lista { font-size: 14pt; line-height: 2; }
}

.nominal-it .tabela-nominal-rolagem { max-width: 100%; overflow-x: auto; }
[data-lexico] .letras-misturadas { white-space: normal; overflow-wrap: anywhere; }

/* Proposta PL flexional: dados escritos, sem alterar o layout das ferramentas. */
.resposta-flexao .tabela-flexao { overflow-x: auto; }
.resposta-flexao table { border-collapse: collapse; width: 100%; }
.resposta-flexao caption { text-align: left; font-weight: 700; margin: .5em 0; }
.resposta-flexao th, .resposta-flexao td { text-align: left; vertical-align: top; border: 1px solid #aaa; padding: .55em; }
.resposta-flexao .marca-flexao { font-size: .85em; font-weight: 600; }
.resposta-flexao .marca-flexao.historica { display: inline-block; border: 1px solid #888; padding-inline: .2em; }
.resposta-flexao .flexao-proveniencia { overflow-wrap: anywhere; }
@media print {
  .resposta-flexao .tabela-flexao { overflow: visible; }
  .resposta-flexao table { font-size: 10pt; }
  .resposta-flexao thead { display: table-header-group; }
  .resposta-flexao tr { break-inside: avoid; }
  .resposta-flexao .flexao-proveniencia { display: none; }
}