/* ============================================================================
   falsotacho — design system das receitas e artigos.            ft-recipe.css
   ----------------------------------------------------------------------------
   Um ficheiro para todas as receitas. Nada de CSS por receita: se uma receita
   precisa de uma peca nova, a peca entra aqui com nome generico e serve as
   proximas. Se so serve uma, e conteudo, nao e componente.

   Indice
     0  Tokens
     1  Reset e base tipografica
     2  Chrome: nav, separadores, rodape
     3  Heroi: titulo, meta, porcoes, modo
     4  Prosa: passos, split operacional/porque, revelar
     5  Blocos: nota creme, alerta, kit, ramos, camadas, rotulo, mapa
     6  LabBlock e infografia comparativa
     7  Fotos: racios fixos, pares, anotacoes
     8  Lista de compras
     9  Nutricao: tabela e discos
    10  Desktop horizontal (>=1100px)
    11  Estados de rascunho
   ========================================================================== */


@import url("/assets/ft-cores.css?v=32060d60");


/* 1 ── RESET E BASE TIPOGRAFICA ───────────────────────────────────────────── */

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:"Poppins",system-ui,sans-serif;background:var(--paper);color:var(--ink);
  line-height:1.65;font-size:18px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
figure{margin:0;}

.mono{font-family:"IBM Plex Mono",monospace;}
.wrap{width:min(100% - 40px, 700px);margin-inline:auto;}
.wrap-wide{width:min(100% - 40px, 940px);margin-inline:auto;}
/* ── ESCALA VERTICAL ────────────────────────────────────────────────────────
   Quatro degraus, e mais nenhum. Antes disto havia catorze valores soltos
   (20, 22, 24, 26, 28, 30, 34, 40, 44, 48, 52, 64, 80, 88), cada um escolhido
   no momento, e nada que impedisse dois de se somarem.

   REGRA: um espaco por junta. Dois vizinhos nunca somam os seus espacos, e a
   junta pertence ao contentor, nunca ao primeiro filho.                       */
:root{
  --e-linha: 20px;                      /* dentro de um bloco */
  --e-bloco: 30px;                      /* entre blocos irmaos */
  --e-heroi: clamp(32px,4vw,52px);      /* do heroi para o que vem a seguir */
  --e-seccao:clamp(48px,7vw,88px);      /* entre seccoes */
}

section{padding:var(--e-seccao) 0;}

/* 1. vizinhos nao somam: manda o espaco de baixo do primeiro.
      Entre duas seccoes eram 176px; passam a ser um degrau. */
.hero + section,
section + section{padding-top:0;}

/* 2. a junta e do contentor: o primeiro filho de uma seccao nao traz margem
      propria por cima. Era a terceira margem a somar-se no heroi. */
section > .wrap > *:first-child,
section > .wrap-wide > *:first-child,
section > .wrap > .prose > *:first-child,
section > .wrap-wide > .prose > *:first-child{margin-top:0;}

/* etiqueta tecnica: monospace, caixa alta, com um filete a abrir */
.kicker{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:center;gap:.8em;}
.kicker::before{content:"";width:24px;height:1px;background:var(--faint);}

/* etiqueta pequena, dentro de blocos */
.lbl{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);display:block;}

p{margin-top:1.15em;color:var(--ink-2);font-size:1.05rem;line-height:1.78;text-align:justify;hyphens:auto;}
p.lead{font-size:1.22rem;line-height:1.7;color:var(--ink);margin-top:1.4em;}
/* O .lead e para uma abertura de UM paragrafo. Com paragrafos irmaos a seguir,
   o degrau de 1,22 para 1,05 nao significa nada e le-se como engano de
   tipografia: a abertura passa toda ao mesmo corpo.
   Isto vive aqui, e nao numa regra escrita, porque ja falhou duas vezes a
   depender de alguem se lembrar. */
.prose > p.lead:has(~ p){font-size:1.05rem;line-height:1.78;color:var(--ink-2);}
strong,b{font-weight:600;color:var(--ink);}
.prose{max-width:100%;}

/* texto curto nao se justifica: partiria em rios de espaco */
.note,.shop-note,.nut-disclaimer,.fixed-note,.batch-note,figcaption,
.gen-note p,.only-narr p,.src,.fecho{text-align:left;hyphens:none;}

.note{margin-top:10px;font-size:.82rem;line-height:1.5;color:var(--faint);font-style:italic;}
.src{margin-top:1.4em;font-size:.82rem;color:var(--faint);}

/* LIGACAO DENTRO DO TEXTO. O reset poe todos os <a> a herdar a cor e sem
   sublinhado, o que dentro de um paragrafo os torna invisiveis. Aqui o filete
   e o unico sinal, e usa o acento do artigo. */
.prose a[href]{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--acento);text-underline-offset:3px;
  text-decoration-thickness:1.5px;transition:color .2s var(--ease);}
.prose a[href]:hover{color:var(--acento-ink);}
.src a{text-decoration:underline;text-underline-offset:3px;}
.fecho{margin-top:2.2em;font-size:1.05rem;color:var(--ink);overflow-wrap:anywhere;}


/* 2 ── CHROME: NAV, SEPARADORES, RODAPE ───────────────────────────────────── */

.nav{position:sticky;top:0;z-index:60;background:rgba(251,251,249,.82);
  backdrop-filter:blur(12px) saturate(1.15);border-bottom:1px solid var(--line);}
.nav .wrap-wide{display:flex;align-items:center;justify-content:space-between;padding:12px 0;}

.brand{display:flex;align-items:center;gap:10px;}
.brand svg{width:26px;height:26px;color:var(--ink);flex:none;}
.brand b{font-weight:400;font-size:.98rem;letter-spacing:.01em;}
.brand b em{font-style:normal;font-weight:700;}
.brand small{display:block;font-family:"IBM Plex Mono",monospace;font-size:.58rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:500;}

/* separadores — Receita | Lista de compras | Nutricao */
.tabs{position:sticky;top:53px;z-index:50;background:var(--paper);border-bottom:1px solid var(--line);}
.tabs .wrap-wide{display:flex;gap:4px;padding:0;}
.tab-btn{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.04em;
  padding:16px 18px;color:var(--mid);border-bottom:2px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);}
.tab-btn:hover{color:var(--ink);}
.tab-btn.active{color:var(--ink);border-bottom-color:var(--ink);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

footer{padding:34px 0;border-top:1px solid var(--line);text-align:center;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--faint);letter-spacing:.04em;}


/* 3 ── HEROI ──────────────────────────────────────────────────────────────── */
/*
   REGRA: a fotografia da receita pertence ao heroi, ao lado do titulo e
   alinhada pelo topo. Nao e uma seccao a parte por baixo. E a cara do prato:
   quem chega tem de a ver sem fazer scroll, ao mesmo tempo que le o titulo.

   .hero-grid   texto a esquerda, fotografia a direita
   .hero-txt    etiqueta, titulo, subtitulo e TUDO o que caracteriza a receita
   .hero-ctrl   porcoes e modo — dentro da coluna de texto, LOGO A SEGUIR AO
                tempo. Sao caracteristicas da receita, nao um rodape do heroi:
                por baixo das duas colunas ficavam orfaos e deixavam a coluna
                da esquerda meia vazia.
   .hero-foto   o KV em 4:5

   A ordem na coluna: etiqueta, titulo, subtitulo, tempo, porcoes, modo, nota.
   No telemovel empilha: texto (com tudo), fotografia.                          */

