/* =========================================================
   MUFIM — cupcake sem chantilly em cima

   A categoria inteira se desenha pelo enfeite: a espiral de
   cobertura, o confeito, a cereja. A Mufim tira isso. Entao o
   site tambem tira: nada de rosa pastel, nada de fonte com
   laco, nada de bolinha.

   A assinatura e O CORTE. Onde as outras marcas fotografam o
   topo, aqui se mostra o miolo. E a cor de cada sabor nao vem
   da cobertura: vem do RECHEIO. Por isso cada sabor tem uma
   barra grossa da sua cor, que e a camada de recheio.

   Escrito mobile primeiro: fora de media query e a regra do
   celular; as media queries so ampliam.
   ========================================================= */

:root{
  --papel:#F6F1E9;
  --papel-2:#EDE5D9;
  --papel-3:#E3D8C8;
  --tinta:#1B1310;
  --tinta-2:#6E5F54;
  --branco:#FFFDF9;
  --linha:rgba(27,19,16,.16);
  --linha-fraca:rgba(27,19,16,.09);
  --linha-clara:rgba(246,241,233,.2);

  /* os tres recheios: a cor vem de dentro, nao de cima */
  --cacau:#4A2419;
  --cacau-vivo:#7A4028;
  --canela:#A55A12;
  --canela-vivo:#C97A22;
  --vermelha:#A4143C;
  --vermelha-vivo:#C93356;

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --fonte:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;

  --margem:20px;
  --wrap:1240px;
  --ar:4rem;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--fonte);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:min(100% - 2*var(--margem),var(--wrap));margin-inline:auto}
.secao{padding-block:var(--ar)}
[id]{scroll-margin-top:80px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- tipografia ---------- */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.98}
h1{font-size:clamp(2.9rem,12vw,6.2rem)}
h2{font-size:clamp(2.2rem,7.6vw,4rem)}
h3{font-size:1.35rem;line-height:1.05;letter-spacing:-.02em}

.rot{
  display:block;margin:0 0 1rem;
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-2);
}
.texto{font-size:1.06rem;line-height:1.7;color:var(--tinta-2);max-width:56ch}
.texto b{color:var(--tinta);font-weight:600}
.texto + .texto{margin-top:1rem}
.lead{font-size:1.18rem;line-height:1.55;color:var(--tinta);max-width:40ch;font-weight:500}

.pular{position:absolute;left:1rem;top:-140px;z-index:300;background:var(--tinta);color:var(--papel);padding:.8rem 1.2rem;text-decoration:none;font-weight:700}
.pular:focus{top:1rem}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- ações ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:56px;padding:.9rem 1.7rem;
  background:var(--tinta);color:var(--papel);border:2px solid var(--tinta);
  font-family:var(--display);font-size:.95rem;font-weight:700;letter-spacing:-.01em;line-height:1.2;
  text-align:center;text-decoration:none;cursor:pointer;border-radius:999px;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--vazado{background:transparent;color:var(--tinta)}
.btn--vazado:hover{background:var(--tinta);color:var(--papel)}
.btn[disabled]{opacity:.32;cursor:not-allowed;transform:none}
.acoes{display:grid;gap:.7rem;margin-top:1.8rem}
@media(min-width:34em){.btn{width:auto}.acoes{display:flex;flex-wrap:wrap;gap:.8rem}}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:100;background:var(--papel);border-bottom:1px solid var(--linha)}
.topo__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.marca{display:inline-flex;align-items:baseline;gap:.5rem;text-decoration:none}
.marca b{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.045em}
.marca small{font-size:.63rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2)}
.nav{display:none;gap:1.7rem}
.nav a{font-size:.84rem;font-weight:600;text-decoration:none;color:var(--tinta-2);min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent}
.nav a:hover,.nav a.is-aqui{color:var(--tinta);border-color:var(--tinta)}
.topo .btn{display:none}
@media(min-width:58em){
  .nav{display:flex}
  .topo .btn{display:inline-flex;min-height:42px;padding:.4rem 1.2rem;font-size:.85rem}
}
@media(max-width:380px){.marca small{display:none}}

/* =========================================================
   CAPA
   ========================================================= */
