/* Ficha técnica + cupom: o formulário é a ficha da receita; o resultado é um cupom de caixa que
   fica preso ao lado no computador e segue o formulário no celular, com o preço sempre à vista na barra de baixo. */
:root {
  --papel: #fcf9f9;
  --cartao: #ffffff;
  --cupom: #fffdf8;
  --tinta: #2b1b1f;
  --tinta-2: #6b585d;
  --linha: #eadcdf;
  --framboesa: #a32639;
  --framboesa-forte: #861d2e;
  --framboesa-suave: #f8e6e9;
  --sobre-acento: #ffffff;
  --bom: #2b7550;
  --bom-suave: #e0f1e7;
  --meio: #9a5a00;
  --meio-suave: #fbeed6;
  --ruim: #b8232b;
  --ruim-suave: #fbe1e1;
  --seg-ingredientes: #a32639;
  --seg-embalagem: #e08a98;
  --seg-trabalho: #c98a2e;
  --seg-contas: #6b4e71;
  --seg-taxas: #9c8d91;
  --seg-lucro: #2b7550;
  --sombra: 0 1px 2px rgba(60, 20, 30, .06), 0 8px 24px rgba(60, 20, 30, .07);
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texto: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --raio: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #171012; --cartao: #211719; --cupom: #261b1e; --tinta: #f4e9eb; --tinta-2: #b9a5aa;
    --linha: #3a2b2f; --framboesa: #ec7286; --framboesa-forte: #f59aa9; --framboesa-suave: #3a1d24;
    --sobre-acento: #1b0f12; --bom: #6fcf9b; --bom-suave: #183326; --meio: #f0b35a; --meio-suave: #3a2a12;
    --ruim: #ff8a8f; --ruim-suave: #3d1a1c; --seg-ingredientes: #ec7286; --seg-embalagem: #f3b2bd;
    --seg-trabalho: #e0a750; --seg-contas: #a98bb0; --seg-taxas: #8d7d82; --seg-lucro: #6fcf9b;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #171012; --cartao: #211719; --cupom: #261b1e; --tinta: #f4e9eb; --tinta-2: #b9a5aa;
  --linha: #3a2b2f; --framboesa: #ec7286; --framboesa-forte: #f59aa9; --framboesa-suave: #3a1d24;
  --sobre-acento: #1b0f12; --bom: #6fcf9b; --bom-suave: #183326; --meio: #f0b35a; --meio-suave: #3a2a12;
  --ruim: #ff8a8f; --ruim-suave: #3d1a1c; --seg-ingredientes: #ec7286; --seg-embalagem: #f3b2bd;
  --seg-trabalho: #e0a750; --seg-contas: #a98bb0; --seg-taxas: #8d7d82; --seg-lucro: #6fcf9b;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 17px/1.55 var(--texto);
}
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--framboesa); text-underline-offset: 3px; }
a:hover { color: var(--framboesa-forte); }
:focus-visible { outline: 3px solid var(--framboesa); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.faixa { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.miolo { max-width: 1120px; margin: 0 auto; }
.texto-largura { max-width: 68ch; }

/* topo */
.topo { border-bottom: 1px solid var(--linha); background: var(--cartao); }
.topo .miolo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.marca svg { flex: none; }
.marca b { font: 700 1.15rem/1 var(--display); letter-spacing: -.01em; }
.topo nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: .95rem; }
.topo nav a { text-decoration: none; font-weight: 700; }

/* abertura */
.abre { padding-block: 28px 8px; }
.trilha { font-size: .85rem; color: var(--tinta-2); margin: 0 0 10px; }
.trilha a { color: var(--tinta-2); }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; letter-spacing: -.015em; }
h1 { font-size: clamp(1.85rem, 4.6vw, 3rem); line-height: 1.08; margin: 0 0 12px; font-weight: 800; }
h1 em { font-style: normal; color: var(--framboesa); }
.lead { font-size: 1.12rem; color: var(--tinta-2); margin: 0; max-width: 60ch; }

/* calculadora */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 28px; align-items: start; padding-block: 24px 40px; }
@media (max-width: 880px) { .calc { grid-template-columns: minmax(0, 1fr); } }
.ficha { display: grid; gap: 18px; min-width: 0; }
fieldset { margin: 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); padding: 18px 18px 20px; min-width: 0; }
legend { font: 700 1.05rem/1.2 var(--display); padding: 0 6px; margin-left: -6px; display: flex; gap: 10px; align-items: baseline; }
legend .passo { font: 600 .78rem/1 var(--mono); color: var(--framboesa); letter-spacing: .06em; text-transform: uppercase; }
.dica { font-size: .88rem; color: var(--tinta-2); margin: 6px 0 0; }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 12px; }
.rotulo { display: grid; gap: 6px; font-size: .92rem; font-weight: 700; min-width: 0; }
input, select { font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; width: 100%; min-width: 0; }
input:focus, select:focus { border-color: var(--framboesa); outline: none; box-shadow: 0 0 0 3px var(--framboesa-suave); }
.campo { position: relative; display: block; }
.campo input { font-variant-numeric: tabular-nums; }
.campo.pre input { padding-left: 2.4em; }
.campo.pos input { padding-right: 2.6em; }
.campo.pre::before, .campo.pos::after { position: absolute; top: 50%; transform: translateY(-50%); color: var(--tinta-2); font: 500 .85rem var(--mono); pointer-events: none; }
.campo.pre::before { content: attr(data-pre); left: 12px; }
.campo.pos::after { content: attr(data-pos); right: 12px; }