.hero{padding:clamp(40px,6vw,72px) 0 var(--e-heroi);}

.hero-grid{display:grid;gap:clamp(26px,3.4vw,52px);align-items:start;}
@media(min-width:900px){
  .hero-grid{grid-template-columns:1.12fr .88fr;}
}
/* No telemovel a fotografia sobe para logo a seguir ao subtitulo: continua a
   valer que quem chega ve o titulo e a fotografia ao mesmo tempo. O
   display:contents desmonta a coluna para os filhos poderem ser ordenados;
   o gap passa a 0 porque cada peca ja traz a sua margem. */
@media(max-width:899px){
  .hero-grid{gap:0;}
  .hero-txt{display:contents;}
  .hero-txt > *      {order:5;}
  /* com display:contents a etiqueta vira item de grelha e esticava-se */
  .hero-txt > .badge {order:1;justify-self:start;}
  .hero-txt > h1     {order:2;}
  .hero-txt > .sub   {order:3;}
  .hero-foto         {order:4;margin:26px 0 4px;}
}
.hero-foto{margin:0;}
.hero-foto img{aspect-ratio:var(--ar-kv);object-fit:contain;width:100%;border-radius:12px;}
.hero-foto figcaption{text-align:left;}

/* As caracteristicas continuam a lista que o tempo comeca: mesma coluna,
   mesmo filete a separar. Nao levam borda em cima porque a .meta ja a tem. */
.hero-ctrl{margin-top:22px;}
.hero-ctrl .servings{margin-top:0;max-width:none;}
.hero-ctrl .note{margin-top:9px;}
.hero-ctrl .mode-block{margin-top:20px;padding-top:20px;border-top:1px solid var(--line-2);}

/* a etiqueta do tipo de conteudo */
.badge{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mid);
  border:1px solid var(--line);border-radius:4px;padding:5px 11px;}
.hero h1{font-size:clamp(2rem,3.4vw,3.4rem);font-weight:400;line-height:1.07;
  letter-spacing:-.022em;margin-top:18px;text-wrap:balance;}
.hero .sub{margin-top:18px;font-size:1.1rem;line-height:1.62;color:var(--mid);text-align:left;}

/* meta do heroi — rendimento e tempo, em linha e sem caixa.
   O tempo aceita uma decomposicao opcional (<em>) para receitas em que o total
   sozinho mente: 2h30 que sao 25m de maos e 2h de frio nao e o mesmo esforco. */
.meta{list-style:none;display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:0;margin-top:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.meta li{display:flex;align-items:flex-start;gap:11px;padding:16px 26px 16px 0;margin-right:26px;
  border-right:1px solid var(--line-2);}
.meta li > span{display:block;}
.meta li:last-child{border-right:none;margin-right:0;padding-right:0;}
.meta svg{width:17px;height:17px;flex:none;color:var(--faint);margin-top:3px;stroke:currentColor;
  fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.meta b{display:block;font-size:1rem;font-weight:600;color:var(--ink);line-height:1.3;}
.meta small{display:block;margin-top:3px;font-family:"IBM Plex Mono",monospace;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.meta em{display:block;margin-top:5px;font-style:normal;font-size:.82rem;
  line-height:1.45;color:var(--mid);}
/* Empilhados, o filete que separa passa a ser horizontal. Com dois itens a
   fila cabia sempre e nao se via; com quatro (os eixos de um artigo) o filete
   vertical ficava pendurado a direita de cada linha. */
@media(max-width:760px){
  .meta{flex-direction:column;}
  .meta li{width:100%;padding:14px 0;margin-right:0;
    border-right:none;border-bottom:1px solid var(--line-2);}
  .meta li:last-child{border-bottom:none;}
}

/* porcoes / unidades — o stepper */
.servings{margin-top:34px;border:1px solid var(--line);border-radius:6px;background:var(--paper-2);
  padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:420px;}
.servings .label{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mid);}
.servings .stepper{display:flex;align-items:center;gap:14px;}
.servings .stepper button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  font-size:1.1rem;color:var(--ink);display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease),border-color .2s var(--ease);}
.servings .stepper button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.servings .stepper .n{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:1.3rem;
  min-width:26px;text-align:center;}

/* modo Narrativa <-> Simples */
.mode-block{margin-top:30px;}
.mode-switch{display:inline-flex;border:1px solid var(--line);border-radius:20px;padding:3px;background:var(--paper-2);}
.mode-switch button{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.04em;
  padding:8px 16px;border-radius:16px;color:var(--mid);transition:background .2s var(--ease),color .2s var(--ease);}
.mode-switch button.active{background:var(--ink);color:var(--paper);}
.mode-caption{margin-top:10px;font-size:.82rem;color:var(--faint);font-style:italic;}

/* quantidade inline que acompanha o stepper */
.qty{font-weight:600;color:var(--ink);white-space:nowrap;}


/* 4 ── PROSA: PASSOS E SPLIT ──────────────────────────────────────────────── */

/* quebra que marca o inicio da receita propriamente dita */
.recipe-start{text-align:center;padding:clamp(40px,6vw,64px) 0 0;}
.recipe-start .kicker{justify-content:center;}
.recipe-start .kicker::after{content:"";width:24px;height:1px;background:var(--faint);}

.act-head{margin-top:8px;}
.act-title{font-size:clamp(1.5rem,3.6vw,2.1rem);font-weight:400;letter-spacing:-.02em;
  line-height:1.15;margin-top:10px;}

/* passo numerado */
.passo{display:flex;align-items:center;gap:12px;margin-top:2.4em;padding-bottom:10px;
  border-bottom:1px solid var(--line);}
.passo-n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);
  font-family:"IBM Plex Mono",monospace;font-size:.8rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;}
.passo h3{font-size:1.25rem;font-weight:600;letter-spacing:-.015em;}
.passo + .split{margin-top:1.2em;}

/* SPLIT — o que se faz (esquerda) e o que o acompanha (direita).
   No modo Simples a coluna da direita desaparece e o operacional ganha a largura.

   A coluna da direita NEM SEMPRE e um porque. O rotulo e texto livre — Porque,
   Nota, Atencao, Contexto, De onde veio, Truque — e ha duas intensidades:

     .exp         caixa quente. E o raciocinio: explica a decisao do passo.
     .exp.nota    filete calado. E um aparte: informacao util que nao muda o passo.

   A distincao importa. Se tudo vier na caixa quente, o leitor deixa de
   distinguir o que e preciso perceber do que e so bom saber.                   */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;margin-top:1.5em;align-items:start;}

