:root {
  --fundo:#f3ead9; --papel:#fffaf1; --texto:#3b2f2a; --fraco:#7d6b60; --linha:#3b2f2a;
  --cor:#d9774f; --cor-escura:#9c4a2c; --verde:#2f6f73; --amarelo:#f2b94b; --erro:#b8432f;
  --sombra:#3b2f2a;
}
* { box-sizing:border-box; }
body { margin:0; font:16px/1.55 system-ui, "Segoe UI", Roboto, sans-serif; color:var(--texto);
       background:var(--fundo) radial-gradient(#e4d6bd 1.2px, transparent 1.2px) 0 0/22px 22px; }
h1, h2, h3, .marca span { font-family:Georgia, "Iowan Old Style", "Times New Roman", serif; }
h1 { font-size:1.9rem; margin:.2rem 0 1rem; line-height:1.2; }
h2 { font-size:1.25rem; margin:1.8rem 0 .7rem; }
h3 { margin:0 0 .5rem; font-size:1.05rem; }
small { font:400 .85rem system-ui, sans-serif; color:var(--fraco); margin-left:.4rem; }
a { color:var(--cor-escura); }
.fraco { color:var(--fraco); font-size:.88rem; }

/* cabeçalho e abas em relevo */
header { display:flex; align-items:flex-end; gap:1.4rem; flex-wrap:wrap; padding:1rem 1.2rem 0;
         max-width:1000px; margin:0 auto; border-bottom:3px solid var(--linha); }
.marca { display:flex; align-items:center; gap:.4rem; text-decoration:none; color:var(--texto);
         font-size:1.5rem; font-weight:700; padding-bottom:.5rem; }
nav { display:flex; gap:.35rem; flex-wrap:wrap; margin-left:auto; }
.aba { text-decoration:none; color:var(--texto); font-weight:600; font-size:.95rem;
       padding:.5rem .95rem .45rem; background:#e9dcc6; border:3px solid var(--linha); border-bottom:0;
       border-radius:12px 12px 0 0; box-shadow:inset 0 -6px 0 #d3c3a8, 3px 0 0 var(--sombra);
       transform:translateY(6px); transition:transform .12s; }
.aba:hover { transform:translateY(2px); }
.aba.ativa { background:var(--cor); color:#fff; transform:translateY(3px);
             box-shadow:inset 0 5px 0 #eb9a78, 3px 0 0 var(--sombra); padding-bottom:.75rem; }

.sair { margin:0; display:flex; }
.sair .aba { margin:0; }

main { max-width:1000px; margin:0 auto; padding:1.6rem 1.2rem 3rem; }
.aviso { background:var(--amarelo); border:3px solid var(--linha); border-radius:12px; padding:.6rem .9rem;
         box-shadow:4px 4px 0 var(--sombra); font-weight:600; }

/* cartões */
.cartao { background:var(--papel); border:3px solid var(--linha); border-radius:16px; padding:1.1rem;
          margin-bottom:1.1rem; box-shadow:6px 6px 0 var(--sombra); }
.grade4 { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:1rem; }
.grade4 .cartao { margin:0 0 .4rem; }
.num b { display:block; font:700 2rem Georgia, serif; }
.num span { color:var(--fraco); font-size:.85rem; }
.num:nth-child(1) { background:#fbe3d6; } .num:nth-child(2) { background:#fdeec8; }
.num:nth-child(3) { background:#d9ebe9; } .num:nth-child(4) { background:#fffaf1; }

/* faixa com mascote */
.faixa { display:flex; align-items:center; gap:1rem; margin-bottom:.6rem; }
.faixa h1 { margin:0; }
.faixa p { margin:.2rem 0 0; color:var(--fraco); }
.boneco { flex:none; overflow:visible; }
.boneco .antena { animation:pisca 2.4s infinite; }
.boneco-oi .aceno { transform-origin:90px 60px; animation:aceno 1.6s ease-in-out infinite; }
.boneco-festa { animation:pulo .9s ease-in-out infinite; }
@keyframes pisca { 0%, 85%, 100% { fill:#f2b94b; } 92% { fill:#fff; } }
@keyframes aceno { 0%, 100% { transform:rotate(0); } 50% { transform:rotate(14deg); } }
@keyframes pulo { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .boneco, .boneco * { animation:none !important; } }

/* listas e etiquetas */
.lista { margin:0; padding-left:1.5rem; }
.lista li { padding:.25rem 0; }
.lista li.feito a { color:var(--fraco); text-decoration:line-through; }
.etq { font-size:.72rem; font-weight:700; padding:.08rem .5rem; border-radius:99px; border:2px solid var(--linha);
       background:#fbe3d6; }
.etq.exercicio { background:#d9ebe9; }

/* barras */
.linha-barra { display:grid; grid-template-columns:minmax(120px, 2fr) 3fr minmax(110px, 2fr); gap:.8rem;
               align-items:center; padding:.35rem 0; }
.barra { background:#e9dcc6; border:2.5px solid var(--linha); border-radius:99px; height:16px; overflow:hidden; }
.barra i { display:block; height:100%; background:var(--verde); box-shadow:inset 0 4px 0 #ffffff55; }
.barra.ruim i { background:var(--erro); }

/* botões em relevo */
button, .botao { font:600 .95rem system-ui, sans-serif; display:inline-block; padding:.5rem 1rem; border-radius:12px;
                 border:3px solid var(--linha); background:var(--papel); color:var(--texto); cursor:pointer;
                 text-decoration:none; margin:.2rem .45rem .5rem 0; box-shadow:0 5px 0 var(--sombra);
                 transition:transform .08s, box-shadow .08s; }
button:hover, .botao:hover { transform:translateY(2px); box-shadow:0 3px 0 var(--sombra); }
button:active, .botao:active { transform:translateY(5px); box-shadow:0 0 0 var(--sombra); }
.principal { background:var(--cor); color:#fff; }
.apagado { background:#e9dcc6; color:var(--fraco); }
.pisca { background:var(--amarelo); color:var(--texto); animation:pulo .8s infinite; }
.acoes { display:flex; flex-wrap:wrap; gap:.2rem; align-items:center; margin:1rem 0 .4rem; }
.acoes form { margin:0; }

/* vídeo */
.video { position:relative; padding-top:56.25%; background:#000; border:3px solid var(--linha); border-radius:16px;
         overflow:hidden; box-shadow:6px 6px 0 var(--sombra); }
.video iframe, .video #player { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* formulários */
textarea, input, select { font:inherit; padding:.5rem .65rem; border:3px solid var(--linha); border-radius:12px;
                          width:100%; background:#fff; color:var(--texto); }
textarea { box-shadow:6px 6px 0 var(--sombra); margin-bottom:.8rem; }
input[type=checkbox], input[type=radio] { width:auto; accent-color:var(--cor); }
.em-linha { display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0; align-items:flex-start; }
/* min-width:0 deixa o campo encolher; sem isso, lista e campo de arquivo vazam do cartão no celular */
.em-linha input, .em-linha select { flex:1 1 180px; width:auto; min-width:0; max-width:100%; }
/* importar arquivo: no celular o campo ocupa a linha toda e o botão desce */
.acoes .arquivo { flex:1 1 320px; min-width:0; }
.arquivo input[type=file] { flex:1 1 220px; }
.formulario label { display:block; margin-bottom:1rem; font-weight:600; }
.formulario .fraco { font-weight:400; display:block; }
.formulario input[type=number] { max-width:10rem; display:block; margin:.25rem 0; }
fieldset { border:3px solid var(--linha); border-radius:12px; margin:0 0 1rem; }
legend { font-weight:600; padding:0 .4rem; }
label.dia { display:inline-block; margin:0 .9rem 0 0; font-weight:400; }

/* simulados */
.questao label { display:block; padding:.35rem .5rem; cursor:pointer; border-radius:10px; }
.questao label:hover { background:#f3ead9; }
.questao.certa { background:#e3f1ee; }
.questao.errada { background:#fbe6df; }
.pre { white-space:pre-wrap; }
code { background:#f0e4cf; padding:.08rem .35rem; border-radius:6px; white-space:pre-wrap;
       font:0.92em ui-monospace, Consolas, monospace; }

/* tabelas */
table { width:100%; border-collapse:separate; border-spacing:0; background:var(--papel); border:3px solid var(--linha);
        border-radius:16px; overflow:hidden; box-shadow:6px 6px 0 var(--sombra); margin-bottom:1.1rem; }
th { background:#e9dcc6; }
th, td { text-align:left; padding:.55rem .8rem; border-bottom:2px solid #e0d2ba; font-size:.93rem; }
tr:last-child td { border-bottom:0; }

/* gráfico de colunas com lateral em relevo */
.grafico { display:flex; align-items:flex-end; gap:5px; height:200px; }
.grafico .col { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%;
                font-size:.7rem; color:var(--fraco); }
.grafico .col i { display:block; width:100%; background:var(--cor); border:2px solid var(--linha); border-bottom:0;
                  border-radius:4px 4px 0 0; box-shadow:3px 0 0 var(--cor-escura); min-height:3px; }
.grafico .col em { font-style:normal; margin-top:3px; }
summary { cursor:pointer; font-weight:600; }
details[open] summary { margin-bottom:.6rem; }

/* celular: abas numa linha só que rola de lado, espaços e letras menores */
@media (max-width:640px) {
  header { gap:.3rem; padding:.7rem .8rem 0; }
  .marca { font-size:1.25rem; padding-bottom:.1rem; }
  .marca .boneco { width:36px; height:auto; }
  nav { margin-left:0; width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
        padding:4px 4px 6px 0; margin-bottom:-6px; }
  nav::-webkit-scrollbar { display:none; }
  .aba { flex:none; white-space:nowrap; padding:.45rem .7rem .4rem; font-size:.9rem; }
  main { padding:1.1rem .8rem 2.5rem; }
  h1 { font-size:1.45rem; }
  .cartao { padding:.9rem; box-shadow:4px 4px 0 var(--sombra); }
  .faixa .boneco { width:76px; height:auto; }
  .video { border-radius:12px; box-shadow:4px 4px 0 var(--sombra); }
  .linha-barra { grid-template-columns:1fr; gap:.2rem; padding:.5rem 0; }
  .acoes button, .acoes .botao { padding:.6rem .9rem; }
  .grafico { gap:2px; height:150px; }
  .grafico .col { font-size:.55rem; }
  .grafico .col i { border-width:1.5px; box-shadow:none; }
  th, td { padding:.45rem .5rem; font-size:.88rem; }
  .formulario input[type=number] { max-width:100%; }
}