/* ============================================================
   O Caderno da Dona Benedita · app
   Leitora 55+: corpo grande, contraste alto, alvo de toque
   generoso, e CADA COISA COM O SEU DESENHO (ela reconhece a
   figura antes de ler o nome).

   Regra que manda no arquivo: a ALMA e' de caderno de papel
   (cor, titulo serifado, letra de mao), mas a MOLDURA e' de
   aplicativo (fonte de interface, aba de rodape, cartao com
   icone, toque com resposta). Texto corrido em serifa no
   celular le como site; por isso o corpo usa a fonte do
   proprio aparelho e a serifa ficou so no titulo.
   ============================================================ */

:root{
  --paper:#F3ECDC;
  --paper-card:#FDFAF2;
  --paper-sunk:#E7DCC2;
  --ink:#241F15;
  --ink-soft:#655A45;
  --rule:#CDBE9C;
  --rule-soft:#DED1B2;
  --accent:#9B3B26;
  --accent-forte:#82301E;
  --accent-soft:#F6E4DC;
  --olive:#5A5A36;
  --gold:#A6822F;
  --erro:#8C3A2A;
  --certo:#4A6B37;
  --certo-claro:#EDF2E4;

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  /* fonte do aparelho: nada pra baixar, aparece na hora, e e'
     a mesma letra dos outros aplicativos que ela ja usa */
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --hand:'Caveat',cursive;

  --maxw:640px;
  --nav-h:78px;
  --topo-h:60px;
  --raio:16px;
  --sombra:0 1px 2px rgba(36,31,21,.05), 0 2px 10px rgba(36,31,21,.045);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:auto;
  overscroll-behavior-y:none;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
}
img{max-width:100%;height:auto;}
button,input{font-family:inherit;}