/* .op vive dentro e fora do split: o filete quente e a etiqueta vao com ele */
.op{border-left:2px solid var(--acento);padding-left:20px;}
.op > .lbl{margin-bottom:10px;}
.op p{margin-top:0;}
.op p + p{margin-top:.7em;}

.split .exp{background:var(--acento-wash);border:1px solid var(--acento-line);border-radius:8px;padding:20px 22px;}
.split .exp .lbl{color:var(--acento-ink);margin-bottom:10px;}
.split .exp p{margin-top:0;color:var(--acento-text);font-size:1.05rem;text-align:left;hyphens:none;}
.split .exp p + p{margin-top:.7em;}
.split .exp p b,.split .exp p strong{color:var(--acento-ink);}

/* variante calada — um aparte nao pede a mesma atencao que o raciocinio */
.split .exp.nota{background:none;border:none;border-left:2px solid var(--line);
  border-radius:0;padding:2px 0 2px 20px;}
.split .exp.nota .lbl{color:var(--faint);}
.split .exp.nota p{color:var(--mid);}
.split .exp.nota p b,.split .exp.nota p strong{color:var(--ink);}

@media(max-width:640px){
  .split{grid-template-columns:1fr;gap:22px;}
  .op{padding-left:16px;}
  .split .exp{padding:16px 18px;}
}

/* modo simples: so operacional, sem teoria */
body.mode-simples .narr-only{display:none;}
body.mode-simples .split{grid-template-columns:1fr;}
body.mode-simples .split .exp{display:none;}
body:not(.mode-simples) .simp-only{display:none;}

/* aparte que so faz sentido a ler devagar */
.only-narr{border-left:2px solid var(--line);padding-left:18px;}
.only-narr .on-lbl{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);}
.only-narr p{margin-top:.45em;font-size:.95rem;color:var(--mid);text-align:left;hyphens:none;}

/* REVELAR — niveis de detalhe. Base visivel, o resto a pedido. */
.reveal{margin-top:1.6em;}
.reveal-btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:26px;padding:11px 20px;font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  letter-spacing:.06em;color:var(--ink);background:var(--paper-2);
  transition:border-color .2s var(--ease),background .2s var(--ease);}
.reveal-btn:hover{border-color:var(--ink);}
.reveal-btn .plus{width:17px;height:17px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;line-height:1;flex:none;
  transition:transform .3s var(--ease);}
.reveal.open > .reveal-btn{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.reveal.open > .reveal-btn .plus{transform:rotate(45deg);background:var(--paper);color:var(--ink);}
.reveal-body{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
  transition:grid-template-rows .45s var(--ease),opacity .3s var(--ease),margin-top .45s var(--ease);}
.reveal-body > .rb{overflow:hidden;min-height:0;}
.reveal.open > .reveal-body{grid-template-rows:1fr;opacity:1;margin-top:20px;}
.reveal-note{margin-top:8px;font-size:.82rem;color:var(--faint);font-style:italic;}
.reveal-call{margin-top:1.6em !important;font-size:1rem !important;color:var(--ink) !important;
  font-weight:500;text-align:left !important;hyphens:none !important;}
.reveal-btn.grande{margin-top:10px;padding:13px 24px;font-size:.78rem;}
.lvl2{border-left:2px solid var(--line);padding-left:20px;margin-top:4px;}


/* 5 ── BLOCOS ─────────────────────────────────────────────────────────────── */

/* nota creme — a mesma peca com dois usos.
   .intro-box abre um artigo; .alerta avisa a meio. Antes eram dois blocos de CSS
   iguais com nomes diferentes; agora e um so, com variantes. */
.intro-box,.alerta{background:var(--acento-soft);border:1px solid var(--acento-line);
  border-left:3px solid var(--acento);border-radius:8px;}
.intro-box{padding:22px 26px;margin-top:24px;}
.alerta{padding:16px 20px;margin-top:1.4em;}
.intro-box p,.alerta p{margin-top:0;color:var(--ink-2);text-align:left;hyphens:none;}
.intro-box p{font-size:1.05rem;}
.alerta p{font-size:1rem;margin-top:.5em;}
.intro-box p + p{margin-top:.9em;}
.alerta-h{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acento-ink);}

/* nota geral — recomendacao que nao e um passo */
.gen-note{margin-top:1.6em;border-left:2px solid var(--line);padding-left:18px;}
.gen-note .gh{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);}
.gen-note p{margin-top:.5em;font-size:1.05rem;color:var(--mid);}

/* kit — caixa que aponta para fora (outro artigo, uma ferramenta) */
.kit{margin-top:1.8em;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);padding:24px 26px;}
.kit-lbl{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);}
.kit h3{margin-top:8px;font-size:1.2rem;font-weight:600;letter-spacing:-.01em;}
.kit p{margin-top:.7em;font-size:1rem;color:var(--ink-2);text-align:left;hyphens:none;}
.kit .kit-nota{color:var(--mid);font-size:.92rem;}
.kit-link{display:inline-block;margin-top:16px;font-family:"IBM Plex Mono",monospace;
  font-size:.76rem;color:var(--ink);text-decoration:underline;text-underline-offset:4px;}

/* ramos — "se tiveres X faz assim, se nao faz assado" */
.ramos{margin-top:1.2em;display:grid;gap:12px;}
.ramo-box{border:1px solid var(--line);border-radius:8px;padding:16px 18px;background:var(--paper-2);}
.ramo-box p{margin-top:.6em;font-size:.97rem;color:var(--ink-2);text-align:left;hyphens:none;}
.ramo{margin-top:8px;font-size:.88rem;line-height:1.5;color:var(--mid);}
.ramo-i{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--line-2);
  border-radius:20px;padding:3px 10px;margin-right:6px;}

/* plano — a sequencia toda antes de a explicar passo a passo.
   Nao e a lista de passos: e o mapa da danca, para o leitor ver o ciclo
   inteiro de uma vez antes de se meter nos detalhes. */
.plano{margin-top:1.8em;border-top:1px solid var(--line);}
.plano-i{display:flex;gap:16px;align-items:flex-start;padding:15px 2px;border-bottom:1px solid var(--line-2);}
.plano-i .ln{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;margin-top:2px;}
.plano-i b{font-weight:600;font-size:1.02rem;color:var(--ink);}
.plano-i small{display:block;margin-top:3px;font-size:.88rem;line-height:1.5;color:var(--mid);}
.plano-i.fria .ln{background:var(--agua);}

/* ingredientes inline dentro de um passo */
.ing{margin-top:1.1em;border-top:1px solid var(--line-2);}
.ing .r{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:9px 2px;border-bottom:1px solid var(--line-2);}
.ing .r .n{font-size:1.02rem;color:var(--ink-2);}
.ing .r .n small{display:block;font-size:.8rem;color:var(--faint);font-style:italic;}
.ing .r .v{font-family:"IBM Plex Mono",monospace;font-size:.9rem;color:var(--ink);
  white-space:nowrap;font-weight:600;}