#ingredientes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.ing { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; padding: 10px 0 12px; border-bottom: 1px dashed var(--linha); }
.ing-nome { grid-column: 1 / -1; }
.ing:last-child { border-bottom: 0; }
.ing-nome input { font-weight: 700; }
.ing-campos { display: grid; grid-template-columns: 1fr 1fr 1fr 76px; gap: 8px; min-width: 0; align-items: end; }
.mini { display: grid; gap: 4px; font-size: .78rem; color: var(--tinta-2); min-width: 0; white-space: nowrap; }
.mini input, .mini select { padding: 8px 10px; font-size: .95rem; }
.mini .campo.pre input { padding-left: 2.2em; }
.ing-fim { display: grid; gap: 4px; justify-items: end; }
.ing-custo { font: 600 .95rem var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tirar { font: inherit; font-size: .78rem; color: var(--tinta-2); background: none; border: 0; padding: 2px 0; cursor: pointer; text-decoration: underline; }
@media (max-width: 720px) {
  .ing-campos { grid-template-columns: 1fr 1fr; }
}
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.botao { font: 700 .95rem var(--texto); border-radius: 999px; padding: 10px 18px; cursor: pointer; border: 1px solid var(--framboesa); background: var(--cartao); color: var(--framboesa); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.botao:hover { background: var(--framboesa-suave); }
.botao.cheio { background: var(--framboesa); color: var(--sobre-acento); }
.botao.cheio:hover { background: var(--framboesa-forte); border-color: var(--framboesa-forte); }
.botao.leve { border-color: var(--linha); color: var(--tinta-2); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { font: 600 .86rem var(--texto); border: 1px solid var(--linha); background: var(--papel); color: var(--tinta); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--framboesa); background: var(--framboesa-suave); color: var(--framboesa-forte); }
input[type="range"] { padding: 0; accent-color: var(--framboesa); border: 0; background: none; margin-top: 8px; }
.conta-mini { font: 500 .85rem var(--mono); color: var(--tinta-2); margin-top: 8px; font-variant-numeric: tabular-nums; }

/* cupom */
.cupom { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); background: var(--cupom); border: 1px solid var(--linha); border-bottom: 0; box-shadow: var(--sombra); padding: 22px 20px 24px; margin-bottom: 10px; font-family: var(--mono); font-size: .9rem; min-width: 0; }
.cupom::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -10px; height: 10px;
  background: linear-gradient(135deg, var(--cupom) 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
              linear-gradient(-135deg, var(--cupom) 50%, transparent 50%) 0 0 / 14px 10px repeat-x; }
@media (max-width: 880px) { .cupom { position: relative; top: auto; } }
.cupom h2 { font: 700 .8rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; margin: 0 0 4px; color: var(--tinta-2); }
.cupom .produto-nome { text-align: center; font-weight: 600; margin: 0 0 14px; word-break: break-word; }
.tracejado { border: 0; border-top: 1px dashed var(--tinta-2); opacity: .5; margin: 12px 0; }
.par { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.par span:first-child { color: var(--tinta-2); }
.preco-final { text-align: center; margin: 6px 0 2px; }
.preco-final small { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.preco-final output { display: block; font: 800 2.6rem/1.1 var(--display); color: var(--framboesa); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.preco-final .exato { font-size: .8rem; color: var(--tinta-2); }
.cento { text-align: center; font-weight: 600; margin: 4px 0 0; }
.barra { display: flex; height: 14px; border-radius: 3px; overflow: hidden; margin: 14px 0 10px; background: var(--linha); }
.seg { display: block; height: 100%; transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .seg { transition: none; } }
.seg-ingredientes, .pt-ingredientes { background: var(--seg-ingredientes); }
.seg-embalagem, .pt-embalagem { background: var(--seg-embalagem); }
.seg-trabalho, .pt-trabalho { background: var(--seg-trabalho); }
.seg-contas, .pt-contas { background: var(--seg-contas); }
.seg-taxas, .pt-taxas { background: var(--seg-taxas); }
.seg-lucro, .pt-lucro { background: var(--seg-lucro); }
#r-partes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .82rem; }
#r-partes li { display: grid; grid-template-columns: 10px 1fr auto 3.6em; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
#r-partes .pt { width: 10px; height: 10px; border-radius: 2px; }
#r-partes .v { text-align: right; }
#r-partes .pc { text-align: right; color: var(--tinta-2); }
.erro { background: var(--ruim-suave); color: var(--ruim); padding: 10px 12px; border-radius: 6px; font-family: var(--texto); font-size: .9rem; margin: 10px 0; }
.hoje { margin-top: 14px; padding: 12px; border-radius: 6px; background: var(--papel); border: 1px solid var(--linha); font-family: var(--texto); font-size: .9rem; }
.selo { display: inline-block; font: 700 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 4px; margin-bottom: 6px; }
.selo-ruim { background: var(--ruim-suave); color: var(--ruim); }
.selo-meio { background: var(--meio-suave); color: var(--meio); }
.selo-bom { background: var(--bom-suave); color: var(--bom); }
.cupom .acoes { justify-content: center; }
.copiado { font-family: var(--texto); font-size: .82rem; color: var(--tinta-2); text-align: center; margin: 8px 0 0; min-height: 1.2em; word-break: break-word; }

/* barra fixa no celular */
.barra-preco { display: none; }
@media (max-width: 880px) {
  .barra-preco { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--tinta); color: var(--papel); text-decoration: none;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    transition: transform .2s ease; }
  .barra-preco.some { transform: translateY(110%); }
  .barra-preco span { font-size: .85rem; opacity: .85; }
  .barra-preco b { font: 800 1.35rem var(--display); font-variant-numeric: tabular-nums; }
  body { padding-bottom: 72px; }
}

/* chamada para a planilha */
.oferta { background: var(--framboesa-suave); border-block: 1px solid var(--linha); }
.oferta .miolo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: center; padding-block: 32px; }
@media (max-width: 760px) { .oferta .miolo { grid-template-columns: minmax(0, 1fr); } }
.oferta h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 8px; line-height: 1.15; }
.oferta p { margin: 0 0 10px; }
.oferta ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.oferta .lado { display: grid; gap: 10px; justify-items: start; }
.preco-oferta { font: 800 2rem/1 var(--display); }
.preco-oferta small { font: 500 .9rem var(--texto); color: var(--tinta-2); }

/* guia */
.guia { padding-block: 40px 16px; }
.guia h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin: 36px 0 10px; line-height: 1.2; }
.guia h2:first-child { margin-top: 0; }
.guia p, .guia li { max-width: 68ch; }
.guia ul, .guia ol { padding-left: 1.2em; display: grid; gap: 6px; }
.formula { font: 500 .95rem/1.6 var(--mono); background: var(--cartao); border: 1px solid var(--linha); border-left: 3px solid var(--framboesa); padding: 12px 14px; border-radius: 0 8px 8px 0; overflow-x: auto; max-width: 68ch; }
.tabela { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 420px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--linha); }
th { font-size: .85rem; color: var(--tinta-2); }
td.n, th.n { text-align: right; }

