:root { --azul-claro: #dff3ff; --azul-forte: #176b87; --verde-claro: #dff3d7; --texto: #30434c; --foco: #8b4fc3; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-height: 100vh; margin: 0; color: var(--texto); background: linear-gradient(150deg, #eefaff, #f2faed); font-family: system-ui, sans-serif; }
.pagina-familias { width: min(1180px, calc(100% - 32px)); min-height: 100vh; margin: auto; padding: 20px 0 44px; }
.navegacao-ambiente { display: flex; flex-wrap: wrap; gap: 10px; max-width: 100%; margin-bottom: 12px; }
.navegacao-ambiente .botao { min-width: 120px; background: #fff; border-color: #bddce9; cursor: pointer; }
.cartao-tela { min-height: calc(100vh - 100px); border: 3px solid #fff; border-radius: 36px; background: rgb(255 255 255 / 92%); box-shadow: 0 18px 50px rgb(53 102 122 / 14%); }
.acolhimento { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 30px; padding: clamp(28px, 6vw, 72px); }
.acolhimento h1 { margin: .2em 0; font-size: clamp(2.2rem, 6vw, 4.5rem); }
.personagens { width: min(100%, 510px); justify-self: center; }
.botao-grande { min-height: 62px; margin-top: 16px; font-size: 1.08rem; cursor: pointer; }
.aprendizagem { display: grid; align-content: center; padding: clamp(18px, 4vw, 46px); }
.visao-familias { display: grid; gap: clamp(16px, 3vw, 28px); width: 100%; animation: surgir-familias .45s ease-out both; }
.titulo-visao-familias { margin: 0; text-align: center; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.15; }
.numeros-familias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 2vw, 18px); width: 100%; }
.opcao-familia { display: grid; place-items: center; min-width: 0; min-height: 112px; border: 3px solid #c8e0ea; border-radius: 22px; color: var(--azul-forte); background: linear-gradient(145deg, #f7fcff, var(--azul-claro)); font: inherit; font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 950; cursor: pointer; touch-action: manipulation; }
.opcao-familia:hover { background: var(--azul-claro); }
.familia-trinta { display: grid; gap: clamp(18px, 3vw, 30px); width: 100%; animation: surgir-familias .45s ease-out both; }
@keyframes surgir-familias { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.cabecalho-familia { text-align: center; }
.cabecalho-familia h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.4rem); }
.sequencia-familia { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; width: 100%; }
.lugar-familia { display: grid; place-items: center; min-width: 0; min-height: 82px; border: 3px solid #c8e0ea; border-radius: 18px; color: var(--texto); background: #f7fcff; font-size: clamp(1.7rem, 4vw, 2.7rem); font-weight: 950; transition: border-color .2s ease, background .2s ease, scale .2s ease; }
.lugar-vazio { width: 55%; border-bottom: 4px solid #b9cbd2; }
.numero-descoberto { border-color: #78bb8c; background: #eff9eb; }
.numero-em-leitura { border-color: var(--foco); background: #f1eaff; box-shadow: 0 0 0 6px rgb(139 79 195 / 22%); scale: 1.08; }
.area-algarismos { display: grid; justify-items: center; gap: 16px; }
.area-algarismos h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 2rem); }
.formacao-numero { display: flex; min-height: 116px; align-items: center; justify-content: center; gap: 0; font-size: clamp(5rem, 12vw, 8rem); font-weight: 950; line-height: 1; }
.algarismo-formacao { display: block; }
.algarismo-pendente { color: #81949c; }
.algarismos-disponiveis { display: grid; grid-template-columns: repeat(9, minmax(58px, 1fr)); gap: 10px; width: min(100%, 850px); }
.algarismo-escolha, .alternativa-numero { min-width: 0; min-height: 76px; border: 3px solid #b9d7e4; border-radius: 20px; color: var(--texto); background: #fff; font: inherit; font-size: clamp(2rem, 5vw, 3rem); font-weight: 950; cursor: pointer; touch-action: manipulation; }
.algarismo-escolha:hover, .alternativa-numero:hover { background: var(--azul-claro); }
.algarismo-escolha:focus-visible, .alternativa-numero:focus-visible, .opcao-familia:focus-visible, .botao:focus-visible { outline: 5px solid var(--foco); outline-offset: 3px; }
.desafio-seguinte { display: grid; justify-items: center; gap: 18px; text-align: center; }
.desafio-seguinte h2 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.7rem); }
.alternativas-seguinte { display: grid; grid-template-columns: repeat(3, minmax(120px, 190px)); gap: 18px; }
.alternativa-numero { min-height: 120px; font-size: clamp(3rem, 8vw, 5rem); }
.alternativa-confirmada { border-color: #5ca876; background: var(--verde-claro); box-shadow: 0 0 0 6px rgb(92 168 118 / 22%); }
.feedback { min-height: 1.5em; margin: 0; color: var(--texto); font-weight: 800; }
.escolha-proxima-familia { display: grid; justify-items: center; gap: 16px; text-align: center; }
.escolha-proxima-familia h2 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.7rem); }
.acoes-proxima-familia { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.acoes-proxima-familia .botao { min-width: 150px; }
.conclusao { display: grid; justify-items: center; text-align: center; }
.conclusao h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.falha { padding: 48px; }
button:disabled { cursor: default; opacity: .72; }

@media (min-width: 821px) {
  .pagina-familias { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; height: 100svh; min-height: 0; padding: 12px 0; }
  .navegacao-ambiente { margin-bottom: 0; }
  .cartao-tela { min-height: 0; }
}