/* rotulo oficial — transcricao de um rotulo real, em monospace */
.label-box{margin-top:1.6em;border:1px solid var(--ink);border-radius:8px;
  background:var(--paper-2);overflow:hidden;}
.label-box .lb-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  flex-wrap:wrap;padding:14px 20px;border-bottom:2px solid var(--ink);}
.label-box .lb-t{font-weight:600;font-size:1.02rem;}
.label-box .lb-s{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid);}
.label-box .lb-body{margin:0;padding:18px 20px;font-family:"IBM Plex Mono",monospace;
  font-size:.82rem;line-height:1.75;color:var(--ink-2);text-align:left;hyphens:none;}
.label-box .lb-foot{margin:0;padding:0 20px 18px;font-family:"IBM Plex Mono",monospace;
  font-size:.82rem;font-weight:600;color:var(--ink);text-align:left;hyphens:none;}

/* mapa — o deles a esquerda, o nosso a direita */
.map-h{margin-top:2em;font-size:1.05rem;font-weight:600;}
.map{margin-top:.9em;border-top:1px solid var(--line);}
.mr{display:grid;grid-template-columns:1fr 24px 1fr;gap:10px;align-items:baseline;
  padding:13px 2px;border-bottom:1px solid var(--line-2);}
.mr .them{font-family:"IBM Plex Mono",monospace;font-size:.84rem;color:var(--mid);}
.mr .arr{font-family:"IBM Plex Mono",monospace;font-size:.84rem;color:var(--faint);text-align:center;}
.mr .us{font-size:1rem;color:var(--ink);font-weight:500;}
.mr small{display:block;margin-top:3px;font-size:.78rem;font-family:"Poppins",sans-serif;
  font-weight:400;color:var(--faint);font-style:italic;line-height:1.45;}
.mr.gap .us{color:var(--faint);font-weight:400;font-style:italic;}
@media(max-width:640px){
  .mr{grid-template-columns:1fr;gap:4px;}
  .mr .arr{text-align:left;}
}

/* passo de calculo — enumeracao de como se chegou a um numero */
.calc-step{display:flex;gap:14px;align-items:flex-start;padding:14px 2px;border-bottom:1px solid var(--line-2);}
.calc-step:first-of-type{border-top:1px solid var(--line);}
.calc-step .cs-n{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);
  color:var(--mid);font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;margin-top:3px;}
.calc-step b{font-size:1rem;font-weight:600;color:var(--ink);}
.calc-step p{margin-top:.35em;font-size:.95rem;line-height:1.6;color:var(--mid);text-align:left;hyphens:none;}
.fixed-note{margin-top:.7em;font-size:.86rem;line-height:1.55;color:var(--faint);font-style:italic;}
.batch-note{margin-top:10px;font-size:.82rem;line-height:1.55;color:var(--faint);font-style:italic;max-width:56ch;}


/* 6 ── LABBLOCK E INFOGRAFIA COMPARATIVA ──────────────────────────────────── */

/* LABBLOCK — a seccao escura onde se mostra um teste.
   O escuro nao e estilo: marca que aquilo foi medido, nao opinado. Se nao houver
   um numero para mostrar, nao e um LabBlock, e um paragrafo.

   <section class="teste">
     <div class="wrap">
       <span class="teste-tag">Teste</span>
       <h2 class="teste-h">O verdadeiro choque aconteceu na cozedura.</h2>
       <p class="teste-lead">...</p>
       <div class="cmp"> ... </div>
       <p class="teste-foot">...</p>
     </div>
   </section>                                                                  */
.teste{background:var(--black);color:var(--on-black);padding:clamp(44px,6.5vw,80px) 0;}

/* .teste.tom — o mesmo bloco, pintado na familia do artigo em vez do preto.
   Existe porque o preto tem significado proprio (foi medido) e nem todo o
   bloco que merece destaque traz numeros: um que junte consequencias nao e um
   LabBlock. Redefine so os tokens do escuro, por isso tudo o que esta dentro
   segue atras, incluindo o que as paginas escrevem. Serve as tres familias. */
.teste.tom{
  --black:var(--acento-ink);
  --black-soft:var(--acento-text);
  --on-black:var(--paper-2);
  --on-black-mid:var(--acento-soft);
  --on-black-line:var(--acento);
}
.teste + .teste{padding-top:0;}
.teste-tag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-black-mid);
  border:1px solid var(--on-black-line);border-radius:20px;padding:5px 13px;}
.teste-h{margin-top:20px;font-size:clamp(1.5rem,3.4vw,2.05rem);font-weight:400;
  line-height:1.16;letter-spacing:-.02em;color:var(--on-black);}
.teste-lead{margin-top:16px;font-size:1.02rem;line-height:1.7;color:var(--on-black-mid);
  text-align:left;hyphens:none;}
.teste p{color:var(--on-black-mid);}
.teste p b,.teste p strong{color:var(--on-black);}
.teste .lbl{color:var(--on-black-mid);}
.teste-foot{display:flex;align-items:flex-start;gap:11px;margin-top:30px;
  padding-top:20px;border-top:1px solid var(--on-black-line);
  font-size:.92rem;line-height:1.6;color:var(--on-black-mid);text-align:left;hyphens:none;}
.teste-foot svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--on-black-mid);}

/* INFOGRAFIA COMPARATIVA — duas ou mais colunas que se comparam pelo mesmo eixo.
   Reutilizavel entre artigos: o que muda e o conteudo, nunca o CSS.

   <div class="cmp">
     <div class="cmp-col">
       <span class="cmp-name">Fresco (peixaria)</span>
       <div class="cmp-gauge" style="--pct:59"><i></i></div>
       <span class="cmp-delta">-59%<small>de agua</small></span>
       <span class="cmp-val">410 g<small>apos cozedura</small></span>
     </div>
     ...
   </div>

   --pct e a fracao que se PERDE (a parte cinzenta do medidor). Um so numero por
   coluna: o medidor, a percentagem e o valor final contam a mesma historia. */
/* ── .vs — comparacao a dois ────────────────────────────────────────────────
   Duas barras por medida, uma por cima da outra, cada medida normalizada ao
   seu proprio maximo. Le-se a diferenca de relance, que e o que uma
   comparacao tem de fazer. Diferente do .cmp: o .cmp e um medidor de quanto
   sobra de um todo (perda de agua); este poe A contra B.
   A barra de cima e a nossa e leva cor; a de baixo e a referencia e fica
   neutra. Pinta-se a forma, nunca a linha toda.                              */
.vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(26px,3vw,48px);margin-top:clamp(26px,3.5vw,40px);}
.vs-i{border-top:1px solid var(--ink);padding-top:16px;}
.vs-n{display:block;font-size:1rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.vs-r{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:10px;margin-top:14px;}
.vs-lbl{grid-column:1/-1;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:5px;}
.vs-bar{position:relative;height:13px;border-radius:3px;background:var(--paper-2);
  border:1px solid var(--line-2);overflow:hidden;}
.vs-bar i{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:2px;
  width:calc(var(--p,0) * 1%);background:var(--acento);
  transition:width .7s var(--ease);}
.vs-r.ref .vs-bar i{background:var(--mid);opacity:.32;}
.vs-v{font-family:"IBM Plex Mono",monospace;font-size:.92rem;font-weight:600;
  color:var(--ink);white-space:nowrap;}
.vs-r.ref .vs-v{font-weight:400;color:var(--mid);}
.vs-d{display:block;margin-top:16px;font-family:"IBM Plex Mono",monospace;
  font-size:1.05rem;font-weight:600;color:var(--acento-ink);}
.vs-d small{display:block;margin-top:3px;font-family:"Poppins",system-ui,sans-serif;
  font-size:.8rem;font-weight:400;color:var(--mid);letter-spacing:0;}

.cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:0;margin-top:34px;}
.cmp-col{padding:0 30px;border-right:1px solid var(--line);}
.cmp-col:first-child{padding-left:0;}
.cmp-col:last-child{border-right:none;padding-right:0;}
.teste .cmp-col{border-right-color:var(--on-black-line);}

.cmp-name{display:block;font-size:1rem;font-weight:600;color:var(--ink);line-height:1.35;min-height:2.7em;}
.teste .cmp-name{color:var(--on-black);}

/* o medidor: uma coluna cheia que perde --pct do topo */
.cmp-gauge{position:relative;width:56px;height:130px;margin-top:6px;border-radius:5px;
  background:var(--line-2);border:1px solid var(--line);overflow:hidden;}
.teste .cmp-gauge{background:var(--black-soft);border-color:var(--on-black-line);}
.cmp-gauge i{position:absolute;left:0;right:0;bottom:0;display:block;
  height:calc((100 - var(--pct,0)) * 1%);background:var(--ink);
  transition:height .6s var(--ease);}
.teste .cmp-gauge i{background:var(--on-black);}
/* a parte que se perdeu fica riscada, para se ler como falta e nao como fundo */
.cmp-gauge::after{content:"";position:absolute;inset:0;bottom:calc((100 - var(--pct,0)) * 1%);
  background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(0,0,0,.07) 5px 6px);}
.teste .cmp-gauge::after{background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.09) 5px 6px);}

.cmp-delta{display:block;margin-top:16px;font-family:"IBM Plex Mono",monospace;
  font-size:1.32rem;font-weight:600;color:var(--ink);line-height:1.2;}
.teste .cmp-delta{color:var(--on-black);}
.cmp-val{display:block;margin-top:14px;font-family:"IBM Plex Mono",monospace;
  font-size:1.05rem;font-weight:600;color:var(--ink);line-height:1.2;}
.teste .cmp-val{color:var(--on-black);}
.cmp-delta small,.cmp-val small{display:block;margin-top:4px;font-family:"Poppins",sans-serif;
  font-size:.8rem;font-weight:400;letter-spacing:0;color:var(--mid);}
.teste .cmp-delta small,.teste .cmp-val small{color:var(--on-black-mid);}

@media(max-width:560px){
  .cmp{grid-template-columns:1fr;gap:26px;}
  .cmp-col{padding:0 0 26px;border-right:none;border-bottom:1px solid var(--line);}
  .cmp-col:last-child{border-bottom:none;padding-bottom:0;}
  .teste .cmp-col{border-bottom-color:var(--on-black-line);}
  .cmp-name{min-height:0;}
  .cmp-gauge{width:100%;height:40px;}
  /* deitado: o medidor esvazia-se da direita */
  .cmp-gauge i{top:0;right:auto;height:auto;width:calc((100 - var(--pct,0)) * 1%);}
  .cmp-gauge::after{bottom:0;left:calc((100 - var(--pct,0)) * 1%);}
}

/* BARRA EMPILHADA — proporcoes dentro de um todo (tres sumos numa poncha) */
.stackbar-wrap{margin-top:28px;}
.stackbar{display:flex;height:44px;border-radius:6px;overflow:hidden;border:1px solid var(--line);}
.stackbar .seg{display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;font-weight:600;color:#fff;
  transition:width .4s var(--ease);}
/* numerados, nao nomeados: a barra serve qualquer artigo, nao so a poncha */
.seg-1{background:var(--d-1);}
.seg-2{background:var(--d-2);}
.seg-3{background:var(--d-3);}
.seg-4{background:var(--d-4);}
.stackbar-legend{display:flex;gap:18px;margin-top:12px;flex-wrap:wrap;}
.stackbar-legend .li{display:flex;align-items:center;gap:7px;font-size:.84rem;color:var(--mid);}
.stackbar-legend .dot{width:9px;height:9px;border-radius:50%;flex:none;}


/* 7 ── FOTOS ──────────────────────────────────────────────────────────────── */
/*
   Os racios sao fixos e estao nos tokens (--ar-*). O contentor reserva o espaco
   antes de a imagem chegar, por isso a pagina nao salta a carregar. Como o
   ficheiro ja vem no racio certo, object-fit:contain nao corta nada — continua
   a nao haver cover, nao se estica nem se amplia nada.

     KV / heroi     4:5   1600x2000   .hero-photo
     Passo          1:1   1200x1200   .step-photo
     Par            4:5   1000x1250   .photo-pair   (as duas iguais)
     Quadrado       1:1   2000x2000   .photo-sq
     Anotada        4:5   1600x2000   .photo-note
     Partilha    1.91:1   1200x630    meta og:image (nao e CSS)

   Se uma foto chegar noutro racio, o contentor mantem a forma e sobra margem.
   Isso e de proposito: e o sinal de que a foto precisa de ser regerada.        */

.hero-photo{padding:clamp(20px,3vw,32px) 0 0;}
.hero-photo figure{display:flex;flex-direction:column;align-items:center;}
.hero-photo img{aspect-ratio:var(--ar-kv);object-fit:contain;width:100%;max-width:440px;border-radius:12px;}

.recipe-photo{margin-top:30px;display:flex;flex-direction:column;align-items:center;}
.recipe-photo img{aspect-ratio:var(--ar-kv);object-fit:contain;width:100%;max-width:400px;border-radius:10px;}

.step-photo{margin-top:20px;}
.step-photo img{aspect-ratio:var(--ar-passo);object-fit:contain;width:100%;max-width:340px;border-radius:10px;}
.step-photo figcaption{text-align:left;}

