/* App MounjaFit. Mesma identidade do e-book e da landing: preto e rosa por fora, creme nude pra ler. */
@font-face { font-family: "Archivo"; src: url("fontes/Archivo.ttf") format("truetype"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --preto: #0b0b0b; --rosa: #ff2e88; --rosa-escuro: #c4166a; --rosa-claro: #ff6fae;
  --creme: #fbede4; --cartao: #fffaf6; --linha: #f0d6c8; --tinta: #2a1520; --suave: #6e5561;
  --leve: #2f6b4f; --moderada: #a3155a; --pesada: #6b1f1f; --mel: #8a5a14;
  --topo: calc(56px + env(safe-area-inset-top, 0px));
  --baixo: calc(64px + env(safe-area-inset-bottom, 0px));
  --sai: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
  overscroll-behavior: none; background: var(--preto);
  scroll-padding: var(--topo) 0 var(--baixo); /* foco pelo teclado nunca some atrás do topo ou das abas */
}
body {
  min-height: 100dvh; font: 400 16px/1.5 "Archivo", system-ui, sans-serif; color: var(--tinta);
  background: var(--creme); padding: var(--topo) 0 calc(var(--baixo) + 24px);
}
body.em-receita { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a, button, label { touch-action: manipulation; }
button, .abas a, .filtros a, .fome, .cartao, .materiais a { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
input, select, textarea { font-size: 16px; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }
#tela { width: min(100% - 32px, 560px); margin-inline: auto; outline: none; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* nome da marca, sempre em pílula com "Fit" rosa */
.mf { display: inline-block; padding: 5px 12px 6px; border-radius: 99px; background: var(--preto); color: #fff; border: 1px solid #3a2a31; font: 900 17px/1 "Archivo"; letter-spacing: -.02em; }
.mf em { font-style: normal; color: var(--rosa); }

/* ---------- topo e abas ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 10; height: var(--topo); padding: env(safe-area-inset-top, 0px) 16px 0;
  display: flex; align-items: center; gap: 12px; background: var(--preto); color: #fff;
}
.topo-data { margin-left: auto; font: 600 13px "Archivo"; color: #a39ca0; }
.topo-data::first-letter { text-transform: uppercase; }
.voltar { width: 40px; height: 40px; margin-left: -8px; display: grid; place-items: center; border-radius: 50%; }
.voltar:active { background: #2a1520; }
.voltar[hidden] { display: none; }

.abas {
  position: fixed; inset: auto 0 0; z-index: 10; height: var(--baixo); padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid; grid-template-columns: repeat(4, 1fr); background: var(--preto); border-top: 1px solid #262124;
}
.abas a { display: grid; place-items: center; align-content: center; gap: 3px; text-decoration: none; color: #a39ca0; font: 600 12px "Archivo"; transition: color 120ms; }
.abas a[aria-current] { color: var(--rosa); }
.abas a:active { color: #fff; }
.dentro .abas { display: none; }

/* ---------- textos comuns ---------- */
.olho { font: 700 12px "Archivo"; letter-spacing: .16em; text-transform: uppercase; color: var(--rosa-escuro); }
.titulo, .receita h1, .bloco h2 { text-wrap: balance; }
.titulo { margin: 22px 0 6px; font: 900 30px/1.05 "Archivo"; font-stretch: 88%; letter-spacing: -.02em; }
.apoio { color: var(--suave); font-size: 15px; margin-bottom: 16px; }
.bloco { margin-top: 36px; }
.bloco h2 { font: 900 22px/1.15 "Archivo"; letter-spacing: -.015em; margin-bottom: 14px; }
.bloco-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.contagem { font: 800 14px "Archivo"; color: var(--rosa-escuro); white-space: nowrap; }
.bloco-topo + .apoio { margin-top: -8px; }

/* ---------- painel da proteína (a assinatura do app) ---------- */
.painel {
  margin-top: 16px; padding: 22px 20px 18px; border-radius: 22px; color: #fff; overflow: hidden;
  background: radial-gradient(90% 70% at 100% 0%, rgba(255, 46, 136, .38), transparent 70%), var(--preto);
}
.painel .olho { color: var(--rosa-claro); }
.placar { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 12px; }
.placar b { font: 900 88px/.9 "Archivo"; font-stretch: 70%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.placar span { font: 700 20px "Archivo"; color: #d9b8c7; }
.barra { height: 12px; border-radius: 99px; background: #2a1520; overflow: hidden; }
.barra i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--rosa); box-shadow: 0 0 18px rgba(255, 46, 136, .7);
  transform-origin: left; transform: scaleX(var(--p)); transition: transform 500ms var(--sai); }
.painel-frase { margin-top: 12px; font-size: 15px; color: #eadfe4; }
.comidas { list-style: none; margin-top: 14px; border-top: 1px solid #3a2a31; }
.comidas li { display: grid; grid-template-columns: 1fr auto 40px; align-items: center; gap: 8px; min-height: 48px; border-bottom: 1px solid #3a2a31; font-size: 15px; }
.comidas a { text-decoration: none; }
.comidas b { color: var(--rosa-claro); font-weight: 800; }
.tirar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #a39ca0; }
.tirar svg { width: 18px; height: 18px; }
.tirar:active { background: #2a1520; color: #fff; }
.meta { margin-top: 12px; }
.meta summary { display: inline-block; padding: 8px 0; font: 700 14px "Archivo"; color: var(--rosa-claro); cursor: pointer; list-style: none; }
.meta summary::-webkit-details-marker { display: none; }
.meta label { display: grid; gap: 8px; font: 600 14px "Archivo"; color: #eadfe4; }
.campo { display: flex; align-items: center; gap: 8px; }
.campo input { width: 96px; height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid #3a2a31; background: #1b1216; color: #fff; font: 800 18px "Archivo"; }
.meta p { margin-top: 10px; font-size: 13px; color: #a39ca0; }

/* ---------- instalar ---------- */
.instalar { margin-top: 16px; padding: 16px; border-radius: 18px; background: var(--cartao); border: 1px solid var(--linha); font-size: 15px; }
.instalar p + * { margin-top: 12px; }
.link { display: block; margin-top: 6px; padding: 8px 0; font: 600 14px "Archivo"; color: var(--suave); }

/* ---------- escolha pela fome ---------- */
.fomes { display: grid; gap: 10px; }
.fome {
  display: grid; gap: 2px; padding: 16px 18px; border-radius: 18px; color: #fff; text-decoration: none;
  transition: transform 120ms var(--sai);
}
.fome b { font: 900 21px/1.15 "Archivo"; letter-spacing: -.01em; }
.fome span { font-size: 14.5px; color: rgba(255, 255, 255, .86); }
.fome small { margin-top: 6px; font: 700 12px "Archivo"; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.fome:active { transform: scale(.98); }
.fome-cremosa { background: var(--leve); } .fome-rapida { background: var(--rosa-escuro); } .fome-completa { background: var(--mel); }

/* ---------- check ---------- */
.check { list-style: none; display: grid; gap: 8px; }
.check label { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; min-height: 56px; padding: 12px 14px; border-radius: 14px; background: var(--cartao); border: 1px solid var(--linha); font: 600 15px/1.35 "Archivo"; cursor: pointer; }
.check input { appearance: none; width: 26px; height: 26px; border: 2px solid var(--rosa); border-radius: 8px; background: #fff; display: grid; place-items: center; transition: background 120ms; }
.check input::after { content: ""; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform 160ms var(--sai); }
.check input:checked { background: var(--rosa); }
.check input:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); }
.check input:checked + span { color: var(--suave); }

/* ---------- lista de receitas ---------- */
.filtros { display: flex; gap: 8px; margin: 16px -16px 0; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.filtros::-webkit-scrollbar { display: none; }
.filtros a { flex: none; padding: 10px 16px; border-radius: 99px; border: 1px solid var(--linha); background: var(--cartao); text-decoration: none; font: 700 14px "Archivo"; }
.filtros a[aria-current] { background: var(--preto); border-color: var(--preto); color: #fff; }
.lista { list-style: none; display: grid; gap: 10px; }
.cartao { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); text-decoration: none; transition: transform 120ms var(--sai); }
.cartao:active { transform: scale(.985); }
.cartao img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--linha); }
.cartao-txt { min-width: 0; overflow-wrap: break-word; }
.cartao-txt b { display: block; font: 800 16px/1.2 "Archivo"; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tags em { font: 700 12px "Archivo"; font-style: normal; padding: 3px 8px; border-radius: 99px; }
.tag-prot { background: var(--rosa); color: #fff; }
.tag-dig { color: #fff; }
.dig-leve { background: var(--leve); } .dig-moderada { background: var(--moderada); } .dig-pesada { background: var(--pesada); }
.fav-marca { color: var(--rosa); }
.fav-marca svg { width: 18px; height: 18px; fill: currentColor; }
.vazio { padding: 28px 20px; text-align: center; border: 1.5px dashed var(--linha); border-radius: 16px; color: var(--suave); }

/* ---------- receita ---------- */
.rec-foto { width: calc(100% + 32px); max-width: none; margin: 0 -16px; aspect-ratio: 3 / 2; object-fit: cover; background: var(--linha); }
@media (min-width: 600px) { .rec-foto { width: 100%; margin: 16px 0 0; border-radius: 20px; } }
.rec-corpo { display: grid; gap: 14px; padding-top: 18px; }
.rec-topo { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.receita h1 { margin-top: 4px; font: 900 30px/1.05 "Archivo"; font-stretch: 88%; letter-spacing: -.02em; }
.gancho { margin-top: -6px; color: var(--suave); font-weight: 500; }
.fav { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--cartao); border: 1px solid var(--linha); color: var(--rosa); transition: transform 120ms var(--sai); }
.fav:active { transform: scale(.9); }
.fav[aria-pressed="true"] svg { fill: currentColor; }
.precisao { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.precisao div { padding: 10px 4px; border-radius: 12px; background: var(--tinta); color: #fff; text-align: center; }
.precisao .p-prot { background: var(--rosa); }
.precisao .dig-leve { background: var(--leve); } .precisao .dig-moderada { background: var(--moderada); } .precisao .dig-pesada { background: var(--pesada); }
.precisao small { display: block; font: 700 10px "Archivo"; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.precisao b { font: 900 17px/1.2 "Archivo"; font-stretch: 85%; }
.macro { margin-top: -4px; font-size: 13px; color: var(--suave); }
.caixa { padding: 16px 18px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); }
.caixa h2 { margin-bottom: 10px; font: 800 13px "Archivo"; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-escuro); }
.caixa ul, .caixa ol { padding-left: 20px; display: grid; gap: 8px; }
.caixa li { font-size: 16px; line-height: 1.45; padding-left: 2px; }
.caixa li::marker { color: var(--rosa); font-weight: 800; }
.dica { padding: 16px 18px; border-radius: 16px; background: var(--tinta); color: #f1e6eb; }
.dica b { display: block; margin-bottom: 4px; font: 800 12px "Archivo"; letter-spacing: .16em; text-transform: uppercase; color: var(--rosa-claro); }
.rec-acao {
  position: fixed; inset: auto 0 0; z-index: 10; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, var(--creme) 30%);
}

/* ---------- botão ---------- */
.botao {
  display: flex; width: min(100%, 528px); margin-inline: auto; min-height: 56px; align-items: center; justify-content: center; gap: 10px;
  padding: 0 24px; border-radius: 14px; background: #e0126f; color: #fff; font: 800 17px "Archivo";
  box-shadow: 0 10px 28px rgba(224, 18, 111, .35); transition: transform 120ms var(--sai), background 120ms;
}
.botao span { padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, .2); font-size: 14px; }
.botao:active { transform: scale(.97); background: var(--rosa-escuro); }
.botao.feito { background: var(--cartao); color: var(--tinta); border: 1px solid var(--linha); box-shadow: none; }
.instalar .botao { width: 100%; }

/* ---------- materiais ---------- */
.materiais { list-style: none; display: grid; gap: 10px; }
.materiais a { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); text-decoration: none; }
.materiais img { width: 72px; height: 102px; object-fit: cover; border-radius: 6px; box-shadow: 0 6px 16px rgba(42, 21, 32, .25); }
.materiais b { display: block; font: 800 16px/1.2 "Archivo"; }
.materiais small { display: block; margin-top: 4px; font-size: 14px; color: var(--suave); }
.materiais em { display: inline-block; margin-top: 8px; font: 800 13px "Archivo"; font-style: normal; color: var(--rosa-escuro); }
.autora { display: flex; gap: 14px; align-items: center; margin-top: 10px; padding: 12px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); }
.autora img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rosa); }
.autora b { display: block; font: 800 16px "Archivo"; }
.autora small { font: 700 12px "Archivo"; letter-spacing: .08em; text-transform: uppercase; color: var(--rosa-escuro); }
.legal { margin-top: 28px; font-size: 12px; line-height: 1.5; color: var(--suave); }

/* ---------- aviso rápido ---------- */
.aviso {
  position: fixed; left: 50%; bottom: calc(var(--baixo) + 16px); z-index: 20; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 12px; background: var(--preto); color: #fff; font: 700 15px "Archivo";
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3); opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity 200ms var(--sai), transform 200ms var(--sai);
}
.aviso.on { opacity: 1; transform: translate(-50%, 0); }
.em-receita .aviso { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

@media (hover: hover) and (pointer: fine) {
  .cartao:hover, .materiais a:hover { border-color: var(--rosa-claro); }
  .fome:hover { filter: brightness(1.08); }
  .botao:hover { background: var(--rosa-escuro); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
}

/* ---------- perfil: saudação, convite e resumo na tela Hoje ---------- */
.ola { margin-top: 18px; font: 500 17px/1.35 "Archivo"; color: var(--suave); }
.ola b { font-weight: 900; color: var(--tinta); }
.ola + .painel { margin-top: 12px; }
.convite {
  display: grid; gap: 4px; margin-top: 16px; padding: 18px 20px; border-radius: 18px; text-decoration: none;
  background: var(--cartao); border: 1.5px solid var(--rosa-claro); transition: transform 120ms var(--sai);
}
.convite b { font: 900 19px/1.2 "Archivo"; }
.convite span { font-size: 15px; color: var(--suave); }
.convite em { margin-top: 6px; font: 800 15px "Archivo"; font-style: normal; color: var(--rosa-escuro); }
.convite:active, .resumo:active { transform: scale(.985); }
.resumo {
  display: grid; gap: 10px; margin-top: 10px; padding: 14px 18px; border-radius: 18px; text-decoration: none;
  background: var(--cartao); border: 1px solid var(--linha); transition: transform 120ms var(--sai);
}
.resumo-nums { display: flex; gap: 28px; }
.resumo small, .comp small, .dados dt { display: block; font: 700 11px "Archivo"; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.resumo b { font: 900 26px/1.1 "Archivo"; font-stretch: 85%; font-variant-numeric: tabular-nums; }
.resumo em { font: 800 14px "Archivo"; font-style: normal; color: var(--rosa-escuro); }

/* ---------- tela Eu ---------- */
.extremos { display: flex; justify-content: space-between; margin-top: 8px; font: 700 13px "Archivo"; color: #d9b8c7; font-variant-numeric: tabular-nums; }
.botao-espaco { margin-top: 12px; }
a.botao { text-decoration: none; }
.grafico { padding: 14px 12px 8px; border-radius: 18px; background: var(--cartao); border: 1px solid var(--linha); }
.grafico-dica { min-height: 22px; padding: 0 4px 6px; font: 700 15px "Archivo"; font-variant-numeric: tabular-nums; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; stroke: none; stroke-width: 0; } /* o traço dos ícones não vale aqui */
.g-grade { stroke: var(--linha); stroke-width: 1; }
.g-eixo { font: 600 11px "Archivo"; fill: var(--suave); font-variant-numeric: tabular-nums; }
.g-obj-txt { fill: var(--leve); font-weight: 800; }
.g-objetivo { stroke: var(--leve); stroke-width: 1.5; stroke-dasharray: 5 4; }
.g-linha { fill: none; stroke: var(--rosa-escuro); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.marca { fill: var(--rosa-escuro); stroke: var(--cartao); stroke-width: 2; transition: r 120ms var(--sai); }
.marca.ativo { r: 6; }
.g-valor { font: 900 13px "Archivo"; fill: var(--tinta); font-variant-numeric: tabular-nums; }
.alvo { fill: transparent; cursor: pointer; outline: none; }
.alvo:focus-visible { stroke: var(--rosa); stroke-width: 2; }
.comps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.comp { padding: 14px 16px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); }
.comp b { display: block; margin: 2px 0 4px; font: 900 30px/1.1 "Archivo"; font-stretch: 85%; font-variant-numeric: tabular-nums; }
.comp span { display: block; font: 700 13px/1.35 "Archivo"; }
.comp .bom { color: var(--leve); } .comp .atencao { color: var(--moderada); }
.comps + .dica { margin-top: 10px; }
.pesagens { list-style: none; border-top: 1px solid var(--linha); }
.pesagens li { display: grid; grid-template-columns: 64px 1fr 40px; gap: 8px; align-items: center; min-height: 56px; border-bottom: 1px solid var(--linha); }
.p-data { font: 700 13px "Archivo"; color: var(--suave); }
.p-txt b { display: block; font: 800 17px "Archivo"; font-variant-numeric: tabular-nums; }
.p-txt small { font-size: 13px; color: var(--suave); }
.pesagens .tirar:active { background: var(--linha); color: var(--tinta); }
.dados { display: grid; border-top: 1px solid var(--linha); }
.dados div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.dados dd { font: 700 15px "Archivo"; text-align: right; }
.dados .sem { font-weight: 500; color: var(--suave); }
.link-rosa { padding: 8px 0; font: 800 15px "Archivo"; color: var(--rosa-escuro); text-decoration: none; }
.f-dica .link-rosa { display: inline; padding: 0; font-size: 14px; text-decoration: underline; }

/* ---------- formulários ---------- */
.form { display: grid; gap: 18px; margin-top: 8px; }
.f { display: grid; gap: 6px; }
.f label, .opcional legend { font: 800 16px/1.3 "Archivo"; }
.f input {
  width: 100%; height: 52px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--linha);
  background: var(--cartao); color: var(--tinta); font: 700 17px "Archivo"; transition: border-color 120ms;
}
.f input:focus-visible { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 3px rgba(255, 46, 136, .2); }
.f input[aria-invalid] { border-color: var(--moderada); }
.f-un { display: flex; align-items: center; gap: 10px; }
.f-un input { width: 130px; font-variant-numeric: tabular-nums; }
.f-un span { font: 700 16px "Archivo"; color: var(--suave); }
.f-dica { font-size: 14px; line-height: 1.4; color: var(--suave); }
.f-erro { font: 700 14px "Archivo"; color: var(--moderada); }
.f-erro:empty { display: none; }
.opcional { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--linha); border-radius: 16px; }
.opcional legend { padding: 0 6px; }
.opcional > .f-dica { margin-top: -6px; }
.form .botao { margin-top: 6px; }

@media (hover: hover) and (pointer: fine) {
  .convite:hover, .resumo:hover { border-color: var(--rosa); }
}

/* ---------- fome como escolha do dia ---------- */
button.fome { width: 100%; text-align: left; font: inherit; color: #fff; }
.fome[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--creme), 0 0 0 5px var(--tinta); }
.fomes:has([aria-pressed="true"]) .fome:not([aria-pressed="true"]) { opacity: .45; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.chips-rot { width: 100%; font: 700 12px "Archivo"; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.chip { min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1.5px solid var(--linha); background: var(--cartao); font: 700 15px "Archivo"; transition: background 120ms, border-color 120ms, transform 120ms var(--sai); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.pra-hoje { display: grid; gap: 12px; margin-top: 16px; padding: 16px; border-radius: 18px; background: var(--tinta); color: #f1e6eb; scroll-margin-bottom: calc(var(--baixo) + 16px); }
.pra-hoje p { font-size: 15px; line-height: 1.45; }
.pra-hoje a:not(.sugerida):not(.link-rosa) { color: var(--rosa-claro); font-weight: 800; }
.pra-hoje .link-rosa { color: var(--rosa-claro); padding: 4px 0; }
.pra-hoje .extra { padding-top: 12px; border-top: 1px solid #4a3040; }
.pra-hoje-dica { margin-top: 14px; font-size: 15px; color: var(--suave); }
.sugerida { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 8px; border-radius: 14px; background: var(--cartao); color: var(--tinta); text-decoration: none; transition: transform 120ms var(--sai); }
.sugerida:active { transform: scale(.985); }
.sugerida img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; }
.sugerida small { display: block; font: 700 11px "Archivo"; letter-spacing: .12em; text-transform: uppercase; color: var(--rosa-escuro); }
.sugerida b { display: block; font: 800 16px/1.2 "Archivo"; }
.sugerida em { font: 800 13px "Archivo"; font-style: normal; color: var(--suave); }

/* ---------- sequência no painel ---------- */
.painel-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.seq { padding: 5px 11px; border-radius: 99px; background: rgba(255, 46, 136, .18); border: 1px solid rgba(255, 111, 174, .5); color: #fff; font: 800 13px "Archivo"; text-decoration: none; white-space: nowrap; }

/* ---------- antes e agora ---------- */
.lembrete { display: block; margin: -4px 0 12px; font: 800 15px "Archivo"; color: var(--rosa-escuro); }
.vazio-link { display: block; text-decoration: none; text-align: left; }
.vazio-link b { display: block; margin-top: 8px; color: var(--rosa-escuro); }
.fotos-par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fotos-par.uma { grid-template-columns: minmax(0, 60%); }
.fotos-par figure { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: var(--linha); aspect-ratio: 3 / 4; }
.fotos-par img { width: 100%; height: 100%; object-fit: cover; }
.fotos-par figcaption { position: absolute; inset: auto 0 0; padding: 24px 12px 10px; background: linear-gradient(transparent, rgba(11, 11, 11, .75)); color: #fff; font: 700 13px "Archivo"; }
.fotos-par figcaption small { display: block; font: 800 11px "Archivo"; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-claro); }
.fotos-difs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fotos-difs span { padding: 6px 12px; border-radius: 99px; background: var(--leve); color: #fff; font: 800 14px "Archivo"; font-variant-numeric: tabular-nums; }
.fotos-lista { list-style: none; display: flex; gap: 10px; margin: 6px -16px 0; padding: 12px 16px 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.fotos-lista::-webkit-scrollbar { display: none; }
.fotos-lista li { position: relative; flex: none; display: grid; gap: 4px; justify-items: center; font: 700 12px "Archivo"; color: var(--suave); }
.fotos-lista img { width: 72px; height: 96px; object-fit: cover; border-radius: 10px; background: var(--linha); }
.fotos-lista .tirar { position: absolute; top: -8px; right: -10px; width: 32px; height: 32px; background: var(--cartao); border: 1px solid var(--linha); color: var(--tinta); }
.fotos-lista .tirar svg { width: 14px; height: 14px; }

/* ---------- calendário da proteína ---------- */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 14px; border-radius: 18px; background: var(--cartao); border: 1px solid var(--linha); }
.cal-sem { text-align: center; font: 800 11px "Archivo"; color: var(--suave); }
.dia { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font: 700 13px "Archivo"; font-variant-numeric: tabular-nums; color: var(--suave); }
.d-batida { background: var(--rosa); color: #fff; }
.d-parcial { box-shadow: inset 0 0 0 2px var(--rosa-claro); color: var(--tinta); }
.d-futuro { opacity: .3; }
.d-hoje { outline: 2px solid var(--tinta); outline-offset: 2px; }
.cal-legenda { display: flex; gap: 18px; margin-top: 10px; font: 600 13px "Archivo"; color: var(--suave); }
.cal-legenda span { display: flex; align-items: center; gap: 6px; }
.cal-legenda i { width: 14px; height: 14px; border-radius: 50%; }

/* ---------- conquistas ---------- */
.conquistas { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.conquistas li { display: grid; gap: 4px; padding: 14px; border-radius: 16px; border: 1.5px dashed var(--linha); color: var(--suave); }
.conquistas svg { width: 28px; height: 28px; stroke: currentColor; }
.conquistas b { font: 800 15px/1.2 "Archivo"; color: var(--tinta); }
.conquistas small { font: 600 13px "Archivo"; }
.conquistas .ganhou { border: 0; color: #fff; background: radial-gradient(90% 90% at 100% 0%, rgba(255, 46, 136, .5), transparent 70%), var(--preto); }
.conquistas .ganhou b { color: #fff; }
.conquistas .ganhou small { color: var(--rosa-claro); }

/* ---------- diálogo de conquista nova ---------- */
.festa {
  width: min(100% - 32px, 400px); margin: auto; padding: 28px 22px 22px; border: 0; border-radius: 24px; text-align: center; color: #fff;
  background: radial-gradient(100% 70% at 50% 0%, rgba(255, 46, 136, .55), transparent 70%), var(--preto);
}
.festa::backdrop { background: rgba(11, 11, 11, .7); }
.festa[open] { animation: festa-entra 360ms var(--sai); }
@keyframes festa-entra { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.festa > svg { width: 56px; height: 56px; stroke: var(--rosa-claro); stroke-width: 1.5; margin: 0 auto 10px; display: block; }
.festa .olho { color: var(--rosa-claro); }
.festa h2 { margin: 6px 0 10px; font: 900 32px/1.05 "Archivo"; font-stretch: 85%; letter-spacing: -.02em; text-wrap: balance; }
.festa-txt { color: #eadfe4; font-size: 16px; line-height: 1.45; margin-bottom: 20px; }

/* ---------- formulário de peso e medidas ---------- */
.f-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-duplo .f-un input { width: 100%; min-width: 0; }
.f select { width: 100%; height: 52px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--linha); background: var(--cartao); color: var(--tinta); font: 700 17px "Archivo"; }
.f select:focus-visible { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 3px rgba(255, 46, 136, .2); }
.f input[type="file"] { height: auto; padding: 10px; font: 600 15px "Archivo"; }
.f input[type="file"]::file-selector-button { margin-right: 12px; padding: 10px 14px; border: 0; border-radius: 10px; background: var(--tinta); color: #fff; font: 800 14px "Archivo"; }
.botao:disabled { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .festa[open] { animation: none; }
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: var(--rosa-claro); }
}

/* ---------- entrada e login ---------- */
.fora { padding: 0; background: transparent; }   /* o html já é preto; fundo no body esconderia o brilho do ::before */
.fora .topo, .fora .abas { display: none; }
.fora #tela { width: 100%; }
.entrada {
  min-height: 100svh; width: min(100% - 32px, 440px); margin-inline: auto; color: #fff;
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
  padding: calc(40px + env(safe-area-inset-top, 0px)) 0 calc(32px + env(safe-area-inset-bottom, 0px));
}
.fora::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90vw 55vh at 100% 0%, rgba(255, 46, 136, .42), transparent 70%),
              radial-gradient(70vw 45vh at 0% 100%, rgba(196, 22, 106, .28), transparent 70%);
}
.mf-grande { align-self: flex-start; font-size: 22px; padding: 7px 16px 8px; }
.entrada-titulo { font: 900 36px/1.04 "Archivo"; font-stretch: 78%; letter-spacing: -.02em; text-wrap: balance; }
.entrada-titulo em { font-style: normal; color: var(--rosa); }
.entrada-form { display: grid; gap: 10px; }
.entrada-rot { font: 700 12px "Archivo"; letter-spacing: .16em; text-transform: uppercase; color: var(--rosa-claro); }
.entrada-form input {
  width: 100%; height: 56px; padding: 0 16px; border-radius: 14px; border: 1.5px solid #3a2a31;
  background: #1b1216; color: #fff; font: 700 18px "Archivo"; transition: border-color 120ms;
}
.entrada-form input:focus-visible { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 3px rgba(255, 46, 136, .25); }
.entrada-form input[aria-invalid] { border-color: var(--rosa-claro); }
.entrada-form .entrada-codigo { height: 68px; text-align: center; font: 900 32px "Archivo"; letter-spacing: .45em; padding-left: .45em; font-variant-numeric: tabular-nums; }
.entrada-form .f-erro { color: var(--rosa-claro); }
.entrada-form .botao { width: 100%; margin-top: 4px; }
.entrada-apoio { font-size: 16px; line-height: 1.45; color: #eadfe4; margin-bottom: 6px; }
.entrada-apoio b { color: #fff; overflow-wrap: anywhere; }
.entrada-links { display: flex; justify-content: space-between; gap: 12px; }
.entrada-links .link { margin: 0; color: #d9b8c7; }
.entrada-links .link:disabled { color: #6e5561; }
.entrada .link { color: #d9b8c7; text-align: center; }
.entrada-venda { text-decoration: underline; }
.entrada-autoras { display: flex; align-items: center; gap: 12px; font: 600 14px/1.35 "Archivo"; color: #a39ca0; }
.entrada-autoras span { display: flex; flex: none; }
.entrada-autoras img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--preto); }
.entrada-autoras img + img { margin-left: -10px; }
.entrada-previa { padding: 10px 12px; border: 1px dashed #4a3040; border-radius: 12px; font-size: 13px; color: #a39ca0; }
.conta { margin-top: 18px; font-size: 14px; color: var(--suave); overflow-wrap: anywhere; }
.conta .link-rosa { display: inline; padding: 0; font-size: 14px; text-decoration: underline; }
.entrada-sub { margin-top: 16px; font-size: 17px; line-height: 1.45; color: #eadfe4; }
.entrada-titulo em { overflow-wrap: anywhere; }
.entrada-oi { display: block; }
.entrada-micro { font-size: 14px; text-align: center; color: #a39ca0; }
.consentimento { margin-top: -6px; font-size: 13px; }
.consentimento a { color: var(--rosa-escuro); }

/* ---------- produto comprado a mais, em destaque em Materiais ---------- */
.destaque {
  display: grid; gap: 8px; margin: 4px 0 18px; padding: 20px 20px 22px; border-radius: 22px; text-decoration: none; color: #fff; overflow: hidden;
  background: radial-gradient(90% 60% at 100% 0%, rgba(255, 46, 136, .45), transparent 70%), var(--preto);
}
.destaque .olho { color: var(--rosa-claro); }
.destaque b { font: 900 28px/1.05 "Archivo"; font-stretch: 85%; letter-spacing: -.02em; text-wrap: balance; }
.destaque small { font-size: 15px; line-height: 1.4; color: #eadfe4; }
.destaque img { width: 62%; margin: 12px auto 6px; height: auto; border-radius: 10px; rotate: -3deg; box-shadow: 0 24px 50px -16px rgba(255, 46, 136, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
.destaque .botao { margin-top: 6px; }
.destaque:active { transform: scale(.99); }

/* ---------- compartilhar ---------- */
.painel-compartilhar, .compartilhar-link { display: inline-flex; align-items: center; gap: 8px; }
.painel-compartilhar { margin-top: 12px; min-height: 40px; padding: 0 14px; border-radius: 99px; background: rgba(255, 46, 136, .18); border: 1px solid rgba(255, 111, 174, .5); color: #fff; font: 800 14px "Archivo"; }
.painel-compartilhar svg, .compartilhar-link svg { width: 18px; height: 18px; }
.painel-compartilhar:active { background: rgba(255, 46, 136, .32); }
.compartilhar-link { margin: -6px 0 10px; }
.fotos-par ~ .compartilhar-link { margin: 12px 0 0; }

/* ---------- lembretes ---------- */
.lembretes { display: grid; gap: 8px; }
.lembrete-linha { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); }
.chave { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; cursor: pointer; }
.chave span { order: -1; }
.chave b { display: block; font: 800 16px "Archivo"; }
.chave small { font-size: 14px; color: var(--suave); }
.chave small a { color: var(--rosa-escuro); font-weight: 700; }
/* interruptor: o checkbox nativo com cara de chave de celular */
.chave input {
  appearance: none; flex: none; width: 52px; height: 32px; border-radius: 99px; background: var(--linha); position: relative; cursor: pointer;
  transition: background 160ms var(--sai);
}
.chave input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(42, 21, 32, .25); transition: transform 160ms var(--sai);
}
.chave input:checked { background: var(--rosa); }
.chave input:checked::after { transform: translateX(20px); }
.chave input:disabled { opacity: .45; cursor: not-allowed; }
.lembrete-linha input[type="time"] {
  justify-self: start; height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--linha); background: #fff;
  color: var(--tinta); font: 800 17px "Archivo"; font-variant-numeric: tabular-nums;
}
.lembrete-linha input[type="time"]:focus-visible { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 3px rgba(255, 46, 136, .2); }
.lembrete-aviso { margin: -4px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--tinta); color: #f1e6eb; font-size: 14px; line-height: 1.45; }
.conquistas .ganhou { padding: 0; }
.conquistas .ganhou button { display: grid; gap: 4px; width: 100%; height: 100%; padding: 14px; text-align: left; border-radius: inherit; transition: transform 120ms var(--sai); }
.conquistas .ganhou button:active { transform: scale(.97); }
.conquistas .ganhou small { display: flex; align-items: center; gap: 6px; }
.conquistas .ganhou small svg { width: 15px; height: 15px; }
.festa-compartilhar { width: 100%; margin-top: 4px; color: var(--rosa-claro); }
.cartao-dialogo {
  width: min(100% - 32px, 400px); max-height: calc(100dvh - 32px); margin: auto; padding: 16px 20px 18px; border: 0; border-radius: 24px;
  background: var(--creme); color: var(--tinta); overflow: auto; overscroll-behavior: contain;
}
.cartao-dialogo::backdrop { background: rgba(11, 11, 11, .75); }
.cartao-dialogo[open] { animation: festa-entra 320ms var(--sai); }
.cd-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cd-topo h2 { font: 900 22px "Archivo"; }
.cd-topo .tirar { color: var(--tinta); margin-right: -8px; }
.cd-topo .tirar:active { background: var(--linha); }
.cd-quadro { width: min(100%, calc((100dvh - 300px) * 9 / 16)); margin-inline: auto; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--preto); box-shadow: 0 16px 40px -12px rgba(42, 21, 32, .5); }
.cd-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 200ms; }
.gerando .cd-img { opacity: 0; }
.cd-dica { margin: 12px 0; text-align: center; font-size: 14px; color: var(--suave); }
.cd-salvar { text-align: center; color: var(--rosa-escuro); font-weight: 800; }
.cartao-dialogo .botao[hidden] { display: none; }

/* ---------- links pra Flávia dentro dos textos ---------- */
.meta p a { color: var(--rosa-claro); font-weight: 700; }
.dica a { color: var(--rosa-claro); font-weight: 700; }
a.autora { text-decoration: none; }

/* ---------- ofertas dentro do app ---------- */
.botao-claro { background: var(--cartao); color: var(--tinta); border: 1.5px solid var(--tinta); box-shadow: none; }
.botao-claro:active { background: var(--linha); }
.resumo-dica { margin-top: 8px; text-align: center; }
[data-resumo] { margin-top: 16px; }
.oferta-eu {
  margin-top: 16px; padding: 20px; border-radius: 22px; color: #fff;
  background: radial-gradient(90% 60% at 0% 100%, rgba(255, 46, 136, .35), transparent 70%), var(--tinta);
}
.oferta-eu .olho { color: var(--rosa-claro); }
.oferta-eu h2 { margin: 6px 0 8px; font: 900 24px/1.1 "Archivo"; font-stretch: 88%; letter-spacing: -.015em; text-wrap: balance; }
.oferta-eu p:not(.olho) { font-size: 15px; color: #eadfe4; }
.oferta-acoes { display: grid; gap: 2px; margin-top: 16px; }
.oferta-eu .botao { background: #fff; color: var(--tinta); box-shadow: none; }   /* o rosa fica pra ação principal da tela */
.oferta-eu .botao:active { background: var(--linha); }
.oferta-acoes .link { text-align: center; color: #d9b8c7; }
.ac-cartao {
  display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px; border-radius: 20px;
  text-decoration: none; color: #fff; background: radial-gradient(80% 90% at 100% 0%, rgba(255, 46, 136, .45), transparent 70%), var(--preto);
  transition: transform 120ms var(--sai);
}
.ac-cartao:active { transform: scale(.985); }
.ac-cartao img { grid-row: span 3; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rosa); }
.ac-cartao .olho { color: var(--rosa-claro); font-size: 11px; }
.ac-cartao b { font: 800 16px/1.25 "Archivo"; }
.ac-cartao em { font: 800 14px "Archivo"; font-style: normal; color: var(--rosa-claro); }
.a-venda { margin-top: 10px; }
.a-venda em { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.a-venda i { font-style: normal; padding: 3px 10px; border-radius: 99px; background: var(--tinta); color: #fff; font-size: 13px; }

/* ---------- tela do acompanhamento ---------- */
.ac-topo {
  margin: 0 -16px; padding: 28px 20px 26px; color: #fff; display: grid; gap: 10px;
  background: radial-gradient(90% 60% at 100% 0%, rgba(255, 46, 136, .5), transparent 70%), var(--preto);
}
@media (min-width: 600px) { .ac-topo { margin: 16px 0 0; border-radius: 24px; } }
.ac-topo img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--rosa); box-shadow: 0 0 40px rgba(255, 46, 136, .45); }
.ac-topo .olho { margin-top: 6px; color: var(--rosa-claro); }
.ac-topo h1 { font: 900 34px/1.02 "Archivo"; font-stretch: 80%; letter-spacing: -.02em; text-wrap: balance; }
.ac-topo h1 em { font-style: normal; color: var(--rosa); }
.ac-topo p:not(.olho) { font-size: 16px; color: #eadfe4; }
.ac-topo .ac-crn { font: 700 13px "Archivo"; color: #a39ca0; }
.ac-topo .botao { margin-top: 8px; width: 100%; }
/* a assinatura da tela: a frase do próprio app, com "a sua nutricionista" riscada e trocada pela Flávia */
.ac-frases { list-style: none; display: grid; gap: 10px; }
.ac-frases li { padding: 14px 16px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); }
.ac-frases small { display: block; margin-bottom: 4px; font: 700 11px "Archivo"; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.ac-frases p { font: 700 18px/1.35 "Archivo"; }
.ac-frases s { color: var(--suave); font-weight: 500; text-decoration-color: var(--rosa); text-decoration-thickness: 2px; }
.ac-frases em { font-style: normal; font-weight: 900; color: var(--rosa-escuro); }
.ac-inclui { list-style: none; display: grid; gap: 8px; }
.ac-inclui li { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); }
.ac-inclui li::before { content: ""; grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--rosa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ac-inclui b, .ac-passos b { font: 800 16px/1.3 "Archivo"; }
.ac-inclui span, .ac-passos span { font-size: 15px; color: var(--suave); }
.ac-passos { list-style: none; counter-reset: p; display: grid; }
.ac-passos li { counter-increment: p; display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; position: relative; padding-bottom: 18px; }
.ac-passos li::before { content: counter(p); grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: #fff; font: 900 16px "Archivo"; }
.ac-passos li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 2px; width: 2px; background: var(--linha); }
.ac-bolha { position: relative; margin: 0 0 14px 14px; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--linha); box-shadow: 0 8px 24px -12px rgba(42, 21, 32, .3); }
.ac-bolha p { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.ac-preco {
  margin-top: 36px; padding: 24px 20px 14px; border-radius: 24px; color: #fff; text-align: center;
  background: radial-gradient(90% 60% at 50% 0%, rgba(255, 46, 136, .45), transparent 70%), var(--preto);
}
.ac-preco .olho { color: var(--rosa-claro); }
.ac-valor { margin: 8px 0 2px; font: 900 64px/1 "Archivo"; font-stretch: 75%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ac-parcela { margin-bottom: 18px; font-size: 15px; color: #d9b8c7; }
.ac-preco .botao { width: 100%; }
.ac-preco .link { margin-top: 10px; color: #d9b8c7; text-decoration: underline; }

@media (hover: hover) and (pointer: fine) {
  .ac-cartao:hover, .conquistas .ganhou button:hover { filter: brightness(1.1); }
  .painel-compartilhar:hover { background: rgba(255, 46, 136, .32); }
  .oferta-eu .botao:hover { background: var(--linha); }
  a.autora:hover { border-color: var(--rosa-claro); }
  .botao-claro:hover { background: var(--linha); }
}
@media (prefers-reduced-motion: reduce) { .cartao-dialogo[open] { animation: none; } }

/* só pra leitor de tela e pro input de arquivo escondido dentro do label */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bloco-1 { margin-top: 20px; }

/* ---------- foto de perfil ---------- */
.avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--tinta); color: #fff; font: 900 18px "Archivo"; }
.avatar-vazio { background: radial-gradient(90% 90% at 100% 0%, rgba(255, 46, 136, .6), transparent 70%), var(--preto); }
.avatar-troca { position: relative; display: inline-block; cursor: pointer; border-radius: 50%; }
.avatar-troca:focus-within { outline: 3px solid var(--rosa); outline-offset: 3px; }
.avatar-cam {
  position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--rosa); color: #fff; border: 3px solid var(--creme);
}
.avatar-cam svg { width: 16px; height: 16px; stroke-width: 2.2; }
.avatar-grande, .avatar-bv { width: 96px; height: 96px; font-size: 40px; box-shadow: 0 0 0 3px var(--creme), 0 0 0 5px var(--rosa), 0 12px 32px -8px rgba(255, 46, 136, .55); }
.avatar-ola { width: 40px; height: 40px; font-size: 17px; box-shadow: 0 0 0 2px var(--creme), 0 0 0 4px var(--rosa); }
.ola { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.ola small { display: block; font-size: 14px; }

/* ---------- perfil (aba Eu) ---------- */
.perfil-topo {
  display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 16px; align-items: center; margin-top: 22px;
}
.perfil-nome h1 { font: 900 28px/1.05 "Archivo"; font-stretch: 85%; letter-spacing: -.02em; overflow-wrap: anywhere; }
.perfil-nome p { margin-top: 4px; font: 600 15px "Archivo"; color: var(--rosa-escuro); }
.perfil-nums { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); padding: 12px 0; border-block: 1px solid var(--linha); }
.perfil-nums li { display: grid; justify-items: center; text-align: center; }
.perfil-nums li + li { border-left: 1px solid var(--linha); }
.perfil-nums b { font: 900 26px/1.1 "Archivo"; font-stretch: 85%; font-variant-numeric: tabular-nums; }
.perfil-nums small { font: 600 12.5px "Archivo"; color: var(--suave); }
.perfil-acoes { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 56px; gap: 8px; }
.perfil-acoes .botao { width: 100%; }
.perfil-ajustes { padding: 0; }
.perfil-topo + .oferta-eu { margin-top: 18px; }
/* abas do perfil, grudadas embaixo do topo quando rola a grade de pratos */
.perfil-abas {
  position: sticky; top: var(--topo); z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 22px -16px 0; padding: 0 16px; background: var(--creme); border-bottom: 1px solid var(--linha);
}
.perfil-abas a { display: grid; place-items: center; min-height: 48px; text-decoration: none; font: 700 14px "Archivo"; color: var(--suave); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.perfil-abas a[aria-current] { color: var(--tinta); border-color: var(--rosa); }
.perfil-abas + .painel, .perfil-abas + .bloco, .perfil-abas + section { margin-top: 18px; }
.perfil-vazio { margin-top: 18px; }
.pratos-grade { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 3px -16px 0; }
.pratos-grade button { display: block; width: 100%; aspect-ratio: 1; background: var(--linha); }
.pratos-grade img { width: 100%; height: 100%; object-fit: cover; }
.pratos-grade button:active { opacity: .8; }
@media (min-width: 600px) { .pratos-grade { margin-inline: 0; border-radius: 16px; overflow: hidden; } }

/* ---------- foto do prato ---------- */
.rec-acao { display: flex; gap: 10px; }
.rec-acao .botao { flex: 1; min-width: 0; margin: 0; }
.rec-camera {
  flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; cursor: pointer;
  background: var(--tinta); color: #fff; transition: transform 120ms var(--sai);
}
.rec-camera:active { transform: scale(.94); }
.rec-camera:focus-within { outline: 3px solid var(--rosa); outline-offset: 2px; }
.rec-origem { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 99px; background: var(--tinta); color: #fff; font: 700 13px "Archivo"; text-decoration: none; }
.pratos-linha { list-style: none; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.pratos-linha::-webkit-scrollbar { display: none; }
.caixa .pratos-linha { padding: 0; }
.pratos-linha button { display: grid; gap: 4px; justify-items: center; font: 700 12px "Archivo"; color: var(--suave); }
.pratos-linha img { width: 88px; height: 88px; border-radius: 12px; object-fit: cover; background: var(--linha); }
.comidas li { grid-template-columns: 40px 1fr auto 40px; }
.prato-mini { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; cursor: pointer; }
.prato-mini img { width: 100%; height: 100%; object-fit: cover; }
.prato-mini.sem-foto { border: 1.5px dashed #6e5561; color: #d9b8c7; }
.prato-mini.sem-foto svg { width: 18px; height: 18px; }
.prato-mini:focus-within { outline: 2px solid var(--rosa); }
.foto-dialogo {
  width: min(100% - 32px, 440px); max-height: calc(100dvh - 32px); margin: auto; padding: 16px 20px 14px; border: 0; border-radius: 24px;
  background: var(--creme); color: var(--tinta); overflow: auto; overscroll-behavior: contain;
}
.foto-dialogo::backdrop { background: rgba(11, 11, 11, .8); }
.foto-dialogo[open] { animation: festa-entra 280ms var(--sai); }
.fd-img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16px; background: var(--linha); }
.fd-data { margin: 10px 0 14px; font: 600 14px "Archivo"; color: var(--suave); }
.fd-data::first-letter { text-transform: uppercase; }
.fd-acoes { display: grid; gap: 8px; }
.fd-acoes .botao { width: 100%; }
.fd-acoes .link { text-align: center; }
.fd-receita[hidden] { display: none; }

/* ---------- boas-vindas (perfil antes de entrar) ---------- */
.em-bv .topo-data { display: none; }
.bv { padding-top: 18px; }
.bv-prog { height: 6px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.bv-prog i { display: block; height: 100%; background: var(--rosa); transform-origin: left; transform: scaleX(var(--p)); transition: transform 400ms var(--sai); }
.bv-conta { margin-top: 8px; font: 700 13px "Archivo"; color: var(--suave); }
.bv-titulo { margin: 18px 0 8px; font: 900 32px/1.05 "Archivo"; font-stretch: 82%; letter-spacing: -.02em; text-wrap: balance; }
.bv-titulo em { font-style: normal; color: var(--rosa-escuro); }
.bv-form { gap: 16px; }
.bv-form .apoio { margin: -8px 0 4px; }
.bv-pular { text-align: center; margin: -8px 0 0; }
.bv-foto { display: grid; place-items: center; padding: 12px 0 6px; }
.bv-avatar .avatar-bv { width: 132px; height: 132px; font-size: 56px; }
.bv-fim { display: grid; place-items: center; margin-top: 28px; }
.bv > .apoio { margin-top: 4px; }
.bv > .botao { margin-top: 18px; }
.bv > .link, .bv-pular { width: 100%; text-align: center; }

/* ---------- guias ---------- */
.guias { list-style: none; display: grid; gap: 10px; }
.guia-cartao { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); text-decoration: none; transition: transform 120ms var(--sai); }
.guia-cartao:active { transform: scale(.985); }
.guia-cartao img { width: 72px; height: 102px; object-fit: cover; border-radius: 6px; box-shadow: 0 6px 16px rgba(42, 21, 32, .25); }
.guia-cartao b { display: block; font: 800 16px/1.2 "Archivo"; }
.guia-cartao small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--suave); }
.guia-cartao em { display: block; margin-top: 6px; font: 700 12.5px "Archivo"; font-style: normal; color: var(--rosa-escuro); }
.guia-prog { display: block; margin-top: 10px; height: 5px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.guia-prog i { display: block; height: 100%; background: var(--rosa); transform-origin: left; transform: scaleX(var(--p)); }
.guia-preco { display: flex !important; justify-content: space-between; align-items: center; gap: 8px; }
.guia-preco i { font-style: normal; padding: 3px 10px; border-radius: 99px; background: var(--tinta); color: #fff; font-size: 13px; }
.livro-pdf { display: grid; grid-template-columns: 48px 1fr 24px; gap: 12px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 1.5px dashed var(--linha); text-decoration: none; color: var(--suave); }
.livro-pdf img { width: 48px; height: 68px; object-fit: cover; border-radius: 4px; }
.livro-pdf b { display: block; font: 800 15px "Archivo"; color: var(--tinta); }
.livro-pdf small { font-size: 13px; }
.a-venda { margin-top: 10px; }

/* topo do guia: capa inclinada sobre o preto, como o livro em cima da mesa */
.g-topo {
  display: grid; gap: 10px; margin: 0 -16px; padding: 26px 20px 24px; color: #fff;
  background: radial-gradient(90% 60% at 100% 0%, rgba(255, 46, 136, .45), transparent 70%), var(--preto);
}
@media (min-width: 600px) { .g-topo { margin: 16px 0 0; border-radius: 24px; } }
.g-topo img { width: 118px; height: auto; border-radius: 8px; rotate: -3deg; box-shadow: 0 20px 44px -14px rgba(255, 46, 136, .6), 0 0 0 1px rgba(255, 255, 255, .08); margin-bottom: 6px; }
.g-topo .olho { color: var(--rosa-claro); }
.g-topo h1 { font: 900 34px/1.02 "Archivo"; font-stretch: 82%; letter-spacing: -.02em; text-wrap: balance; }
.g-topo h1 em { font-style: normal; color: var(--rosa); }
.g-topo p:not(.olho) { font-size: 16px; color: #eadfe4; }
.g-topo .barra { margin-top: 6px; }
.g-topo .g-topo-prog { font: 700 13px "Archivo"; color: #d9b8c7; }
.g-topo .botao { width: 100%; margin-top: 6px; }
.g-caps { list-style: none; margin-top: 20px; border-top: 1px solid var(--linha); }
.g-caps a { display: grid; grid-template-columns: 36px 1fr 24px; gap: 12px; align-items: center; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--linha); text-decoration: none; }
.g-n { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--linha); font: 800 14px "Archivo"; font-variant-numeric: tabular-nums; }
.g-n svg { width: 18px; height: 18px; stroke-width: 2.4; }
.g-caps .lido .g-n { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.g-caps .lido b { color: var(--suave); }
.g-cap-txt small { display: block; font: 700 11px "Archivo"; letter-spacing: .12em; text-transform: uppercase; color: var(--rosa-escuro); }
.g-cap-txt b { display: block; font: 800 16px/1.25 "Archivo"; }
.g-caps a > svg { color: var(--suave); }
.g-caps .fechado { opacity: .55; }
.g-pdf { display: block; margin-top: 16px; text-align: center; }
.g-liberar { margin-top: 20px; }
.g-liberar h2 { margin: 6px 0 8px; font: 900 26px/1.1 "Archivo"; font-stretch: 85%; text-wrap: balance; }
.g-liberar h2 em { font-style: normal; color: var(--rosa); }
.g-liberar-txt { font-size: 15px; color: #eadfe4; }
.g-nota { margin-top: 10px; font-size: 13px; color: #a39ca0; }

/* capítulo: leitura confortável, 17 px */
.g-cap { padding-top: 20px; }
.g-olho { margin-top: 4px; }
.g-cap > .titulo { margin-top: 6px; margin-bottom: 18px; }
.g-cap > * + * { margin-top: 14px; }
.g-cap p { font-size: 17px; line-height: 1.6; }
.g-cap .caixa p, .g-cap .dica p { font-size: 16px; line-height: 1.5; }
.g-cap .caixa > * + *, .g-cap .dica > * + * { margin-top: 8px; }
.g-cap .dica p { color: #f1e6eb; }
.g-cap .mf { font-size: .85em; padding: 2px 8px 3px; vertical-align: 1px; }
.g-cap p a, .g-linhas a, .g-tabela a, .g-cartoes a { color: var(--rosa-escuro); font-weight: 800; }
.g-h3 { font: 800 19px/1.25 "Archivo"; margin-top: 22px; }
.g-img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; background: var(--linha); }
.g-assin { font: 800 17px "Archivo"; color: var(--rosa-escuro); }
.g-peq { font-size: 14px !important; color: var(--suave); }
.g-lista { padding-left: 22px; display: grid; gap: 6px; font-size: 17px; line-height: 1.5; }
.g-lista li::marker { color: var(--rosa); font-weight: 800; }
.g-passos { list-style: none; counter-reset: gp; display: grid; gap: 8px; }
.g-passos li { counter-increment: gp; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); }
.g-passos li::before { content: counter(gp); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--rosa); color: #fff; font: 900 15px "Archivo"; }
.g-passos b { display: block; font: 800 16px/1.3 "Archivo"; }
.g-passos em { display: block; font: 700 13px "Archivo"; font-style: normal; color: var(--rosa-escuro); margin-top: 2px; }
.g-passos span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--suave); }
.g-itens { list-style: none; display: grid; gap: 8px; }
.g-itens li { padding: 14px 16px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); border-left: 4px solid var(--rosa); }
.g-itens b { display: block; font: 800 16px/1.3 "Archivo"; }
.g-itens span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--suave); }
.g-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.g-chips li { padding: 8px 14px; border-radius: 99px; background: var(--tinta); color: #fff; font: 700 14px "Archivo"; }
.g-alerta { list-style: none; display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--tinta); }
.g-alerta li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; color: #fff; font-size: 16px; line-height: 1.45; }
.g-alerta li::before { content: "!"; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--rosa); font: 900 14px "Archivo"; }
.g-dado { padding: 18px; border-radius: 18px; background: var(--preto); color: #fff; }
.g-dado b { display: block; font: 900 24px/1.1 "Archivo"; font-stretch: 85%; color: var(--rosa); }
.g-dado p { margin-top: 6px; color: #eadfe4; font-size: 16px !important; }
.g-dado small { display: block; margin-top: 8px; font: 600 12px "Archivo"; color: #a39ca0; }
.g-svg svg { width: 100%; height: auto; max-width: 320px; margin: 0 auto; display: block; stroke: none; }
.g-escala { list-style: none; display: grid; gap: 4px; }
.g-escala li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 12px; font-size: 15px; line-height: 1.35; }
.g-escala li.zona { background: #fde0ec; font-weight: 700; }
.g-escala b { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; font: 900 15px "Archivo"; }
.g-linhas { list-style: none; border-radius: 18px; overflow: hidden; border: 1px solid var(--linha); }
.g-linhas li { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; background: var(--cartao); font-size: 15px; }
.g-linhas li + li { border-top: 1px solid var(--linha); }
.g-linhas small { font: 700 11px "Archivo"; letter-spacing: .1em; text-transform: uppercase; color: var(--rosa-escuro); }
.g-linhas b { font: 900 16px "Archivo"; font-variant-numeric: tabular-nums; }
.g-linhas .total { background: var(--rosa); color: #fff; }
.g-linhas .total small { color: #fff; }
.g-preencher { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.g-campo {
  width: 88px; height: 44px; padding: 0 10px; border-radius: 10px; border: 1.5px dashed var(--rosa); background: #fff; color: var(--tinta);
  font: 800 16px "Archivo"; text-align: center;
}
.g-campo:focus-visible { outline: none; border-style: solid; box-shadow: 0 0 0 3px rgba(255, 46, 136, .2); }
.g-tabela-rola { margin-inline: -16px; padding: 0 16px; overflow-x: auto; overscroll-behavior-x: contain; }
.g-tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; line-height: 1.35; border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; background: var(--cartao); }
.g-tabela th { padding: 10px; text-align: left; font: 800 11px "Archivo"; letter-spacing: .1em; text-transform: uppercase; color: var(--rosa-escuro); background: #f6e2d8; }
.g-tabela td { padding: 10px; border-top: 1px solid var(--linha); vertical-align: top; }
.g-tabela td:first-child { font-weight: 700; }
.g-tabela .g-campo { width: 100%; min-width: 64px; height: 38px; font-size: 16px; }
.g-cartoes { list-style: none; display: grid; gap: 10px; }
.g-cartoes li { padding: 14px 16px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); }
.g-cartao-tit { display: block; margin-bottom: 6px; font: 900 18px "Archivo"; }
.g-cartoes dl div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--linha); font-size: 15px; line-height: 1.4; }
.g-cartoes dt { font: 800 11px "Archivo"; letter-spacing: .1em; text-transform: uppercase; color: var(--rosa-escuro); }
.g-cartoes .g-campo { width: 100%; text-align: left; }
/* a folha da semana: 7 colunas que cabem num celular de 360 px */
.g-grade { width: 100%; border-collapse: collapse; table-layout: fixed; }
.g-grade thead th { font: 800 10.5px "Archivo"; letter-spacing: .06em; text-transform: uppercase; color: var(--rosa-escuro); padding: 0 0 8px; text-align: center; }
.g-grade thead th:first-child { width: 36%; }
.g-grade tbody th { padding: 8px 6px 8px 0; text-align: left; font: 600 13px/1.25 "Archivo"; border-top: 1px solid var(--linha); }
.g-grade td { text-align: center; padding: 4px 0; border-top: 1px solid var(--linha); }
.g-grade .g-grupo th { padding-top: 16px; font: 800 11px "Archivo"; letter-spacing: .12em; text-transform: uppercase; color: var(--rosa-escuro); border-top: 2px solid var(--rosa); }
.g-qd { width: 100%; max-width: 40px; aspect-ratio: 1; display: grid; place-items: center; margin: auto; }
.g-qd::before { content: ""; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--rosa); background: #fff; transition: background 120ms; }
.g-qd[aria-checked="true"]::before {
  background: var(--rosa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.g-qd:active::before { transform: scale(.88); }
.g-bolas { width: 100%; min-height: 40px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 3px; padding: 4px 2px; }
.g-bolas i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--rosa); background: #fff; }
.g-bolas i.on { background: var(--rosa); }
.g-nota i { border-color: var(--suave); }
.g-nota i.on { background: var(--tinta); border-color: var(--tinta); }
.g-mini { width: 100%; min-width: 0; height: 36px; padding: 0 2px; font-size: 16px; }
/* fim do capítulo: o próximo, grande, pra seguir lendo com um toque */
.g-nav { margin-top: 28px; }
.g-prox {
  display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 20px; text-decoration: none; color: #fff;
  background: radial-gradient(90% 90% at 100% 0%, rgba(255, 46, 136, .45), transparent 70%), var(--preto); transition: transform 120ms var(--sai);
}
.g-prox:active { transform: scale(.985); }
.g-prox small { display: block; font: 700 11px "Archivo"; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-claro); }
.g-prox b { display: block; margin-top: 2px; font: 800 18px/1.25 "Archivo"; }
.g-fim svg { color: var(--rosa); stroke-width: 2.4; }
.g-onde { margin-top: 10px; text-align: center; font: 600 13px "Archivo"; color: var(--suave); }

@media (hover: hover) and (pointer: fine) {
  .guia-cartao:hover, .livro-pdf:hover { border-color: var(--rosa-claro); }
  .g-caps a:hover b { color: var(--rosa-escuro); }
  .g-prox:hover { filter: brightness(1.1); }
  .rec-camera:hover { background: #000; }
  .perfil-abas a:hover { color: var(--tinta); }
}
@media (prefers-reduced-motion: reduce) { .foto-dialogo[open] { animation: none; } }