.capa{padding-top:2.4rem;overflow:hidden}
.capa__grade{display:grid;gap:1.8rem}
.capa h1{margin-bottom:1.2rem}
.capa h1 .risco{
  position:relative;display:inline-block;color:var(--tinta-2);
}
.capa h1 .risco::after{
  content:"";position:absolute;left:-.04em;right:-.04em;top:52%;height:.09em;
  background:var(--vermelha);transform:rotate(-2.5deg);border-radius:999px;
}
.capa__fig{margin:0;position:relative}
.capa__fig img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--papel-2);border-radius:4px}
/* o que nao vai em cima: a negacao vira componente */
.nao{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.nao li{
  padding:.34rem .85rem;border:1.5px solid var(--linha);border-radius:999px;
  font-size:.86rem;font-weight:600;color:var(--tinta-2);
}
.risco{position:relative;display:inline-block}
.risco::after{
  content:"";position:absolute;left:-.12em;right:-.12em;top:52%;height:2px;
  background:var(--vermelha);transform:rotate(-3deg);border-radius:999px;
}
@media(min-width:62em){
  .capa{padding-top:4rem}
  .capa__grade{grid-template-columns:1fr 1.15fr;gap:3.5rem;align-items:center}
  .capa__fig img{aspect-ratio:4/3}
}

/* ---------- a faixa do corte: a assinatura ---------- */
.corte{display:flex;height:14px;margin-top:var(--ar)}
.corte span{flex:1}
.corte span:nth-child(1){background:var(--cacau)}
.corte span:nth-child(2){background:var(--canela)}
.corte span:nth-child(3){background:var(--vermelha)}

/* =========================================================
   O CORTE ARRASTÁVEL
   O argumento da Mufim e fraco escrito e forte arrastado: em vez
   de dizer que o recheio esta dentro, a pessoa abre o cupcake com
   o polegar. Duas fotos do mesmo enquadramento, uma inteira e uma
   partida, e um range que recorta a de cima.
   ========================================================= */
.abrir__cab{margin-bottom:1.8rem}
.wipe{
  position:relative;overflow:hidden;border-radius:4px;background:var(--papel-2);
  --x:58%;cursor:ew-resize;
  /* o navegador fica so com a rolagem vertical; o arrasto lateral e do
     script. sem isso o gesto vira rolagem e o corte nao se mexe */
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.wipe img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.wipe__topo{position:absolute;inset:0;height:100%;clip-path:inset(0 0 0 var(--x))}
.wipe__linha{
  position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;
  background:var(--papel);box-shadow:0 0 0 1px rgba(27,19,16,.25);pointer-events:none;
}
.wipe__pega{
  position:absolute;top:50%;left:var(--x);z-index:2;
  display:grid;place-items:center;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:999px;background:var(--papel);color:var(--tinta);
  box-shadow:0 4px 18px rgba(27,19,16,.28);pointer-events:none;
  transition:transform .18s var(--ease);
}
.wipe__pega svg{width:22px;height:22px}
.wipe.is-arrastando .wipe__pega{transform:scale(1.1)}
/* o range fica so para teclado e leitor de tela: invisivel e sem pegar toque.
   quem arrasta com dedo ou mouse fala com o quadro, nao com o range. */
.wipe__range{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0;pointer-events:none;
}
.wipe__range:focus-visible ~ .wipe__pega{outline:3px solid var(--tinta);outline-offset:3px}
.wipe__rot{
  position:absolute;bottom:.8rem;z-index:2;padding:.28rem .7rem;border-radius:999px;
  background:rgba(27,19,16,.72);color:var(--papel);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;
}
.wipe__rot--a{left:.8rem}
.wipe__rot--b{right:.8rem}

/* =========================================================
   O ARGUMENTO — por que não tem cobertura
   ========================================================= */
.argumento{background:var(--tinta);color:var(--papel)}
.argumento h2{color:var(--papel);margin-bottom:1.2rem;max-width:16ch}
.argumento .rot{color:rgba(246,241,233,.6)}
.argumento__grade{display:grid;gap:2.4rem}
.pontos{display:grid;gap:0;border-top:1px solid var(--linha-clara)}
.pontos li{display:grid;gap:.5rem;padding:1.5rem 0;border-bottom:1px solid var(--linha-clara)}
.pontos h3{color:var(--papel)}
.pontos p{font-size:1rem;line-height:1.6;color:rgba(246,241,233,.74);max-width:44ch}
.pontos__n{font-size:.72rem;font-weight:700;letter-spacing:.18em;color:rgba(246,241,233,.5)}
@media(min-width:62em){
  .argumento__grade{grid-template-columns:1fr 1.2fr;gap:4.5rem;align-items:start}
}

/* =========================================================
   OS TRÊS SABORES — a barra grossa é a camada de recheio
   ========================================================= */
.sabores__cab{margin-bottom:2.4rem}
.sabores__grade{display:grid;gap:1.6rem}
@media(min-width:46em){.sabores__grade{grid-template-columns:repeat(3,1fr);gap:1.2rem}}

.sabor{display:flex;flex-direction:column;background:var(--branco);border-radius:4px;overflow:hidden}
.sabor__fig{margin:0;overflow:hidden;background:var(--papel-2)}
.sabor__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s var(--ease)}
.sabor:hover .sabor__fig img{transform:scale(1.035)}
/* a camada cresce no hover por transform, nao por height:
   animar height causa reflow */
.sabor__camada{
  height:34px;background:var(--cor);transform-origin:top;transform:scaleY(.59);
  transition:transform .35s var(--ease);
}
.sabor:hover .sabor__camada{transform:scaleY(1)}
.sabor__corpo{display:flex;flex-direction:column;flex:1;padding:1.4rem 1.3rem 1.5rem}
.sabor__n{font-size:.72rem;font-weight:700;letter-spacing:.18em;color:var(--cor);margin-bottom:.6rem}
.sabor h3{margin-bottom:.5rem}
.sabor__massa{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:.9rem}
.sabor p{font-size:.98rem;line-height:1.6;color:var(--tinta-2)}
.sabor--chocolate{--cor:var(--cacau)}
.sabor--banana{--cor:var(--canela)}
.sabor--vermelhas{--cor:var(--vermelha)}

/* ---------- banda larga ---------- */
.banda{overflow:hidden;background:var(--papel-2)}
.banda img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media(min-width:62em){.banda img{aspect-ratio:21/8}}

/* =========================================================
   MONTADOR
   ========================================================= */
.monte{background:var(--papel-2);border-top:1px solid var(--linha)}
.monte__cab{margin-bottom:2.2rem;max-width:52ch}
.monte__grade{display:grid;gap:2rem}
@media(min-width:68em){
  .monte__grade{grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
  /* com dois por linha a caixa fica alta; os controles ficam grudados
     para voce continuar somando sem perder a caixa de vista */
  .monte__escolhas{position:sticky;top:88px}
}

.passo{margin-bottom:1.9rem}
.passo__t{
  display:flex;align-items:baseline;gap:.6rem;margin-bottom:.9rem;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2);
}
.passo__t b{
  display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:999px;
  background:var(--tinta);color:var(--papel);font-size:.7rem;font-weight:700;letter-spacing:0;
  align-self:center;
}

.opcoes{display:flex;flex-wrap:wrap;gap:.55rem}
.op{
  min-height:48px;padding:.6rem 1.15rem;cursor:pointer;
  background:transparent;border:2px solid var(--linha);border-radius:999px;
  font-size:.95rem;font-weight:600;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.op:hover{border-color:var(--tinta)}
.op.is-escolhido{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.op--cor.is-escolhido{background:var(--cor);border-color:var(--cor);color:var(--branco)}
.op--chocolate{--cor:var(--cacau)}
.op--banana{--cor:var(--canela)}
.op--vermelhas{--cor:var(--vermelha)}

/* tamanho da caixa: cartao com a quantidade, o preco e o por unidade */
.tamanhos{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media(min-width:34em){.tamanhos{grid-template-columns:repeat(4,1fr)}}
.tam{
  display:grid;gap:.1rem;padding:.85rem .7rem 1rem;cursor:pointer;text-align:center;
  background:var(--branco);border:2px solid var(--linha);border-radius:6px;
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.tam:hover{transform:translateY(-2px);border-color:var(--tinta)}
.tam b{font-family:var(--display);font-size:1.9rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.tam span{font-size:.76rem;font-weight:600;color:var(--tinta-2);margin-bottom:.45rem}
.tam em{font-style:normal;font-size:1rem;font-weight:700;line-height:1.1}
.tam small{font-size:.71rem;font-weight:600;color:var(--tinta-2)}
.tam.is-escolhido{border-color:var(--tinta);background:var(--tinta);color:var(--papel)}
.tam.is-escolhido span,.tam.is-escolhido small{color:rgba(246,241,233,.76)}

.massas{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.massa{
  display:grid;gap:.55rem;padding:.7rem;cursor:pointer;text-align:left;
  background:var(--branco);border:2px solid var(--linha);border-radius:6px;
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.massa:hover{transform:translateY(-2px)}
.massa img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:3px;background:var(--papel-3)}
.massa span{font-size:.92rem;font-weight:700}
.massa.is-escolhido{border-color:var(--tinta)}
.massa.is-escolhido span::after{content:" ✓"}

/* ---------- a caixa ---------- */
.caixa{background:var(--branco);border:1px solid var(--linha);border-radius:6px;padding:1.2rem}
.caixa__topo{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.caixa__topo h3{font-size:1.1rem}
#caixa-contador{font-size:.88rem;font-weight:700;color:var(--tinta-2);font-variant-numeric:tabular-nums}
#caixa-contador.is-cheia{color:var(--tinta)}
.caixa__total{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:0 0 1rem;padding-bottom:.8rem;border-bottom:1px solid var(--linha-fraca);
  font-size:.92rem;color:var(--tinta-2);
}
.caixa__total b{color:var(--tinta);font-weight:700}
.caixa__total > b{font-size:1.3rem;font-family:var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* dois bolinhos por linha, em qualquer largura */
#caixa-grade{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}

.slot{position:relative;aspect-ratio:1/1;border-radius:4px;overflow:hidden}
.slot.is-vazio{
  border:2px dashed var(--linha);display:grid;place-items:center;background:var(--papel);
}
.slot__n{font-size:.85rem;font-weight:700;color:var(--tinta-2)}
.slot.is-cheio{background:var(--papel-3);box-shadow:inset 0 0 0 3px var(--cor)}
.slot.r-chocolate{--cor:var(--cacau)}
.slot.r-banana{--cor:var(--canela)}
.slot.r-vermelhas{--cor:var(--vermelha)}
.slot img{width:100%;height:100%;object-fit:cover}
.slot__tag{
  position:absolute;left:0;right:0;bottom:0;padding:.28rem .4rem;
  background:var(--cor);color:var(--branco);
  font-size:.6rem;font-weight:700;letter-spacing:.03em;line-height:1.2;text-align:center;
}
.slot__tira{
  position:absolute;top:3px;right:3px;width:26px;height:26px;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(27,19,16,.78);color:var(--papel);border:0;border-radius:999px;
}
.slot__tira svg{width:13px;height:13px}
.slot__tira:hover{background:var(--tinta)}
@keyframes treme{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-5px)}
  40%,80%{transform:translateX(5px)}
}
.treme{animation:treme .38s var(--ease)}

.caixa__acoes{display:grid;gap:.5rem;margin-top:1.1rem}
@media(min-width:34em){.caixa__acoes{grid-auto-flow:column;grid-auto-columns:1fr}}
.mini{
  min-height:46px;padding:.5rem 1rem;cursor:pointer;
  background:transparent;border:2px solid var(--linha);border-radius:999px;
  font-size:.88rem;font-weight:700;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.mini:hover{border-color:var(--tinta)}
.mini[disabled]{opacity:.35;cursor:not-allowed}

/* ---------- resumo ---------- */
.resumo{margin-top:1.4rem;border-top:2px solid var(--tinta);padding-top:.2rem}
.resumo__vazio{padding:.9rem 0;font-size:.95rem;color:var(--tinta-2)}
.resumo__linha{
  display:grid;grid-template-columns:auto 1fr auto;gap:.2rem .7rem;align-items:baseline;
  padding:.7rem 0;border-bottom:1px solid var(--linha-fraca);
}
.resumo__linha b{font-size:1.02rem;font-weight:800;font-variant-numeric:tabular-nums}
.resumo__linha span{font-size:.96rem;font-weight:600}
.resumo__linha em{
  font-style:normal;font-size:.74rem;font-weight:700;letter-spacing:.04em;
  padding:.18rem .55rem;border-radius:999px;color:var(--branco);background:var(--cor);white-space:nowrap;
}
.resumo__linha.r-chocolate{--cor:var(--cacau)}
.resumo__linha.r-banana{--cor:var(--canela)}
.resumo__linha.r-vermelhas{--cor:var(--vermelha)}

/* o botao continua clicavel com a caixa incompleta: clicar explica o que falta,
   em vez de simplesmente nao responder */
#btn-enviar{margin-top:1.3rem;background:transparent;color:var(--tinta-2);border-color:var(--linha)}
#btn-enviar:hover{transform:none}
#btn-enviar.is-pronto{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
#btn-enviar.is-pronto:hover{transform:translateY(-2px)}
.monte__rodape{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;margin-top:.8rem;min-height:2.6rem}
.monte__aviso{margin:0;font-size:.86rem;color:var(--tinta-2)}
.desfazer{
  min-height:40px;padding:.4rem 1rem;cursor:pointer;flex:none;
  background:transparent;border:2px solid var(--tinta);border-radius:999px;
  font-size:.84rem;font-weight:700;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.desfazer:hover{background:var(--tinta);color:var(--papel)}

/* ---------- barra fixa do pedido (so onde a caixa sai da tela) ---------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--tinta);color:var(--papel);
  transform:translateY(105%);transition:transform .32s var(--ease);
  box-shadow:0 -10px 30px rgba(27,19,16,.18);
}
.barra.is-ativa{transform:translateY(0)}
.barra__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:66px;padding-block:.6rem}
.barra__estado{display:grid;gap:.35rem;min-width:0}
.barra__estado b{font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.barra__pontos{display:flex;flex-wrap:wrap;gap:4px}
.barra__pontos li{width:9px;height:9px;border-radius:999px;background:var(--cor,transparent);box-shadow:inset 0 0 0 1px rgba(246,241,233,.45)}
.barra__pontos li.r-chocolate{--cor:var(--cacau)}
.barra__pontos li.r-banana{--cor:var(--canela)}
.barra__pontos li.r-vermelhas{--cor:var(--vermelha)}
.barra__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;flex:none;
  min-height:46px;padding:.6rem 1.25rem;border-radius:999px;
  background:transparent;color:var(--papel);box-shadow:inset 0 0 0 2px rgba(246,241,233,.4);
  font-family:var(--display);font-size:.9rem;font-weight:700;text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.barra__btn.is-pronto{background:var(--papel);color:var(--tinta);box-shadow:none}
@media(min-width:68em){.barra{display:none}}
.monte{padding-bottom:calc(var(--ar) + 84px)}
@media(min-width:68em){.monte{padding-bottom:var(--ar)}}

/* =========================================================
   PEDIR
   ========================================================= */
.pedir{border-top:1px solid var(--linha)}
.pedir__grade{display:grid;gap:2rem}
.tabela{width:100%;border-collapse:collapse;margin-top:.4rem;font-variant-numeric:tabular-nums}
.tabela th,.tabela td{padding:.75rem 0;text-align:right;font-size:1rem}
.tabela thead th{
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-2);border-bottom:2px solid var(--tinta);padding-bottom:.6rem;
}
.tabela tbody th{font-weight:600;text-align:left}
.tabela tbody tr{border-bottom:1px solid var(--linha-fraca)}
.tabela tbody td:nth-child(2){font-weight:700}
.tabela tbody td:last-child{color:var(--tinta-2)}
.tabela__nota{margin-top:.7rem;font-size:.84rem;line-height:1.5;color:var(--tinta-2)}

.dados{display:grid;gap:0;margin-top:2rem;border-top:2px solid var(--tinta)}
.dados > div{display:grid;gap:.3rem;padding:1.05rem 0;border-bottom:1px solid var(--linha-fraca)}
.dados dt{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2)}
.dados dd{margin:0;font-size:1.02rem;line-height:1.5}
.dados .falta{color:var(--tinta-2)}
.pedir__fig{margin:0}
.pedir__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px;background:var(--papel-2)}
@media(min-width:62em){
  .pedir__grade{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{background:var(--tinta);color:rgba(246,241,233,.78);padding-block:3rem}
.rodape__in{display:grid;gap:2rem}
.rodape__marca b{display:block;font-family:var(--display);font-size:2.2rem;font-weight:800;letter-spacing:-.045em;color:var(--papel);margin-bottom:.4rem}
.rodape__marca p{font-size:.96rem;line-height:1.55;color:rgba(246,241,233,.72);max-width:32ch}
.rodape__col{display:grid;gap:.4rem;align-content:start}
.rodape__rot{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,241,233,.55);margin-bottom:.25rem}
.rodape__col a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;text-decoration:none;color:var(--papel);font-size:.95rem;font-weight:600;border-bottom:1px solid transparent}
.rodape__col a:hover{border-color:var(--papel)}
.rodape__col p{font-size:.93rem;line-height:1.55;color:rgba(246,241,233,.72)}
.rodape__fim{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.5rem;
  padding-top:1.6rem;border-top:1px solid var(--linha-clara);
  font-size:.82rem;line-height:1.65;color:rgba(246,241,233,.6);
}
.rodape__fim a{color:var(--papel);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.rodape__fim a:hover{text-decoration-thickness:2px}
@media(min-width:48em){
  .rodape__in{grid-template-columns:1fr 1fr;gap:2.4rem}
  .rodape__fim{grid-column:1/-1}
}
@media(min-width:62em){.rodape__in{grid-template-columns:1.5fr 1fr 1fr}}

/* ---------- escala ---------- */
@media(min-width:48em){:root{--margem:26px;--ar:5.2rem}}
@media(min-width:62em){:root{--margem:34px;--ar:7rem}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}