.photo-pair{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.photo-pair img{aspect-ratio:var(--ar-par);object-fit:contain;width:100%;border-radius:10px;}
@media(max-width:520px){.photo-pair{gap:10px;}}

.photo-sq img{aspect-ratio:var(--ar-quadrado);object-fit:contain;width:100%;border-radius:10px;}

figcaption{margin-top:10px;font-size:.82rem;line-height:1.5;color:var(--faint);
  font-style:italic;text-align:center;}

/* FOTO ANOTADA — legendas a apontar para pontos da foto.
   Desenhado por cima da foto real, nao gerado: fica nitido em qualquer ecra e
   corrige-se sem regerar a imagem.

   <figure class="photo-note">
     <div class="pn-stage">
       <img src="..." alt="...">
       <span class="pn" style="--x:58%;--y:34%">Camada externa mais crocante</span>
       <span class="pn pn-left" style="--x:40%;--y:62%">Interior suculento</span>
     </div>
   </figure>

   --x/--y e o ponto na foto. A legenda sai para a direita, ou para a esquerda
   com .pn-left. No telemovel as legendas passam a lista por baixo: linhas finas
   por cima de uma foto pequena nao se leem.                                    */
.photo-note{margin-top:30px;}
.pn-stage{position:relative;width:100%;max-width:440px;margin-inline:auto;}
.pn-stage img{aspect-ratio:var(--ar-kv);object-fit:contain;width:100%;border-radius:12px;}

.pn{position:absolute;left:var(--x);top:var(--y);
  font-size:.84rem;line-height:1.4;color:var(--ink);
  max-width:14ch;padding-left:var(--pn-len,54px);transform:translateY(-50%);pointer-events:none;}
.pn::before{content:"";position:absolute;left:0;top:50%;width:var(--pn-len,54px);height:1px;
  background:var(--ink);opacity:.55;}
.pn::after{content:"";position:absolute;left:-3px;top:50%;width:6px;height:6px;border-radius:50%;
  background:var(--ink);transform:translateY(-50%);}
.pn-left{padding-left:0;padding-right:var(--pn-len,54px);text-align:right;
  transform:translate(-100%,-50%);}
.pn-left::before{left:auto;right:0;}
.pn-left::after{left:auto;right:-3px;}
.teste .pn{color:var(--on-black);}
.teste .pn::before,.teste .pn::after{background:var(--on-black);}

/* a lista de reserva, escondida no desktop */
.pn-list{display:none;}
@media(max-width:700px){
  .pn{display:none;}
  .pn-list{display:block;margin-top:16px;border-top:1px solid var(--line);}
  .pn-list li{list-style:none;display:flex;gap:11px;align-items:flex-start;
    padding:11px 2px;border-bottom:1px solid var(--line-2);font-size:.9rem;color:var(--ink-2);}
  .pn-list li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
    background:var(--ink);margin-top:.55em;}
}


/* 8 ── LISTA DE COMPRAS ───────────────────────────────────────────────────── */

.shop-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:22px;}
.shop-servings{display:flex;align-items:center;gap:14px;font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);}
.shop-servings .mini-step{display:flex;align-items:center;gap:12px;}
.shop-servings button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  font-size:1.1rem;color:var(--ink);display:flex;align-items:center;justify-content:center;
  transition:border-color .2s var(--ease);}
.shop-servings button:hover{border-color:var(--ink);}
.shop-servings .n{font-size:1.1rem;font-weight:600;min-width:18px;text-align:center;}
.shop-note{margin-top:8px;font-size:.82rem;line-height:1.55;color:var(--faint);font-style:italic;}

.shop-list{margin-top:26px;border-top:1px solid var(--line);}
.shop-cat-label{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);padding:20px 2px 6px;border-bottom:1px solid var(--line-2);}
.shop-item{display:flex;align-items:center;gap:14px;padding:15px 2px;
  border-bottom:1px solid var(--line-2);cursor:pointer;}
.shop-item .box{width:20px;height:20px;flex:none;border:1.5px solid var(--line);border-radius:5px;
  display:flex;align-items:center;justify-content:center;transition:background .18s var(--ease),border-color .18s var(--ease);}
.shop-item .box svg{width:12px;height:12px;opacity:0;transition:opacity .18s var(--ease);}
.shop-item.checked .box{background:var(--ink);border-color:var(--ink);}
.shop-item.checked .box svg{opacity:1;}
.shop-item .name{flex:1;font-size:1.02rem;color:var(--ink);}
.shop-item .amt{font-family:"IBM Plex Mono",monospace;font-size:.9rem;color:var(--mid);white-space:nowrap;}
.shop-item .cat{display:block;font-size:.66rem;letter-spacing:.04em;color:var(--faint);margin-top:2px;}
/* por omissao a lista e "o que falta comprar": riscado = ja tens em casa */
.shop-item:not(.checked) .name,.shop-item:not(.checked) .amt{
  color:var(--faint);text-decoration:line-through;text-decoration-color:var(--line);}

.shop-actions{margin-top:24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.btn-copy{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--paper);
  font-family:"IBM Plex Mono",monospace;font-size:.76rem;letter-spacing:.04em;
  padding:12px 20px;border-radius:24px;transition:opacity .2s var(--ease);}
.btn-copy:hover{opacity:.85;}
.btn-copy svg{width:15px;height:15px;}
.copy-feedback{font-size:.82rem;color:var(--faint);opacity:0;transition:opacity .2s var(--ease);}
.copy-feedback.show{opacity:1;}


/* 9 ── NUTRICAO ───────────────────────────────────────────────────────────── */

/* TABELA — uma só, com as duas referências em colunas lado a lado.
   Antes eram duas caixas separadas, o que obrigava a saltar de uma para a
   outra para comparar o mesmo nutriente. Assim lê-se na horizontal.

   Sem caixa e sem fundos: linhas finas, rótulo à esquerda, números em
   monospace alinhados à direita para as casas decimais baterem certo.        */
.nut-t{width:100%;border-collapse:collapse;margin-top:30px;}
.nut-t th,.nut-t td{padding:13px 0;text-align:right;vertical-align:baseline;}
.nut-t th:first-child,.nut-t td:first-child{text-align:left;width:auto;}
/* as colunas de numeros encolhem ao conteudo e ficam juntas a direita: assim
   compara-se 18 g com 5,8 g de relance, em vez de atravessar a pagina */
.nut-t th + th,.nut-t td + td{width:1%;white-space:nowrap;}
.nut-t thead th{border-bottom:1px solid var(--ink);padding-bottom:10px;
  font-weight:600;font-size:.95rem;color:var(--ink);white-space:nowrap;}
.nut-t thead th small{display:block;margin-top:3px;font-family:"IBM Plex Mono",monospace;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:400;}
.nut-t thead th:first-child{font-family:"IBM Plex Mono",monospace;font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500;}
.nut-t tbody td{border-bottom:1px solid var(--line-2);font-size:1rem;color:var(--ink);}
.nut-t tbody td + td{font-family:"IBM Plex Mono",monospace;font-size:.95rem;
  white-space:nowrap;padding-left:clamp(20px,4vw,56px);}
.nut-t tbody tr:last-child td{border-bottom:1px solid var(--line);}