/* ---------- topo ---------- */
.topo{
  position:sticky;top:0;z-index:20;
  height:calc(var(--topo-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  display:flex;align-items:center;gap:6px;
  padding-left:12px;padding-right:16px;
  background:rgba(243,236,220,.93);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--rule-soft);
}
.topo-marca{
  display:flex;align-items:center;gap:10px;min-width:0;
  font-size:15px;color:var(--ink-soft);letter-spacing:.005em;
}
.topo-marca span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topo-marca b{color:var(--ink);font-weight:600;}
.topo-rosto{
  width:36px;height:36px;border-radius:50%;flex:none;
  object-fit:cover;object-position:50% 22%;
  border:1.5px solid var(--rule);
}
.btn-voltar{
  display:inline-flex;align-items:center;gap:2px;
  min-height:46px;min-width:46px;padding:0 10px 0 4px;
  background:none;border:0;cursor:pointer;
  font-size:17px;font-weight:500;color:var(--accent);
  border-radius:12px;
}
.btn-voltar:active{background:var(--accent-soft);}
.btn-voltar[hidden]{display:none;}
.topo .btn-voltar:not([hidden]) + .topo-marca .topo-rosto{display:none;}
.ic{width:22px;height:22px;flex:none;}

/* ---------- tela ---------- */
.tela{
  max-width:var(--maxw);margin:0 auto;
  padding:22px 18px 40px;
  animation:entra .2s ease-out;
}
@keyframes entra{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* esqueleto de carregamento: a tela ja mostra o formato do que
   vem, em vez de um texto "carregando" solto no vazio */
.esqueleto{display:grid;gap:12px;padding-top:6px;}
.esq{
  display:block;border-radius:10px;
  background:linear-gradient(90deg,var(--paper-sunk) 25%,#F0E7D2 37%,var(--paper-sunk) 63%);
  background-size:400% 100%;
  animation:brilho 1.4s ease-in-out infinite;
}
@keyframes brilho{0%{background-position:100% 0}100%{background-position:0 0}}
.esq-olho{width:130px;height:16px;}
.esq-titulo{width:62%;height:34px;border-radius:12px;}
.esq-linha{width:92%;height:16px;}
.esq-cartao{height:104px;border-radius:var(--raio);margin-top:8px;}
@media (prefers-reduced-motion:reduce){.esq{animation:none}.tela{animation:none}}

/* ---------- tipografia ---------- */
h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,7.4vw,35px);line-height:1.14;
  margin:0 0 6px;letter-spacing:-.012em;
}
h2{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.24;margin:34px 0 10px;}
h3{font-family:var(--display);font-weight:600;font-size:19px;margin:0 0 4px;}
p{margin:0 0 14px;}
.olho{
  font-family:var(--hand);font-size:21px;color:var(--accent);
  margin:0 0 2px;display:flex;align-items:center;gap:7px;
}
.olho .ic{width:19px;height:19px;}
.subtitulo{color:var(--ink-soft);margin:0 0 20px;font-size:17px;}
.regra{border:0;border-top:1px solid var(--rule);margin:26px 0;}

/* ---------- painel de progresso da home ---------- */
.painel{
  display:flex;align-items:center;gap:16px;
  background:var(--paper-card);
  border:1px solid var(--rule-soft);border-radius:var(--raio);
  padding:16px 18px;margin:0 0 18px;
  box-shadow:var(--sombra);
}
.anel{width:62px;height:62px;flex:none;transform:rotate(-90deg);}
.anel .trilho{fill:none;stroke:var(--paper-sunk);stroke-width:6;}
.anel .arco{fill:none;stroke:var(--certo);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .5s ease;}
.anel-num{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:16px;color:var(--certo);
}
.anel-caixa{position:relative;width:62px;height:62px;flex:none;}
.painel-txt{min-width:0;}
.painel-txt strong{display:block;font-family:var(--display);font-size:19px;font-weight:600;line-height:1.25;}
.painel-txt span{display:block;color:var(--ink-soft);font-size:15.5px;line-height:1.4;margin-top:2px;}

/* retomar de onde parou */
.retomar{
  display:flex;align-items:center;gap:14px;
  background:var(--accent-soft);
  border:1px solid #E7CDC3;border-radius:var(--raio);
  padding:14px 16px;margin:0 0 20px;
  text-decoration:none;color:inherit;
  box-shadow:var(--sombra);
}
.retomar:active{transform:scale(.988);}
.retomar .fig{
  width:46px;height:46px;flex:none;border-radius:13px;
  background:#fff;border:1px solid #E7CDC3;
  display:grid;place-items:center;color:var(--accent);
}
.retomar .fig .ic{width:26px;height:26px;}
.retomar .txt{flex:1;min-width:0;}
.retomar .rot{display:block;font-family:var(--hand);font-size:18px;color:var(--accent);line-height:1.2;}
.retomar .nom{display:block;font-family:var(--display);font-size:18.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.retomar .ic-seta{width:20px;height:20px;color:var(--accent);flex:none;}

/* ---------- cartoes de comodo ---------- */
.lista-comodos{display:grid;gap:12px;margin-top:6px;}
.cartao{
  display:block;text-decoration:none;color:inherit;
  background:var(--paper-card);
  border:1px solid var(--rule-soft);border-radius:var(--raio);
  padding:16px;
  box-shadow:var(--sombra);
  transition:transform .09s ease, border-color .15s;
}
.cartao:active{transform:scale(.988);border-color:var(--rule);}
.cartao-topo{display:flex;align-items:center;gap:14px;}
.cartao .fig{
  width:52px;height:52px;flex:none;border-radius:14px;
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;
}
.cartao .fig .ic{width:29px;height:29px;}
.cartao-nome{flex:1;min-width:0;}
.cartao h3{font-family:var(--display);font-size:21px;margin:0;line-height:1.2;}
.cartao-conta{
  font-size:15px;color:var(--ink-soft);white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
}
.cartao-conta .ic{width:16px;height:16px;color:var(--certo);}
.cartao p{margin:10px 0 0;font-size:16px;color:var(--ink-soft);line-height:1.45;}
.cartao .ic-seta{width:20px;height:20px;color:var(--rule);flex:none;}

/* barra de progresso: visivel MESMO em zero, senao some no bege
   e a leitora nao entende que aquilo enche */
.barra{
  height:8px;border-radius:5px;background:var(--paper-sunk);
  border:1px solid var(--rule-soft);
  margin-top:13px;overflow:hidden;
}
.barra span{display:block;height:100%;background:var(--certo);border-radius:5px;transition:width .45s ease;}
.barra.cheia span{background:var(--gold);}

/* ---------- lista de itens ---------- */
.lista-itens{display:grid;gap:10px;margin-top:18px;}
.item-linha{
  display:flex;align-items:center;gap:13px;
  background:var(--paper-card);
  border:1px solid var(--rule-soft);border-radius:14px;
  padding:12px 14px;min-height:74px;
  text-decoration:none;color:inherit;
  box-shadow:var(--sombra);
  transition:transform .09s ease, border-color .15s;
}
.item-linha:active{transform:scale(.988);border-color:var(--rule);}
.item-linha .fig{
  width:46px;height:46px;flex:none;border-radius:13px;
  background:var(--paper-sunk);color:var(--ink-soft);
  display:grid;place-items:center;
}
.item-linha .fig .ic{width:27px;height:27px;}
.item-linha .nome{
  font-family:var(--display);font-size:18.5px;font-weight:600;
  flex:1;min-width:0;line-height:1.24;
}
.item-linha .marca{
  width:32px;height:32px;border-radius:50%;flex:none;
  border:2px solid var(--rule);background:#fff;
  display:grid;place-items:center;color:transparent;
}
.item-linha .marca .ic{width:18px;height:18px;}
.item-linha.feito .fig{background:var(--certo-claro);color:var(--certo);}
.item-linha.feito .marca{background:var(--certo);border-color:var(--certo);color:#fff;}
.item-linha.feito .nome{color:var(--ink-soft);}

/* ---------- ficha do item ---------- */
.ficha-cabeca{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.ficha-cabeca .fig{
  width:58px;height:58px;flex:none;border-radius:16px;
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;
}
.ficha-cabeca .fig .ic{width:33px;height:33px;}
.ficha-cabeca h1{margin:0;}

.ficha-promessa{
  font-size:19px;line-height:1.5;color:var(--ink);
  border-left:3px solid var(--accent);
  padding-left:15px;margin:16px 0 22px;
}
.bloco-lei{
  background:var(--paper-card);
  border:1px solid var(--rule-soft);border-left:4px solid var(--gold);
  border-radius:14px;padding:15px 17px;margin:0 0 14px;
  box-shadow:var(--sombra);
}
.bloco-lei .rotulo{
  font-family:var(--hand);font-size:19px;color:var(--gold);
  display:block;margin-bottom:1px;
}
.bloco-lei p{margin:0;font-size:18px;}

.rotulo-secao{
  font-family:var(--hand);font-size:21px;color:var(--ink-soft);
  margin:30px 0 6px;display:block;
}

/* sinais */
.sinais{list-style:none;padding:0;margin:8px 0 0;}
.sinais li{
  position:relative;padding:10px 0 10px 28px;
  border-bottom:1px solid var(--rule-soft);
  font-size:17px;line-height:1.48;
}
.sinais li:last-child{border-bottom:0;}
.sinais li::before{
  content:'';position:absolute;left:5px;top:19px;
  width:8px;height:8px;border-radius:50%;background:var(--rule);
}

/* lugares errados */
.errado{
  background:var(--accent-soft);
  border:1px solid #E7CDC3;border-radius:14px;
  padding:15px 17px;margin:0 0 12px;
}
.errado .onde{
  font-family:var(--display);font-weight:600;font-size:18.5px;
  color:var(--erro);margin:0 0 7px;display:block;line-height:1.25;
}
.errado p{font-size:16.5px;margin:0 0 10px;}
.errado p:last-child{margin-bottom:0;}
.errado .campo{
  display:block;font-size:12.5px;font-weight:700;color:var(--erro);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px;
}

/* lugar certo */
.certo-box{
  background:var(--certo-claro);border:1px solid #CBD8BA;
  border-left:4px solid var(--certo);
  border-radius:14px;padding:17px;margin-top:6px;
}
.certo-box .onde{
  font-family:var(--display);font-weight:600;font-size:19.5px;
  color:var(--certo);margin:0 0 9px;display:block;line-height:1.25;
}
.certo-box ul{margin:10px 0 0;padding-left:21px;}
.certo-box li{margin-bottom:7px;font-size:16.5px;line-height:1.48;}
.certo-box p{font-size:16.5px;}
.sub-lugar{
  background:rgba(255,255,255,.62);border:1px solid #CBD8BA;
  border-radius:12px;padding:13px;margin-top:12px;
}
.sub-lugar h4{font-family:var(--display);font-size:17.5px;margin:0 0 6px;color:var(--certo);}

/* seguranca */
.seguranca{
  background:#FCF1DA;border:1px solid #E2C88A;
  border-left:4px solid #B8860B;
  border-radius:14px;padding:15px 17px;margin:20px 0;
}
.seguranca .rotulo{
  display:block;font-weight:700;font-size:12.5px;color:#8A6508;
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px;
}
.seguranca p{margin:0;font-size:16.5px;}

/* rituais */
.ritual{border-top:1px solid var(--rule-soft);padding:14px 0;}
.ritual:last-child{border-bottom:1px solid var(--rule-soft);}
.ritual h4{font-family:var(--display);font-size:17.5px;margin:0 0 3px;}
.ritual p{margin:0;font-size:16.5px;color:var(--ink-soft);}

/* resumo */
.resumo{
  background:var(--ink);color:#F6F1E4;
  border-radius:var(--raio);padding:19px;margin:26px 0 0;
}
.resumo .rotulo{
  font-family:var(--hand);font-size:20px;color:#D8B463;
  display:block;margin-bottom:5px;
}
.resumo p{margin:0;font-size:17.5px;line-height:1.55;}

/* dobras (lore, comparacao) */
details.dobra{border-top:1px solid var(--rule-soft);padding:2px 0;}
details.dobra summary{
  cursor:pointer;list-style:none;
  padding:15px 0;min-height:54px;
  display:flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:17.5px;font-weight:600;color:var(--accent);
}
details.dobra summary::-webkit-details-marker{display:none;}
details.dobra summary::after{
  content:'';margin-left:auto;flex:none;
  width:11px;height:11px;border-right:2.2px solid var(--rule);border-bottom:2.2px solid var(--rule);
  transform:rotate(45deg);transition:transform .2s;margin-top:-4px;
}
details.dobra[open] summary::after{transform:rotate(-135deg);margin-top:3px;}
details.dobra .corpo{padding:0 0 16px;color:var(--ink-soft);font-size:16.5px;}
details.dobra .corpo p:last-child{margin-bottom:0;}

/* ---------- quiz / leituras ---------- */
.quiz{
  background:var(--paper-card);
  border:1px solid var(--rule);border-radius:var(--raio);
  padding:18px 16px;margin:24px 0;
  box-shadow:var(--sombra);
}
.quiz h3{font-family:var(--display);font-size:20px;color:var(--accent);margin-bottom:3px;}
.quiz .instrucao{font-size:16.5px;color:var(--ink-soft);margin-bottom:13px;}
.quiz-op{
  display:block;width:100%;text-align:left;
  background:var(--paper);border:2px solid var(--rule-soft);
  border-radius:13px;padding:14px 15px;margin-bottom:9px;
  font-size:16.5px;line-height:1.45;color:var(--ink);
  cursor:pointer;min-height:58px;
  transition:transform .09s ease;
}
.quiz-op:active{transform:scale(.99);}
.quiz-op.ativa{border-color:var(--accent);background:var(--accent-soft);font-weight:600;}
.quiz-resposta{
  margin-top:6px;padding:15px;border-radius:13px;
  background:var(--certo-claro);border:1px solid #CBD8BA;
}
.quiz-resposta .diz{
  font-family:var(--hand);font-size:19px;color:var(--certo);
  display:block;margin-bottom:3px;
}
.quiz-resposta p{margin:0 0 10px;font-size:16.5px;}
.quiz-resposta p:last-child{margin-bottom:0;}
.quiz-resposta .fazer{border-top:1px dashed #CBD8BA;padding-top:10px;margin-top:10px;}
.quiz-resposta .fazer b{color:var(--certo);}

/* ---------- antologia (lista numerada) ---------- */
.antologia{margin-top:16px;}
.passo{
  background:var(--paper-card);border:1px solid var(--rule-soft);
  border-radius:var(--raio);padding:17px;margin-bottom:12px;
  box-shadow:var(--sombra);
}
.passo .ord{
  font-family:var(--display);font-weight:700;font-size:15px;
  color:#fff;background:var(--accent);
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:10px;
}
.passo h4{font-family:var(--display);font-size:18.5px;margin:0 0 7px;line-height:1.25;}
.passo p{font-size:16.5px;margin:0 0 10px;}
.passo p:last-child{margin-bottom:0;}
.passo .campo{
  display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px;
}
.passo .dificuldade{
  display:inline-block;font-family:var(--hand);font-size:18px;
  color:var(--accent);margin-top:2px;
}

/* ---------- acoes da ficha ---------- */
.acoes{display:grid;gap:11px;margin:28px 0 10px;}
.btn-grande{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:62px;border-radius:15px;
  font-family:var(--body);font-size:18px;font-weight:600;
  border:2px solid var(--certo);background:var(--certo);color:#fff;
  cursor:pointer;text-decoration:none;
  transition:transform .09s ease;
}
.btn-grande:active{transform:scale(.985);}
.btn-grande.feito{background:var(--certo-claro);color:var(--certo);}
.btn-grande.secundario{
  background:var(--paper-card);border-color:var(--rule);color:var(--ink-soft);
  font-weight:500;
}
.btn-grande .ic{width:23px;height:23px;}


/* ---------- receitas ---------- */
.chip-linha{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px;}
.chip{
  border:1.5px solid var(--rule);border-radius:24px;
  padding:9px 15px;min-height:46px;
  display:inline-flex;align-items:center;gap:7px;
  font-size:16px;color:var(--ink-soft);
  background:var(--paper-card);cursor:pointer;
  text-decoration:none;
  transition:transform .09s ease;
}
.chip:active{transform:scale(.97);}
.chip .ic{width:19px;height:19px;}
.chip.ativo{background:var(--ink);color:#F6F1E4;border-color:var(--ink);font-weight:600;}
.receita-passos{padding-left:22px;margin:8px 0 0;}
.receita-passos li{margin-bottom:8px;font-size:16.5px;}
.campo-bloco{margin:0 0 15px;}
.campo-bloco .campo{
  display:block;font-size:12.5px;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px;
}
.campo-bloco p{margin:0;font-size:16.5px;}

/* ---------- meu caderno ---------- */
.vazio{text-align:center;color:var(--ink-soft);padding:32px 16px;}
.vazio .fig{
  width:78px;height:78px;margin:0 auto 16px;border-radius:24px;
  background:var(--paper-sunk);color:var(--rule);
  display:grid;place-items:center;
}
.vazio .fig .ic{width:42px;height:42px;}
.resumo-progresso{
  background:var(--paper-card);border:1px solid var(--rule-soft);
  border-radius:var(--raio);padding:20px;text-align:center;margin-bottom:10px;
  box-shadow:var(--sombra);
}
.resumo-progresso .grande{
  font-family:var(--display);font-size:46px;font-weight:700;
  color:var(--certo);line-height:1;display:block;
}
.resumo-progresso .leg{color:var(--ink-soft);font-size:16.5px;}

/* ---------- navegacao de rodape ---------- */
.rodape-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(253,250,242,.96);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-top:1px solid var(--rule);
}
.rodape-nav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;text-decoration:none;color:var(--ink-soft);
  font-size:14px;font-weight:600;letter-spacing:.005em;
  position:relative;
}

/* Experiencia de consulta: leitura ajustavel e controles claros. */
:root{--letra:1;}
.topo-conta{margin-left:auto;min-width:58px;min-height:44px;display:grid;place-items:center;
  color:var(--accent);font-size:14px;font-weight:700;text-decoration:none;}
.sem-nav .topo-conta{display:none;}
.escolhas{display:grid;gap:12px;margin:22px 0 28px;}
.escolhas .cartao{display:flex;align-items:center;gap:14px;min-height:90px;}
.escolhas .cartao span:not(.fig){flex:1;min-width:0;}
.escolhas strong,.escolhas small{display:block;}
.escolhas strong{font-family:var(--display);font-size:calc(20px * var(--letra));line-height:1.2;}
.escolhas small{font-size:calc(15px * var(--letra));color:var(--ink-soft);line-height:1.4;margin-top:4px;}
.novidade,.receita-pessoal,.resumo-pratico{background:var(--paper-card);border:1px solid var(--rule-soft);
  border-radius:var(--raio);padding:18px;margin:20px 0;}
.novidade h2{margin:6px 0;}.novidade p{margin:8px 0 14px;}
.resumo-pratico{border-left:5px solid var(--certo);}
.resumo-pratico strong,.cuidado-primeiro strong{display:block;font-size:calc(19px * var(--letra));}
.resumo-pratico p{margin:6px 0 0;}
.cuidado-primeiro{margin:14px 0 22px;}
.cuidado-primeiro p{margin:9px 0;}
.passo-conta{font-weight:700;color:var(--ink-soft);margin:24px 0 8px;font-size:calc(16px * var(--letra));}
.meus-recursos{margin:28px 0;padding-top:10px;border-top:1px solid var(--rule-soft);}
.meus-recursos h2{margin:12px 0;}
.acoes-lado{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;}
.acoes-lado .btn-grande{flex:1;min-width:165px;font-size:calc(16px * var(--letra));}
.campo-form textarea{display:block;width:100%;min-height:110px;border:1.5px solid var(--rule);
  border-radius:14px;padding:14px;font:inherit;font-size:calc(18px * var(--letra));
  line-height:1.5;color:var(--ink);background:var(--paper-card);resize:vertical;}
.campo-form textarea:focus-visible,.campo-form input:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.velocidade-audio{flex:1;min-width:165px;margin:0;}
.velocidade-audio select{width:100%;min-height:48px;border:1px solid var(--ink-soft);border-radius:10px;background:#fff;color:var(--ink);font:inherit;padding:8px;}
.velocidade-audio select:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.lembrete{margin-top:20px;}.lembrete .btn-grande{margin-top:10px;}
.item-link{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:52px;
  color:inherit;text-decoration:none;}
.item-linha .marca{width:46px;height:46px;min-width:46px;min-height:46px;cursor:pointer;}
.item-linha .nome small{display:block;font:500 calc(14px * var(--letra)) var(--body);
  color:var(--ink-soft);margin-top:4px;}
.resultado-conta{font-weight:700;color:var(--ink-soft);}
.receita-pessoal h3{margin-bottom:10px;}.receita-pessoal img{max-height:250px;object-fit:contain;}
.receita-pessoal p{white-space:pre-wrap;}.nova-receita .campo-form{margin:12px 0;}
.nova-receita form{padding:12px 0;}.aviso-form{color:var(--erro);}
.check-material{display:flex;gap:10px;align-items:start;margin-top:12px;font-size:calc(16px * var(--letra));}
.check-material input{width:44px;height:44px;flex:none;}
.materiais{list-style:none;padding:0;margin:8px 0 20px;}
.materiais li{margin:0 0 8px;}
.materiais .check-material{margin:0;padding:7px 10px;background:var(--paper-card);
  border:1px solid var(--rule-soft);border-radius:12px;align-items:center;}
.ajuda-lista{margin:25px 0;}
.escolhas-letra .chip{min-height:52px;font-size:calc(17px * var(--letra));}
.escolhas-letra .chip[aria-pressed="true"]{background:var(--ink);color:#fff;}
:where(a,button,summary,input,textarea):focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.tela p,.tela li,.tela .subtitulo,.tela .campo-bloco p,.tela .errado p,
.tela .certo-box p,.tela .certo-box li,.tela .seguranca p,.tela .ritual p,
.tela .resumo p,.tela details.dobra .corpo,.tela .forma-preparo{
  font-size:calc(18px * var(--letra));line-height:1.58;
}
.tela .aviso-legal{font-size:calc(15px * var(--letra));}
.tela .campo,.tela .rotulo-secao,.tela .passo .ord{font-size:calc(14px * var(--letra));}
.tela h1{font-size:clamp(28px,calc(32px * var(--letra)),42px);}
.tela h2{font-size:calc(24px * var(--letra));}
.tela h3,.tela .item-linha .nome{font-size:calc(19px * var(--letra));}
@media(max-width:360px){
  .topo-marca{font-size:13px;}.topo-conta{font-size:13px;min-width:50px;}
  .tem-volta .topo-marca span{display:none;}
  .rodape-nav a{font-size:12.5px;}.escolhas .cartao{gap:8px;}
  .tela{padding-left:14px;padding-right:14px;}
}
.rodape-nav a .ic{width:26px;height:26px;transition:transform .16s ease;}
.rodape-nav a:active .ic{transform:scale(.9);}
.rodape-nav a.ativo{color:var(--accent);font-weight:700;}
/* pastilha atras do icone da aba aberta: e' o que faz a barra
   parecer de aplicativo e nao um menu de rodape de site */
.rodape-nav a.ativo::before{
  content:'';position:absolute;
  top:9px;width:56px;height:32px;border-radius:16px;
  background:var(--accent-soft);
}
.rodape-nav a .ic,.rodape-nav a span{position:relative;}

/* ---------- rodape de texto ---------- */
.aviso-legal{
  margin-top:32px;padding-top:16px;
  border-top:1px solid var(--rule-soft);
  font-size:13.5px;line-height:1.5;color:var(--ink-soft);
}

/* ---------- impressao ---------- */
@media print{
  .topo,.rodape-nav,.acoes,.acao-fixa,.quiz,.aviso-legal,.esqueleto{display:none !important;}
  body{padding:0;background:#fff;font-size:12pt;}
  .tela{max-width:none;padding:0;}
  .ficha-cabeca .fig{display:none;}
  details.dobra{border:0;}
  details.dobra summary{display:none;}
  details.dobra .corpo{display:block !important;color:#000;}
  .resumo{background:#fff;color:#000;border:1.5pt solid #000;}
  .resumo .rotulo{color:#000;}
  .errado,.certo-box,.seguranca,.passo,.cartao{
    border:1pt solid #999;background:#fff;box-shadow:none;
    break-inside:avoid;page-break-inside:avoid;
  }
  h1,h2,h3{break-after:avoid;page-break-after:avoid;}
  a{text-decoration:none;color:#000;}
}

/* ---- formulario de entrada ---- */
.campo-form{display:block;margin:20px 0 16px;}
.campo-form span{
  display:block;font-family:var(--hand);font-size:20px;
  color:var(--ink-soft);margin-bottom:5px;
}
.campo-form input{
  width:100%;min-height:62px;padding:14px 16px;
  font-size:19px;color:var(--ink);
  background:var(--paper-card);
  border:2px solid var(--rule);border-radius:14px;
}
.campo-form input:focus{outline:3px solid var(--accent-soft);border-color:var(--accent);}
.entrada-codigo{
  font-family:var(--display) !important;
  font-size:34px !important;font-weight:700;
  letter-spacing:11px;text-align:center;
}
form .btn-grande{width:100%;margin-bottom:11px;}

/* a tela de entrar nao tem aba de rodape, entao o corpo nao
   precisa reservar o espaco dela */
body.sem-nav{padding-bottom:24px;}

/* a forma do preparo ("E' um abafado", "Cozido, porque e' raiz"):
   e' a frase que orienta a leitora antes do primeiro passo */
.forma-preparo{
  font-family:var(--hand);font-size:20px;color:var(--accent);
  margin:2px 0 8px;
}

/* ============================================================
   COR POR LUGAR
   ------------------------------------------------------------
   Cada comodo tem a sua cor, e a cor acompanha a leitora: ela
   pinta o cartao na home, a faixa do comodo, o desenho do item
   e a ficha inteira. E' o que faz ela saber ONDE esta sem ler,
   e e' o que mais separa aplicativo de livro (livro e' todo da
   mesma cor da primeira a ultima pagina).
   Todas foram escolhidas escuras o bastante pra ficarem legiveis
   sobre o creme do papel.
   ============================================================ */
.cor-entrada   { --cor:#9B3B26; --cor-suave:#F6E4DC; --cor-borda:#E7CDC3; }
.cor-cozinha   { --cor:#A6651F; --cor-suave:#F8E8D2; --cor-borda:#E8CFA6; }
.cor-quarto    { --cor:#3F4E7A; --cor-suave:#E3E7F3; --cor-borda:#C4CDE4; }
.cor-sala      { --cor:#5A6B33; --cor-suave:#EAEFDC; --cor-borda:#CBD8B4; }
.cor-casa-toda { --cor:#6E3B62; --cor-suave:#F1E3EE; --cor-borda:#DCC4D6; }
/* pilares das receitas */
.cor-sono            { --cor:#3F4E7A; --cor-suave:#E3E7F3; --cor-borda:#C4CDE4; }
.cor-nervoso         { --cor:#6E3B62; --cor-suave:#F1E3EE; --cor-borda:#DCC4D6; }
.cor-digestao        { --cor:#A6651F; --cor-suave:#F8E8D2; --cor-borda:#E8CFA6; }
.cor-imunidade       { --cor:#4A6B37; --cor-suave:#EAF0E1; --cor-borda:#C7D7B6; }
.cor-juntas-e-coluna { --cor:#9B3B26; --cor-suave:#F6E4DC; --cor-borda:#E7CDC3; }
.cor-protecao        { --cor:#2F6156; --cor-suave:#DFEDE9; --cor-borda:#B6D2CA; }

/* o desenho passa a usar a cor do lugar, com a antiga como reserva */
.cartao .fig,.retomar .fig,.ficha-cabeca .fig{
  background:var(--cor-suave,var(--accent-soft));
  color:var(--cor,var(--accent));
}
.item-linha .fig{
  background:var(--cor-suave,var(--paper-sunk));
  color:var(--cor,var(--ink-soft));
}
.item-linha.feito .fig{background:var(--certo-claro);color:var(--certo);}
.barra span{background:var(--cor,var(--certo));}

/* ---------- rodape colorido ----------
   Cada aba com a SUA cor: a leitora distingue pelo tom antes de
   ler o rotulo, e a aba aberta fica obvia mesmo de longe. */
.rodape-nav a[data-nav="casa"]        { --aba:#9B3B26; --aba-suave:#F6E4DC; }
.rodape-nav a[data-nav="inicio"]      { --aba:#9B3B26; --aba-suave:#F6E4DC; }
.rodape-nav a[data-nav="buscar"]      { --aba:#6E3B62; --aba-suave:#F1E3EE; }
.rodape-nav a[data-nav="receitas"]    { --aba:#2F6156; --aba-suave:#DFEDE9; }
.rodape-nav a[data-nav="meu-caderno"] { --aba:#8A6508; --aba-suave:#F8ECD0; }
.rodape-nav a[data-nav="conta"]       { --aba:#3F4E7A; --aba-suave:#E3E7F3; }
.rodape-nav a .ic{color:var(--aba);opacity:.5;}
.rodape-nav a.ativo{color:var(--aba);}
.rodape-nav a.ativo .ic{opacity:1;}
.rodape-nav a.ativo::before{background:var(--aba-suave);}

/* ---------- faixa do comodo ----------
   A tela do comodo abria com titulo solto num mar de creme.
   Agora ela abre com a cor do lugar, o desenho grande e o quanto
   ja foi arrumado ali. */
.faixa{
  display:flex;align-items:center;gap:15px;
  background:var(--cor-suave);border:1px solid var(--cor-borda);
  border-radius:var(--raio);padding:16px;margin:0 0 18px;
}
.faixa .fig{
  width:58px;height:58px;flex:none;border-radius:16px;
  background:#fff;border:1px solid var(--cor-borda);
  color:var(--cor);display:grid;place-items:center;
}
.faixa .fig .ic{width:33px;height:33px;}
.faixa .txt{min-width:0;flex:1;}
.faixa h1{font-size:27px;margin:0 0 1px;}
.faixa p{margin:0;font-size:15.5px;color:var(--ink-soft);line-height:1.35;}
.faixa .conta{
  display:block;margin-top:7px;font-size:14.5px;font-weight:700;
  color:var(--cor);letter-spacing:.01em;
}
.faixa .barra{margin-top:6px;background:#fff;border-color:var(--cor-borda);}

/* ---------- marcar direto da lista ----------
   Antes ela precisava ABRIR o item so pra riscar. Agora a bolinha
   e' um botao de verdade dentro da linha. */
/* O ALVO tem 44px (dedo), o DESENHO tem 32px (olho). Sao coisas
   diferentes: inchar o circulo pra 44 deixaria a lista pesada, e
   deixar o alvo em 32 faz a leitora errar o toque. Por isso o
   botao e' invisivel e grande, com a bolinha visivel no meio. */
.item-linha button.marca{
  width:44px;height:44px;flex:none;
  border:0;background:none;padding:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  transition:transform .12s ease;
}
.item-linha button.marca:active{transform:scale(.88);}
.item-linha button.marca .bolha{
  width:32px;height:32px;border-radius:50%;
  border:2px solid var(--rule);background:#fff;
  display:grid;place-items:center;color:transparent;
}
.item-linha button.marca .ic{width:18px;height:18px;}
.item-linha.feito button.marca .bolha{background:var(--certo);border-color:var(--certo);color:#fff;}

/* nomes de item de 2 linhas nao podem deixar os cartoes desiguais */
.item-linha .nome{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* ============================================================
   A FICHA EM PASSOS
   ------------------------------------------------------------
   A ficha era um rolo unico: a leitora rolava minutos sem saber
   quanto faltava. E' exatamente o gesto de LIVRO. Agora ela vem
   repartida ("a lei" / "reconhece?" / "o lugar errado" / "o lugar
   certo" / "os cuidados" / "a historia"), uma tela por vez, com
   trilha em cima e avancar embaixo. Passo sem conteudo nao
   aparece: item que nao tem quiz nao ganha aba vazia.
   ============================================================ */
.trilha{
  display:flex;gap:7px;overflow-x:auto;
  margin:0 -18px 4px;padding:2px 18px 10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.trilha::-webkit-scrollbar{display:none;}
.trilha button{
  flex:none;border-radius:22px;cursor:pointer;
  border:1.5px solid var(--rule-soft);background:var(--paper-card);
  color:var(--ink-soft);
  padding:0 15px;min-height:44px;
  font-size:15.5px;font-weight:600;white-space:nowrap;
  transition:transform .09s ease;
}
.trilha button:active{transform:scale(.96);}
.trilha button.ativo{
  background:var(--cor,var(--accent));border-color:var(--cor,var(--accent));
  color:#fff;
}
.trilha button.visto:not(.ativo){
  border-color:var(--cor-borda,var(--rule));
  background:var(--cor-suave,var(--paper-card));
  color:var(--cor,var(--ink-soft));
}

/* quanto falta: barrinha fina logo abaixo da trilha */
.trilha-barra{
  height:4px;border-radius:3px;background:var(--paper-sunk);
  overflow:hidden;margin:0 0 20px;
}
.trilha-barra span{
  display:block;height:100%;border-radius:3px;
  background:var(--cor,var(--accent));transition:width .35s ease;
}

.passo-tela{animation:entra .18s ease-out;}
.passo-tela > :first-child{margin-top:0;}
.passo-vazio{color:var(--ink-soft);padding:22px 0;}

/* avancar / voltar entre os passos */
.passo-pe{
  display:flex;gap:10px;align-items:stretch;
  margin:30px 0 0;
}
.passo-pe button{
  min-height:60px;border-radius:15px;cursor:pointer;
  font-family:var(--body);font-size:17.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .09s ease;
}
.passo-pe button:active{transform:scale(.985);}
.passo-pe .anterior{
  flex:none;width:62px;
  background:var(--paper-card);border:2px solid var(--rule);color:var(--ink-soft);
}
.passo-pe .proximo{
  flex:1;
  background:var(--cor,var(--accent));border:2px solid var(--cor,var(--accent));
  color:#fff;
}
.passo-pe .ic{width:21px;height:21px;}

/* ---------- o botao de marcar ----------
   ERRO DA VERSAO ANTERIOR: ele era `sticky` e passava POR CIMA
   do texto no meio da rolagem, tampando justamente a linha que a
   leitora estava lendo. Agora ele e' o fim do ultimo passo:
   aparece quando ela chega, e nunca cobre nada. */
.acao-fixa{position:static;margin-top:26px;}
.acao-fixa .btn-grande{box-shadow:none;width:100%;}

/* botao de marcar quando ele e' o fim do ultimo passo */
.passo-pe .btn-feito-passo.feito{
  background:var(--certo-claro);border-color:var(--certo);color:var(--certo);
}
.passo-pe .btn-feito-passo:not(.feito){
  background:var(--certo);border-color:var(--certo);color:#fff;
}
/* chip de pilar usa a cor do pilar quando escolhido */
.chip.ativo{background:var(--cor,var(--ink));border-color:var(--cor,var(--ink));color:#fff;}
.chip .ic{color:var(--cor,var(--ink-soft));}
.chip.ativo .ic{color:#fff;}

/* a ficha inteira, so no papel: na tela ela fica escondida */
.so-impressao{display:none;}
@media print{
  .trilha,.trilha-barra,.passo-pe,.passo-tela,.ficha-cabeca .fig{display:none !important;}
  .so-impressao{display:block !important;}
  .so-impressao h2{
    font-size:15pt;margin:18pt 0 6pt;border-bottom:.5pt solid #999;
    break-after:avoid;page-break-after:avoid;
  }
}

/* A seta so tinha medida dentro de .cartao e .retomar. Na linha de
   receita ela nascia SEM tamanho e o SVG esticava pra tela inteira,
   comendo o titulo. Medida global resolve pra qualquer lugar novo. */
.ic-seta{width:20px;height:20px;flex:none;color:var(--rule);}
.item-linha .ic-seta{color:var(--cor,var(--rule));opacity:.55;}

/* ============================================================
   Convite pra botar o caderno na tela do celular
   Folha que sobe de baixo. Alvo de toque grande e texto no
   mesmo tamanho do resto do app: quem le' isto tem 60+ e esta
   sendo interrompida no meio de outra coisa.
   ============================================================ */
.inst-fundo{
  position:fixed; inset:0; z-index:90;
  background:rgba(36,31,21,.42);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity .22s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.inst-fundo.aberta{opacity:1;}
.inst-folha{
  width:100%; max-width:var(--maxw);
  background:var(--paper-card);
  border:1px solid var(--rule);
  border-bottom:0;
  border-radius:22px 22px 0 0;
  padding:10px 22px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 28px rgba(36,31,21,.18);
  transform:translateY(14px);
  transition:transform .26s cubic-bezier(.2,.8,.3,1);
  max-height:88vh; overflow-y:auto;
}
.inst-fundo.aberta .inst-folha{transform:translateY(0);}

.inst-alca{
  width:44px; height:4px; border-radius:99px;
  background:var(--rule); margin:0 auto 16px;
}
.inst-topo{display:flex; align-items:center; gap:14px; margin-bottom:12px;}
.inst-icone{
  width:58px; height:58px; border-radius:14px; flex:0 0 auto;
  border:1px solid var(--rule-soft); background:var(--paper);
}
.inst-topo h2{
  font-family:var(--display); font-size:23px; line-height:1.25;
  color:var(--ink); margin:0; font-weight:600;
}
.inst-texto{
  font-size:17px; line-height:1.55; color:var(--ink-soft); margin:0 0 18px;
}

.inst-passos{
  list-style:none; margin:0 0 20px; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.inst-passos li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:17px; line-height:1.5; color:var(--ink);
}
.inst-n{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
/* O desenho do botao fica DENTRO da frase, na linha do texto: ela
   procura a figura na barra do navegador, nao o nome dele. */
.inst-ico{
  width:22px; height:22px; vertical-align:-5px;
  display:inline-block; margin:0 2px; color:var(--accent);
}
.inst-acoes{display:flex; flex-direction:column; gap:10px;}
.inst-acoes .btn-grande{width:100%;}

@media (prefers-reduced-motion: reduce){
  .inst-fundo, .inst-folha{transition:none;}
}

@media print{
  .meus-recursos,.passo-pe,.trilha,.trilha-barra,.passo-conta,.check-material,
  .topo-conta{display:none !important;}
}
.faixa h1{font-size:calc(28px * var(--letra));}