/* ═══════════════════════════════════════════════════════════════
   Guias — /guias, /taxas-ifood, /taxas-99food, /calculadora-ifood, /margem-de-lucro-delivery
   Vem por cima do site.css e do tutoriais.css (mesmos tokens, topo, rodapé e cabeça).
   A peça que marca os guias é a mesma comanda da página inicial: cada taxa vira uma
   linha que sai do papel, e o que sobra no pé é o número que a pessoa veio buscar.
   Nas taxas, as comandas ficam lado a lado (um plano por papel); na calculadora,
   a comanda é a resposta e muda enquanto a pessoa digita. O resto é texto de ler.
   ═══════════════════════════════════════════════════════════════ */

/* ── texto de ler ───────────────────────────────────────────── */
.gu-sec { padding-top: clamp(48px, 7vw, 76px); }
.gu-txt { max-width: 42em; }
.gu-txt > * + * { margin-top: 14px; }
.gu-txt h2 + p { margin-top: 12px; }
.gu-txt p, .gu-txt li { color: var(--suave); }
.gu-txt b, .gu-txt strong { color: var(--texto); font-weight: 600; }
.gu-txt ul, .gu-txt ol { padding-left: 1.2em; display: grid; gap: 8px; }
.gu-txt a, .gu-nota a, .gu-fonte a { color: var(--jade-escuro); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.gu-txt h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.005em; margin-top: 26px; }

/* a conta escrita por extenso, uma linha por passo */
.gu-conta {
  margin-top: 18px; padding: 16px 20px; max-width: 34em; background: var(--branco);
  border: 1px solid var(--borda); border-radius: 12px; font: 400 15px/1.75 var(--mono);
  font-variant-numeric: tabular-nums; color: var(--texto);
}
.gu-conta div { display: flex; gap: 10px; }
.gu-conta div span:first-child { flex: 1; }
.gu-conta .gu-conta-fim { margin-top: 6px; padding-top: 6px; border-top: 1.5px solid var(--texto); font-weight: 700; }

/* ── comandas lado a lado ───────────────────────────────────── */
.gu-recibos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin-top: 28px; align-items: start; }
.gu-recibos .comanda, .calc-saida .comanda { box-shadow: 0 18px 36px -22px rgba(8, 21, 26, .45), 0 0 0 1px var(--borda); }
.gu-recibo-tit { margin-bottom: 10px; font: 700 16px/1.3 var(--titulo); letter-spacing: -.005em; }
.gu-recibo-tit small { display: block; font: 400 14px/1.4 var(--corpo); color: var(--suave); letter-spacing: 0; }
.gu-recibos .cm-sobra b { font-size: 30px; }

/* ── tabela de taxas ────────────────────────────────────────── */
.gu-tab-rolo { margin-top: 22px; overflow-x: auto; border: 1px solid var(--borda); border-radius: 14px; background: var(--branco); }
.gu-tab { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 520px; }
.gu-tab caption { text-align: left; padding: 14px 18px 0; font-size: 14px; color: var(--suave); caption-side: bottom; padding-bottom: 14px; }
.gu-tab th, .gu-tab td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
.gu-tab thead th { font-weight: 600; color: var(--suave); font-size: 14px; background: var(--fundo); }
.gu-tab tbody th { font-weight: 600; }
.gu-tab td { font-variant-numeric: tabular-nums; }
.gu-tab tbody tr:last-child > * { border-bottom: 0; }

.gu-fonte { margin-top: 14px; font-size: 14px; color: var(--suave); max-width: 46em; }
.gu-nota {
  margin-top: 22px; max-width: 42em; padding: 14px 18px; border-left: 3px solid var(--var);
  background: #FFF7E6; border-radius: 0 10px 10px 0; color: var(--texto); font-size: 16px;
}

/* ── chamada para o produto, no meio do texto ───────────────── */
.gu-cta {
  margin-top: clamp(40px, 6vw, 60px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center;
  background: var(--noite); color: var(--na-noite); border-radius: var(--raio); padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 34px);
}
.gu-cta h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.gu-cta p { margin-top: 8px; color: #C4D6D2; max-width: 36em; }
@media (max-width: 700px) { .gu-cta { grid-template-columns: 1fr; } .gu-cta .bt { justify-self: start; } }

/* ── calculadora ────────────────────────────────────────────── */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 8px; }
.calc-form { display: grid; gap: 18px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: clamp(20px, 3vw, 28px); }
.calc-campo { display: grid; gap: 6px; }
.calc-campo > span, .calc-campo legend { font-weight: 600; font-size: 15.5px; padding: 0; }
.calc-campo small { color: var(--suave); font-size: 14px; }
.calc-campo fieldset { border: 0; margin: 0; padding: 0; }
.calc-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.calc input[type=text], .calc select {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--borda); border-radius: 10px;
  background: var(--branco); color: var(--texto); font: 500 17px/1 var(--corpo); font-variant-numeric: tabular-nums;
}
.calc select { padding-right: 36px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.calc input:focus, .calc select:focus { border-color: var(--jade); outline: none; box-shadow: 0 0 0 3px rgba(0, 173, 121, .22); }
.calc-rs { position: relative; }
.calc-rs::before { content: attr(data-un); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--suave); font-weight: 500; pointer-events: none; }
.calc-rs input[type=text] { padding-left: 42px; }
.calc-rs[data-un="%"]::before { left: auto; right: 14px; }
.calc-rs[data-un="%"] input[type=text] { padding-left: 14px; padding-right: 34px; }
.calc-marca { display: flex; align-items: center; gap: 10px; font-size: 15.5px; cursor: pointer; }
.calc-marca input { width: 20px; height: 20px; accent-color: var(--jade); }
.calc-saida { position: sticky; top: 88px; display: grid; gap: 14px; }
.calc-preco {
  padding: 16px 18px; border-radius: 14px; background: var(--noite); color: var(--na-noite); font-size: 15.5px;
}
.calc-preco b { display: block; margin-top: 2px; font: 800 30px/1.1 var(--titulo); letter-spacing: -.02em; color: var(--jade-vivo); font-variant-numeric: tabular-nums; }
.calc-preco p { color: #C4D6D2; font-size: 14px; margin-top: 6px; }
.calc-aviso { font-size: 14px; color: var(--suave); }
@media (max-width: 860px) {
  .calc { grid-template-columns: 1fr; }
  .calc-saida { position: static; }
}
@media (max-width: 480px) { .calc-dupla { grid-template-columns: 1fr; } }

/* sem JS a comanda da calculadora mostra o exemplo fixo; o aviso diz isso */
.calc-semjs { font-size: 14px; color: var(--suave); }
.gu-depois { margin-top: 22px; }
.gu-leia { margin-top: 28px; }

/* ── índice ─────────────────────────────────────────────────── */
.gu-lista { display: grid; gap: 14px; }
.tut .gu-sub { margin: clamp(40px, 6vw, 56px) 0 16px; font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.guia-if { background: #EA1D2C; color: #fff; }
.guia-calc { background: var(--noite); color: var(--jade-vivo); }
.guia-marg { background: #E4F3ED; color: var(--jade-escuro); }