/* a energia é a linha que se lê primeiro */
.nut-t tr.destaque td{font-weight:600;font-size:1.06rem;padding-top:16px;padding-bottom:16px;}
.nut-t tr.destaque td + td{font-size:1.1rem;font-weight:600;}
/* "dos quais" pende da linha de cima */
.nut-t tr.sub td{padding-top:2px;padding-bottom:12px;border-bottom-color:var(--line-2);}
.nut-t tr.sub td:first-child{padding-left:18px;font-size:.9rem;color:var(--mid);}
.nut-t tr.sub td + td{color:var(--mid);font-size:.88rem;}
/* o álcool não é um nutriente como os outros */
.nut-t tr.alcool td{border-top:1px solid var(--line);font-weight:600;}
.nut-t tr.alcool td + td{color:var(--acento-ink);font-weight:600;}

/* No estreito o nowrap que junta as colunas no desktop passa a cortar os
   valores longos ("1150 kJ / 275 kcal"). Aqui deixam-se partir em duas linhas,
   e as colunas voltam a repartir a largura em vez de encolherem ao conteudo. */
@media(max-width:700px){
  .nut-t thead th + th,.nut-t tbody td + td{width:30%;white-space:normal;}
  .nut-t thead th{font-size:.8rem;}
  .nut-t thead th small{font-size:.56rem;letter-spacing:.06em;}
  .nut-t tbody td{font-size:.92rem;}
  .nut-t tbody td + td{padding-left:12px;font-size:.84rem;}
  .nut-t tr.destaque td{font-size:.96rem;}
  .nut-t tr.destaque td + td{font-size:.88rem;}
  .nut-t tr.sub td:first-child{padding-left:12px;font-size:.84rem;}
}

/* DISCOS — a leitura rapida por cima da tabela.
   <div class="rings">
     <div class="ring" style="--pct:41;--c:var(--d-1)">
       <svg viewBox="0 0 42 42"><circle class="ring-bg" cx="21" cy="21" r="18"/>
         <circle class="ring-fg" cx="21" cy="21" r="18"/></svg>
       <b>41%</b><small>Proteina</small>
     </div>
   </div>
   O perimetro e 113 (2*pi*18): o dash e calculado a partir de --pct.           */
/* os discos precisam de dizer o que a percentagem e: sem isto le-se "47%" e
   ninguem sabe 47% de que. E a fatia da energia, nunca o peso. */
/* titulo dos paineis que nao sao a receita (compras, nutricao). Cresce com a
   pagina em vez de congelar num tamanho, como o h1 do heroi. */
.panel-h1{margin-top:14px;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:400;
  letter-spacing:-.015em;color:var(--ink);}
/* Mesma letra e tamanho do "Declaracao nutricional" da tabela: sao os dois
   rotulos das duas colunas, e a um rotulo responde outro rotulo igual. */
.nut-h{margin-top:clamp(30px,4vw,44px);font-family:"IBM Plex Mono",monospace;
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--faint);}
.nut-sub{margin-top:16px;font-size:.95rem;line-height:1.6;color:var(--mid);
  text-align:left;hyphens:none;}
/* Os discos sozinhos numa fila deixavam quase mil pixeis vazios a direita.
   Postos ao lado da tabela sem mais nada, passavam a deixar um L de vazio por
   baixo deles. A coluna da esquerda so funciona se for um bloco inteiro: leva
   o titulo, a explicacao e os discos, e ai tem altura para acompanhar a
   tabela. Um filete separa as duas colunas, para se perceber que sao duas.
   As duas colunas so entram a 1100px, quando o .wrap alarga. Antes
   entravam a 1000px, com o .wrap ainda a 700px: a tabela nao encolhe abaixo
   dos numeros e saia ~100px pela direita da pagina.                         */
.nut-grid{display:grid;gap:clamp(24px,3vw,40px);}
.nut-side > .nut-h{margin-top:0;}
@media (min-width:1100px){
  .nut-grid{grid-template-columns:minmax(300px,360px) 1fr;
    gap:clamp(40px,4.5vw,72px);align-items:stretch;}
  .nut-side{border-right:1px solid var(--line);padding-right:clamp(32px,3.5vw,56px);}
  .nut-grid .rings{margin-top:clamp(26px,3vw,38px);gap:26px 20px;}
  .nut-grid .nut-t{margin-top:0;}
}
.rings{display:flex;flex-wrap:wrap;gap:clamp(20px,3.5vw,44px);margin-top:28px;}
.ring{text-align:center;width:104px;}
.ring svg{width:104px;height:104px;transform:rotate(-90deg);display:block;}
.ring .ring-bg{fill:none;stroke:var(--line);stroke-width:3;}
.ring .ring-fg{fill:none;stroke:var(--c,var(--ink));stroke-width:3;stroke-linecap:round;
  stroke-dasharray:113;stroke-dashoffset:calc(113 - (113 * var(--pct,0) / 100));
  transition:stroke-dashoffset .7s var(--ease);}
.ring b{display:block;margin-top:-64px;margin-bottom:38px;font-family:"IBM Plex Mono",monospace;
  font-size:1.18rem;font-weight:600;color:var(--ink);}
.ring small{display:block;margin-top:10px;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}
.teste .ring .ring-bg{stroke:var(--on-black-line);}
.teste .ring b{color:var(--on-black);}
.teste .ring small{color:var(--on-black-mid);}


/* 10 ── DESKTOP HORIZONTAL (>=1100px) ─────────────────────────────────────── */
/*
   Substitui o antigo ft-wide.css: as receitas passam a carregar so este
   ficheiro. Regra: nada fica encostado a esquerda com meia pagina vazia ao
   lado. Abaixo de 1100px nao se toca em nada.

   Nota sobre as fotos: aqui ja nao ha width/height:auto. Com os racios fixos da
   seccao 7 nao e preciso — o contentor tem a forma certa e o ficheiro tambem,
   por isso continua a nao se cortar nem esticar nada.                          */

