/* Caiu no ENEM · landing de Redação. Usa a base de styles.css; aqui só o que é desta página. */

/* hero: folha de redação sendo escrita */
.rd-hero .hero__grid { align-items: start; }
.rd-hero h1 small { display: block; margin-top: 14px; font: 600 clamp(1rem, 2.4vw, 1.2rem)/1.4 var(--body); text-transform: none; letter-spacing: 0; color: #d3cdbe; }
.rd-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.rd-pills li { font: 600 .74rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: #d3cdbe; border: 1px solid #3a3832; border-radius: 999px; padding: 7px 12px; background: #161614; }
.rd-pills b { color: var(--hl); }

.folha-wrap { position: relative; max-width: 440px; margin-inline: auto; width: 100%; }
.folha { position: relative; background: #fffdf7; color: var(--ink); border-radius: 10px; padding: 46px 18px 18px 46px; box-shadow: 0 40px 70px -28px rgba(0,0,0,.85), 10px 10px 0 var(--hl); transform: rotate(1.6deg); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.folha-wrap:hover .folha { transform: rotate(0deg) translateY(-4px); }
.folha::before { content: "FOLHA DE REDAÇÃO · 30 LINHAS · 1 HORA"; position: absolute; left: 46px; top: 17px; font: 700 .62rem var(--mono); letter-spacing: .1em; color: var(--mute); }
.folha::after { content: ""; position: absolute; left: 36px; top: 0; bottom: 0; width: 1.5px; background: rgba(216,52,42,.45); }
.zona { position: relative; display: block; width: 100%; border: 0; background: none; padding: 0; margin: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; border-radius: 4px; transition: background .25s; }
.zona + .zona { margin-top: 0; }
.zona:hover, .zona.on { background: rgba(255,225,74,.34); }
.zona__n { position: absolute; left: -34px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--hl); font: 700 .7rem/22px var(--mono); text-align: center; }
.zona__t { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); z-index: 2; font: 700 .64rem var(--mono); text-transform: uppercase; letter-spacing: .06em; background: var(--ink); color: var(--paper); padding: 5px 8px; border-radius: 5px; opacity: 0; translate: 8px 0; transition: opacity .3s, translate .3s; pointer-events: none; white-space: nowrap; }
.zona.lit .zona__t, .zona:hover .zona__t { opacity: 1; translate: 0 0; }
.ln { height: 13px; border-bottom: 1px solid #d9d3c4; position: relative; }
.ln i { position: absolute; left: var(--in, 0); bottom: 3px; height: 4px; width: 0; border-radius: 2px; background: #2a2926; opacity: .82; animation: escreve .5s cubic-bezier(.3,.7,.2,1) var(--d) forwards; }
@keyframes escreve { to { width: var(--w); } }
.folha__nota { position: absolute; left: -8px; bottom: -20px; z-index: 3; background: var(--red); color: #fff; font: 800 .78rem var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 9px 13px; border-radius: 8px; transform: rotate(-4deg); box-shadow: 0 10px 22px -8px rgba(0,0,0,.6); }
.folha__hint { margin-top: 22px; text-align: right; font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #8f8a7c; }

/* números com fração */
.numbers b small { font-size: .45em; letter-spacing: 0; margin-left: 2px; }

/* o que zera */
.zera__grid { display: grid; gap: 14px; margin-top: 40px; }
.zera article { position: relative; border: 1px solid #33312d; border-radius: var(--r); padding: 22px 22px 22px 66px; background: #161614; }
.zera article::before { content: "0"; position: absolute; left: 20px; top: 18px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--red); color: var(--red); font: 800 1rem/28px var(--disp); text-align: center; }
.zera h3 { font-size: 1.08rem; margin-bottom: 6px; }
.zera p { color: #c9c4b6; font-size: .94rem; }
.zera__obs { margin-top: 26px; color: #a39d8e; font-size: .9rem; max-width: 70ch; }
.zera__obs b { color: var(--hl); }
@media (min-width: 760px) { .zera__grid { grid-template-columns: repeat(2, 1fr); } .zera article:last-child { grid-column: 1 / -1; } }

/* teste dos 5 elementos */
.cinco { background: var(--card); border-block: 1px solid var(--line); }
.cinco__grid { display: grid; gap: 30px; margin-top: 38px; align-items: start; }
.prop { background: #fff; border: 1.5px solid var(--ink); border-radius: 16px; padding: clamp(20px, 3vw, 30px); box-shadow: 6px 6px 0 var(--ink); font-size: clamp(1.02rem, 2.2vw, 1.16rem); line-height: 1.85; }
.prop span { border-radius: 4px; padding: 1px 2px; transition: background .35s, box-shadow .35s, color .35s; }
.prop span.on { background: var(--hl); box-shadow: 0 0 0 2px var(--hl); }
.prop__tag { display: block; font: 700 .68rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mute); margin-bottom: 10px; }
.prop--ruim { border-style: dashed; box-shadow: none; background: transparent; color: var(--ink-2); margin-top: 16px; position: relative; font-size: 1rem; }
.prop--ruim::after { content: "o corretor lê isso o dia inteiro"; position: absolute; right: 12px; top: -12px; background: var(--red); color: #fff; font: 700 .64rem var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 5px 9px; border-radius: 5px; transform: rotate(2deg); }
.chips { display: grid; gap: 10px; }
.chip { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--ink); background: var(--paper); font: 600 1rem var(--body); color: var(--ink); cursor: pointer; transition: transform .15s, background .2s, box-shadow .15s; box-shadow: 3px 3px 0 var(--ink); }
.chip:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.chip i { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--ink); display: grid; place-items: center; background: #fff; }
.chip i svg { opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.2,.9,.3,1.6); }
.chip small { margin-left: auto; font: 700 .74rem var(--mono); color: var(--mute); }
.chip.on { background: var(--hl); box-shadow: none; transform: translate(3px, 3px); }
.chip.on i { background: var(--ink); color: var(--hl); }
.chip.on i svg { opacity: 1; transform: none; }
.placar { margin-top: 18px; border-radius: 14px; background: var(--ink); color: var(--paper); padding: 18px 20px; }
.placar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 500 .78rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #b8b2a3; }
.placar__top b { font: 800 2.2rem/1 var(--disp); color: var(--hl); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.placar__bar { height: 8px; border-radius: 4px; background: #2a2926; margin-top: 12px; overflow: hidden; }
.placar__bar i { display: block; height: 100%; width: 0; background: var(--hl); border-radius: 4px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.placar p { margin-top: 12px; font-size: .92rem; color: #d3cdbe; min-height: 2.9em; }
@media (min-width: 900px) { .cinco__grid { grid-template-columns: 1.25fr .9fr; gap: 44px; } }

/* esqueleto: amostra grátis com trechos trancados */
.esq__tabs { display: flex; gap: 8px; margin-top: 34px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.esq__tabs::-webkit-scrollbar { display: none; }
.esq__tab { flex: none; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; font: 600 .9rem var(--body); color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.esq__tab b { font: 700 .72rem var(--mono); width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--hl); display: grid; place-items: center; }
.esq__tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.esq__tab[aria-selected="true"] b { background: var(--hl); color: var(--ink); }
.esq__tab svg { opacity: .6; }
.esq__pane { margin-top: 20px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 18px; padding: clamp(20px, 3.4vw, 36px); box-shadow: 8px 8px 0 var(--ink); animation: sobe .4s cubic-bezier(.2,.8,.2,1); }
@keyframes sobe { from { opacity: 0; transform: translateY(10px); } }
.esq__pane h3 { font-size: 1.35rem; }
.esq__pane h3 small { font: 500 .78rem var(--mono); color: var(--mute); margin-left: 8px; text-transform: uppercase; letter-spacing: .06em; }
.passo { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 16px 0; border-bottom: 1px dashed var(--line); }
.passo:last-of-type { border-bottom: 0; }
.passo > b { grid-row: span 2; font: 700 .72rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink); background: var(--hl); border-radius: 6px; padding: 5px 9px; align-self: start; white-space: nowrap; }
.passo p { color: var(--ink-2); }
.slot { background: #fff1b0; border-radius: 4px; padding: 1px 6px; font-weight: 600; color: var(--ink); white-space: normal; }
.esq__dica { margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: var(--ink); color: #d3cdbe; font-size: .95rem; }
.esq__dica b { color: var(--hl); }
.tranca { position: relative; margin-top: 8px; }
.tranca__fake { display: grid; gap: 16px; filter: blur(5px); opacity: .55; user-select: none; pointer-events: none; }
.tranca__fake div { display: grid; gap: 7px; }
.tranca__fake i { display: block; height: 11px; border-radius: 6px; background: #cfc8b6; }
.tranca__fake i:nth-child(1) { width: 34%; background: var(--hl-2); }
.tranca__fake i:nth-child(2) { width: 96%; } .tranca__fake i:nth-child(3) { width: 82%; }
.tranca__over { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 12px; padding: 12px; }
.tranca__over p { font: 700 1.02rem var(--disp); max-width: 30ch; }
.lock { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--hl); display: grid; place-items: center; }
.movs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; padding: 0; list-style: none; }
.movs li { font: 600 .8rem var(--mono); border: 1.5px solid var(--ink); border-radius: 8px; padding: 6px 10px; background: #fff; }

/* repertórios */
.rep { background: var(--ink); color: var(--paper); }
.rep .eyebrow { color: #a39d8e; }
.rep .sec-lead { color: #cfc9ba; }
.rep mark { background: var(--hl); color: var(--ink); padding: 0 .12em; border-radius: .06em; }
.rep__grid { display: grid; gap: 14px; margin-top: 38px; }
.rep__card { border-radius: var(--r); padding: 22px; background: #fffdf7; color: var(--ink); border: 1.5px solid var(--hl); }
.rep__card h3 { font-size: 1.12rem; }
.rep__card p { margin-top: 8px; font-size: .95rem; color: var(--ink-2); }
.rep__card em { display: block; margin-top: 12px; font: 600 .72rem var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.rep__lock { border-radius: var(--r); padding: 18px 20px; background: #161614; border: 1px dashed #4a473f; display: flex; align-items: center; gap: 14px; color: #a39d8e; }
.rep__lock svg { flex: none; color: var(--hl); }
.rep__lock b { display: block; height: 11px; width: 120px; max-width: 100%; border-radius: 6px; background: #3a3832; margin-bottom: 8px; }
.rep__lock span { font: 600 .72rem var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.rep__modelo { margin-top: 26px; border-left: 4px solid var(--hl); padding: 6px 0 6px 18px; max-width: 760px; }
.rep__modelo p { font-style: italic; color: #e6e0d0; font-size: 1.02rem; }
.rep__modelo p + p { font-style: normal; margin-top: 10px; color: #b8b2a3; font-size: .93rem; }
.rep__modelo u { text-decoration-color: var(--hl); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.rep__cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.rep__cta span { color: #a39d8e; font-size: .9rem; }
.rep .btn--primary { border-color: var(--hl); box-shadow: 4px 4px 0 rgba(255,225,74,.28); }
@media (max-width: 699px) { .rep__grid > :nth-child(n+5):nth-child(-n+8) { display: none; } }
@media (min-width: 700px) { .rep__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rep__grid { grid-template-columns: repeat(3, 1fr); } }

/* temas */
.temas__grid { display: grid; gap: 34px; margin-top: 38px; }
.linha { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ink); }
.linha li { position: relative; padding: 0 0 22px 22px; }
.linha li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--hl); border: 2px solid var(--ink); }
.linha b { font: 700 .8rem var(--mono); display: block; color: var(--mute); }
.linha span { font: 600 1rem/1.4 var(--body); }
.temas__padrao { background: #fff7c9; border: 1.5px solid var(--ink); border-radius: var(--r); padding: 20px 22px; font-size: .98rem; }
.temas__padrao b { font-family: var(--disp); font-size: 1.1rem; display: block; margin-bottom: 6px; }
.eixos { display: grid; gap: 10px; }
.eixo { border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card); padding: 15px 16px; display: flex; align-items: center; gap: 12px; font-weight: 600; }
.eixo small { font: 700 .72rem var(--mono); color: var(--mute); }
.eixo svg { margin-left: auto; flex: none; color: var(--mute); }
.eixo--aberto { display: block; background: #fff; box-shadow: 5px 5px 0 var(--ink); }
.eixo--aberto h4 { margin: 0 0 10px; font: 800 1.08rem var(--disp); display: flex; gap: 10px; align-items: baseline; }
.eixo--aberto dl { margin: 0; display: grid; gap: 8px; font-weight: 400; font-size: .93rem; color: var(--ink-2); }
.eixo--aberto dt { font: 700 .68rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink); }
.eixo--aberto dd { margin: 0; }
@media (min-width: 900px) { .temas__grid { grid-template-columns: .9fr 1.1fr; gap: 56px; } }

/* oferta */
.oferta__box { display: grid; gap: 28px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 22px; padding: clamp(24px, 4vw, 44px); box-shadow: 8px 8px 0 var(--ink); position: relative; }
.oferta__box::before { content: "menos que um lanche"; position: absolute; top: -16px; right: 22px; background: var(--red); color: #fff; font: 800 .76rem var(--mono); text-transform: uppercase; letter-spacing: .07em; padding: 7px 12px; border-radius: 7px; transform: rotate(2deg); }
.oferta__list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.oferta__list li { display: flex; gap: 10px; align-items: flex-start; }
.oferta__list svg { flex: none; margin-top: 4px; }
.oferta__buy { background: var(--paper); border-radius: 16px; padding: 26px; text-align: center; align-self: start; }
.oferta__buy img { width: 150px; height: auto; margin: 0 auto 18px; border-radius: 6px; box-shadow: 0 18px 30px -14px rgba(0,0,0,.6); transform: rotate(-3deg); }
.oferta__buy .price { font: 800 3.6rem/1 var(--disp); letter-spacing: -.05em; }
.oferta__buy .per { margin: 8px 0 18px; font-size: .88rem; color: var(--mute); }
.oferta__buy .fine { margin-top: 12px; font-size: .8rem; color: var(--mute); }
.upsell { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border: 1.5px dashed var(--ink); border-radius: 16px; padding: 18px 22px; }
.upsell p { font-size: .98rem; max-width: 60ch; }
.upsell p b { font-family: var(--disp); font-size: 1.08rem; }
@media (min-width: 860px) { .oferta__box { grid-template-columns: 1.3fr .9fr; align-items: center; } }

@media (prefers-reduced-motion: reduce) { .ln i { animation: none; width: var(--w); } .esq__pane { animation: none; } }

/* raio-X das redações nota mil (bloco gerado por pipeline/31_web_nota_mil.py) */
.nm { background: var(--paper); padding-top: clamp(44px, 7vw, 84px); }
.nm__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
.nm__cards > div { background: var(--card); border: 1.5px solid var(--ink); border-radius: 14px; padding: 16px 14px; box-shadow: 4px 4px 0 var(--ink); }
.nm__cards b { display: block; font: 800 clamp(1.5rem, 6vw, 2.2rem)/1 var(--disp); letter-spacing: -.03em; }
.nm__cards span { display: block; margin-top: 8px; font-size: .88rem; color: var(--ink-2); line-height: 1.35; }
.nm__virada { margin-top: 26px; padding: 18px 20px; border-radius: 14px; background: var(--ink); color: #d3cdbe; font-size: 1.02rem; }
.nm__virada strong { color: var(--hl); }
.nm__h3 { margin-top: clamp(36px, 6vw, 56px); font-size: clamp(1.25rem, 4.4vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; }
.nm__abas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.nm__abas button { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--ink); background: transparent; font: 700 1rem var(--body); color: var(--ink); cursor: pointer; }
.nm__abas small { display: block; font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; opacity: .7; }
.nm__abas button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.nm__filtros { position: sticky; top: 66px; z-index: 5; display: flex; gap: 6px; overflow-x: auto; margin: 14px -20px 0; padding: 10px 20px; background: rgba(246,242,232,.94); backdrop-filter: blur(8px); scrollbar-width: none; border-bottom: 1px solid var(--line); }
.nm__filtros::-webkit-scrollbar { display: none; }
.nm__filtros button { flex: none; padding: 9px 14px; min-height: 40px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; font: 600 .86rem var(--body); color: var(--ink); cursor: pointer; }
.nm__filtros button[aria-pressed="true"] { background: var(--hl); }
.nm__red { margin-top: 16px; background: #fffdf7; border: 1.5px solid var(--ink); border-radius: 16px; padding: clamp(18px, 4vw, 34px); box-shadow: 6px 6px 0 var(--ink); }
.nm__red header b { display: block; font: 800 1.1rem var(--disp); }
.nm__red header span { display: block; margin-top: 4px; font: 500 .72rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.nm__txt { margin-top: 16px; font-size: 1.02rem; line-height: 1.78; color: var(--ink); }
.nm__txt p { margin-bottom: 14px; text-indent: 1.6em; }
.nm__txt[data-fechado] { max-height: 21rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.nm__mais { display: block; width: 100%; margin-top: 4px; padding: 14px; min-height: 48px; border-radius: 12px; border: 1.5px dashed var(--ink); background: var(--paper); font: 700 .95rem var(--body); color: var(--ink); cursor: pointer; }
.nm__mais[hidden] { display: none; }
.nm__rx { margin-top: 18px; padding-top: 16px; border-top: 1.5px solid var(--ink); }
.nm__rx h4 { margin: 0 0 8px; font: 700 .74rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.nm__rx ul { margin: 0; padding-left: 18px; font-size: .94rem; color: var(--ink-2); }
.nm__rx li { margin-bottom: 5px; }
.nm__inep { margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid var(--hl-2); background: #fff7c9; font-size: .92rem; font-style: italic; border-radius: 0 10px 10px 0; }
.nm__inep b { font-style: normal; }
.nm mark[class^="x-"] { background: none; color: inherit; padding: 0; transition: background .25s; }
.nm mark.x-rep { background: #fff1b0; border-radius: 4px; padding: 1px 3px; }
.nm mark.x-tese { box-shadow: inset 0 -3px 0 var(--ink); }
.nm mark.x-con { font-weight: 700; border-bottom: 1.5px dotted var(--ink); }
.nm mark.x-ag, .nm mark.x-det, .nm mark.x-ac, .nm mark.x-meio, .nm mark.x-fin { border-radius: 4px; padding: 1px 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nm mark.x-ag { background: #cfe3ff; }
.nm mark.x-det { background: #e4d6ff; }
.nm mark.x-ac { background: #ffd9c9; }
.nm mark.x-meio { background: #d7f2de; }
.nm mark.x-fin { background: #ffd6e8; }
.nm mark.x-ag::before, .nm mark.x-det::before, .nm mark.x-ac::before, .nm mark.x-meio::before, .nm mark.x-fin::before { font: 700 .58rem var(--mono); letter-spacing: .04em; vertical-align: .5em; margin-right: 4px; }
.nm mark.x-ag::before { content: "QUEM"; }
.nm mark.x-det::before { content: "DETALHE"; }
.nm mark.x-ac::before { content: "O QUÊ"; }
.nm mark.x-meio::before { content: "COMO"; }
.nm mark.x-fin::before { content: "PARA QUÊ"; }
.nm__palco[data-f="tese"] mark:not(.x-tese), .nm__palco[data-f="rep"] mark:not(.x-rep), .nm__palco[data-f="con"] mark:not(.x-con),
.nm__palco[data-f="prop"] mark.x-tese, .nm__palco[data-f="prop"] mark.x-rep, .nm__palco[data-f="prop"] mark.x-con { background: none; box-shadow: none; border-bottom: 0; font-weight: inherit; padding: 0; }
.nm__palco[data-f="tese"] mark:not(.x-tese)::before, .nm__palco[data-f="rep"] mark:not(.x-rep)::before, .nm__palco[data-f="con"] mark:not(.x-con)::before { content: none; }
.nm__palco[data-f="tese"] mark.x-tese { background: var(--hl); box-shadow: none; }
.nm__palco[data-f="con"] mark.x-con { background: var(--hl); border-radius: 4px; padding: 1px 3px; }
.nm__resto ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.nm__resto li { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1.5px dashed #b9b3a3; border-radius: 12px; color: var(--mute); }
.nm__resto li span { font-weight: 700; color: var(--ink-2); }
.nm__resto li small { display: block; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--mute); margin-top: 2px; }
.nm__cta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.nm__cta span { font-size: .9rem; color: var(--mute); max-width: 44ch; }
.nm__fonte { margin-top: 28px; padding-top: 18px; border-top: 1px dashed var(--line); font-size: .8rem; color: var(--mute); max-width: 80ch; }
@media (min-width: 760px) {
  .nm__cards { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .nm__resto ul { grid-template-columns: repeat(2, 1fr); }
  .nm__filtros { margin-inline: 0; padding-inline: 0; position: static; background: none; border: 0; }
  .nm__abas { max-width: 560px; }
}

/* barra de compra fixa no celular (a do carrinho só aparece depois de adicionar algo) */
.rd-fixa { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 44; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 9px 9px 16px; background: var(--ink); color: var(--paper); border-radius: 16px; box-shadow: 0 16px 36px -10px rgba(0,0,0,.6); transform: translateY(170%); transition: transform .35s cubic-bezier(.2,.9,.3,1.1); font-size: .86rem; line-height: 1.25; }
.rd-fixa.on { transform: none; }
.rd-fixa b { display: block; font: 800 1.02rem var(--disp); color: var(--hl); }
.rd-fixa .btn { padding: 12px 16px; box-shadow: none; border-color: var(--hl); white-space: nowrap; }
@media (min-width: 820px) { .rd-fixa { display: none; } }
body.locked .rd-fixa { transform: translateY(170%); }