.faq { padding-block: 16px 40px; }
.faq h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin: 0 0 12px; }
.faq details { border-bottom: 1px solid var(--linha); padding: 12px 0; max-width: 68ch; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details p { margin: 8px 0 0; color: var(--tinta-2); }

.outras { border-top: 1px solid var(--linha); padding-block: 28px 36px; }
.outras h2 { font-size: 1.2rem; margin: 0 0 12px; }
.outras ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.outras a { display: block; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 8px; background: var(--cartao); text-decoration: none; font-weight: 700; }
.outras a small { display: block; font-weight: 400; color: var(--tinta-2); font-size: .85rem; }

.rodape { border-top: 1px solid var(--linha); color: var(--tinta-2); font-size: .88rem; }
.rodape .miolo { padding-block: 20px 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.rodape a { color: var(--tinta-2); }

/* página da planilha */
.venda h1 { max-width: 22ch; }
.abas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.abas li { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; }
.abas b { display: block; font-family: var(--display); font-size: 1.05rem; margin-bottom: 4px; }
.abas span { color: var(--tinta-2); font-size: .92rem; }
.amostra { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); margin-top: 16px; }
.amostra table { width: 100%; font-size: .85rem; min-width: 640px; }
.amostra th { background: var(--framboesa); color: var(--sobre-acento); }
.amostra td.in { color: #0000ff; background: #fff2cc; }
:root[data-theme="dark"] .amostra td.in { color: #9db7ff; background: #3a3314; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .amostra td.in { color: #9db7ff; background: #3a3314; } }
.compra { display: grid; gap: 10px; justify-items: start; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); }