@media (min-width:1100px){
  .wrap      {width:min(100% - 96px, 1280px);}
  .wrap-wide {width:min(100% - 96px, 1440px);}

  /* nada de limites em ch a deixar branco ao lado */
  .hero .sub,.prose p,.lead,.shop-note,.nut-disclaimer,.note,.gen-note p,
  .batch-note,figcaption{max-width:none;}
  /* O .teste-h tinha max-width:20ch, que e o que a regra do branco ao lado
     proibe: 412px de titulo e 868px de vazio a direita. Nunca se tinha visto
     porque o bloco escuro nunca chegara a ser usado numa pagina. */

  /* heroi: titulo e sub a toda a largura, controlos lado a lado */
  .hero .wrap{display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(40px,4vw,72px);align-items:start;grid-auto-flow:row dense;}
  .hero .wrap > *           {grid-column:1 / -1;}
  .hero .wrap > .meta       {grid-column:1 / -1;}
  /* uma etiqueta e do tamanho do texto dela. Filha direta da grelha do
     heroi, era esticada as duas colunas e lia-se como uma caixa vazia. */
  .hero .wrap > .badge      {justify-self:start;}
  .hero .wrap > .servings   {grid-column:1;max-width:none;margin-top:34px;}
  .hero .wrap > .note       {grid-column:1;}
  .hero .wrap > .mode-block {grid-column:2;margin-top:34px;}
  .hero .wrap > .actions    {grid-column:1;}
  /* Nada de max-width em ch aqui: era isso que deixava o titulo encostado a
     esquerda com meia pagina em branco ao lado. O titulo ocupa a largura. */
  .hero h1  {margin-top:18px;}
  .hero .sub{margin-top:24px;}

  /* o split ocupa mesmo a pagina */
  .split{grid-template-columns:1.15fr 1fr;gap:clamp(44px,4.5vw,80px);}

  /* fotos maiores, sempre no racio fixado */
  .hero-photo img,.recipe-photo img{max-width:min(100%,560px);}
  .step-photo img {max-width:min(100%,420px);}
  .pn-stage       {max-width:560px;}
  /* o par nao pode passar a frente da foto principal: a toda a largura cada
     metade ficava maior do que o KV e a hierarquia invertia-se */
  .photo-pair{gap:28px;align-items:start;max-width:940px;margin-inline:auto;}

  /* foto ao lado do texto a que pertence.
     No telemovel .ft-pair e um div comum: esta regra vive toda dentro da media
     query e as seccoes empilham-se como sempre. */
  .ft-pair{display:grid;grid-template-columns:minmax(280px,34%) 1fr;
    gap:clamp(40px,4vw,76px);align-items:start;
    width:min(100% - 96px,1280px);margin-inline:auto;}
  .ft-pair > section{padding-top:0;padding-bottom:0;}
  .ft-pair .wrap    {width:100%;}
  .ft-pair .hero-photo img{max-width:100%;}

  /* os ramos poem-se lado a lado: sao casos a comparar, e empilhados
     deixavam a largura do desktop por usar. */
  .ramos{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}

  /* blocos de dados tambem crescem */
  .nut-t,.shop-list,.stackbar-wrap{max-width:none;}
  .cmp{gap:0;}
  .rings{gap:clamp(30px,4vw,56px);}
}

@media (min-width:1700px){
  .wrap      {width:min(100% - 120px, 1420px);}
  .wrap-wide {width:min(100% - 120px, 1600px);}
  .hero-photo img,.recipe-photo img{max-width:min(100%,640px);}
  .pn-stage{max-width:640px;}
}


/* ── PAGINA DE CLIENTE ──────────────────────────────────────────────────────
   Pecas usadas nas paginas feitas PARA um cliente. A cor da marca dele entra
   so aqui; o resto da pagina continua a preto e branco como todas as outras.  */

/* assinatura no topo: quem fez, para quem */
.cliente{display:flex;align-items:center;gap:12px;margin-bottom:22px;
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);}
.cliente b{color:var(--acento-ink);font-weight:600;letter-spacing:.14em;}
.cliente i{width:26px;height:1px;background:var(--acento);font-style:normal;flex:none;}

/* o objetivo: uma caixa so, a que a pessoa volta */
.objetivo{margin-top:clamp(26px,3.5vw,38px);padding:clamp(24px,3vw,32px);
  background:var(--acento-wash);border:1px solid var(--acento-line);
  border-left:3px solid var(--acento);border-radius:10px;}
.objetivo .lbl{display:block;font-family:"IBM Plex Mono",monospace;font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acento-ink);}
.objetivo p{margin-top:12px;font-size:1.05rem;line-height:1.65;color:var(--ink-2);
  text-align:left;hyphens:none;}
.objetivo p + p{margin-top:.75em;}

/* o programa: blocos numerados, com o numero na cor do cliente */
.prog{display:grid;gap:14px;margin-top:clamp(24px,3vw,34px);}
.prog-i{display:flex;gap:18px;align-items:flex-start;padding:20px 22px;
  border:1px solid var(--line);border-radius:10px;background:var(--paper-2);}
.prog-i .ln{flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--acento);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:"IBM Plex Mono",monospace;font-size:.8rem;
  font-weight:600;}
.prog-i.verde .ln{background:var(--acento-2);}
.prog-i b{display:block;font-size:1.05rem;font-weight:600;color:var(--ink);}
.prog-i small{display:block;margin-top:5px;font-size:.92rem;line-height:1.55;color:var(--mid);}

/* a base audiovisual: cartoes de video, em grelha */
.av{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(18px,2.4vw,28px);margin-top:clamp(24px,3vw,34px);}
.av-i{border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--paper-2);}
.av-i .quadro{position:relative;aspect-ratio:16/9;background:var(--paper-2);
  border-bottom:1px solid var(--line);}
.av-i .quadro iframe,.av-i .quadro video{position:absolute;inset:0;width:100%;height:100%;border:0;}
.av-i .quadro .vazio{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--faint);font-family:"IBM Plex Mono",monospace;
  font-size:.7rem;letter-spacing:.08em;border:1px dashed var(--line);margin:10px;
  border-radius:6px;text-align:center;padding:10px;}
.av-i .txt{padding:16px 18px 18px;}
.av-i .k{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acento-ink);}
.av-i h3{margin-top:7px;font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.3;}
.av-i p{margin-top:7px;font-size:.9rem;line-height:1.5;color:var(--mid);
  text-align:left;hyphens:none;}

/* 11 ── ESTADOS DE RASCUNHO ───────────────────────────────────────────────── */
/*
   Visiveis de proposito: um artigo por acabar tem de se ver que esta por
   acabar. Saem todos quando o conteudo entra.                                  */

.draft{background:var(--acento-soft);border:1px solid var(--acento-line);
  border-left:3px solid var(--acento);border-radius:8px;padding:16px 20px;margin-bottom:30px;}
.draft .dh{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acento-ink);}
.draft p{margin-top:.5em;font-size:.94rem;color:var(--ink-2);text-align:left;hyphens:none;}

p.slot,.slot{color:var(--faint);font-style:italic;border:1px dashed var(--line);
  border-radius:6px;padding:14px 16px;text-align:left;hyphens:none;font-size:.95rem;}
.intro-box p.slot{border-color:var(--acento-line);}
.slot-photo{border:1px dashed var(--line);border-radius:10px;padding:46px 18px;text-align:center;
  color:var(--faint);font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.06em;}
.slot-photo.small{margin-top:18px;padding:34px 14px;}
.slot-photo.strip{padding:70px 18px;}
.slot-graph{opacity:.45;}
.slot-list{opacity:.6;}

/* caixote de foto em falta, ja no racio certo */
.photo-slot{margin-top:24px;border:1px dashed var(--line);border-radius:6px;padding:18px;
  display:flex;align-items:center;gap:12px;color:var(--faint);font-size:.82rem;}
.photo-slot .icon{font-family:"IBM Plex Mono",monospace;font-size:.9rem;}
.photo-slot.kv   {aspect-ratio:var(--ar-kv);justify-content:center;max-width:440px;}
.photo-slot.passo{aspect-ratio:var(--ar-passo);justify-content:center;max-width:340px;}

.placeholder-note{margin-top:40px;border:1px dashed var(--line);border-radius:6px;padding:24px;
  color:var(--faint);font-size:.82rem;text-align:center;}