/* =========================================================================
   NUTRIÇÃO · só o que esta página tem de próprio. Carrega depois do base.css
   Nada nasce escondido. Zero quadro-chave. Movimento só responde ao ponteiro.
   ========================================================================= */

/* ------------------------------ hero da página -------------------------- */
.n-hero{ padding-block:clamp(2.25rem,5vw,4.5rem) clamp(1.5rem,3vw,2.5rem) }
.n-hero-grade{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4); align-items:end }
@media (min-width:960px){
  .n-hero-grade{ grid-template-columns:minmax(0,8fr) minmax(0,3fr);
                 column-gap:clamp(2rem,4vw,4rem); align-items:end }
}
.n-h1{ font-size:var(--t6); line-height:.94; letter-spacing:-.018em; max-inline-size:15ch;
       font-stretch:88% }
.n-h1 em{ font-style:normal; font-stretch:70%; letter-spacing:-.004em }
.n-sub{ max-inline-size:44ch; margin-block-start:var(--s4) }
.n-cta{ margin-block-start:var(--s4); display:flex; gap:var(--s2); flex-wrap:wrap }

/* a foto sai do wrap pela direita: a caixa quebra no primeiro bloco da página */
.n-hero-foto{ position:relative; justify-self:end; max-inline-size:340px; inline-size:100% }
.n-hero-foto img{ inline-size:100%; height:auto;
  clip-path:polygon(0 0,100% 4%,100% 100%,0 92%) }
@media (min-width:1000px){
  .n-hero-foto{ max-inline-size:340px;
    margin-inline-end:0 }
}
@media (max-width:959.98px){ .n-hero-foto{ justify-self:start; max-inline-size:280px } }

/* ------------------------------ sumário da página ----------------------- */
.n-sumario{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
            gap:var(--s2) var(--s3); margin-block-start:clamp(2rem,4vw,3rem) }
.n-sumario a{ display:flex; align-items:center; min-block-size:56px; text-decoration:none;
              color:var(--tinta); font-family:var(--sans); font-size:var(--t1); font-weight:600;
              letter-spacing:.14em; text-transform:uppercase; line-height:1.25;
              transition:color var(--d-curto) var(--e-saida) }
.n-sumario a:hover{ color:var(--verde) }

/* ------------------------------ blocos de leitura ----------------------- */
.n-ancora{ scroll-margin-block-start:104px }
.n-nota a{ display:inline-flex; align-items:center; min-block-size:44px; padding-inline:2px }
.n-nota{ font-family:var(--mono); font-size:var(--t1); line-height:1.55; color:var(--tinta-2);
         border-block-start:1px solid var(--fio); padding-block-start:var(--s2);
         margin-block-start:var(--s3); max-inline-size:56ch }
.n-marcas{ list-style:none; padding:0; display:grid; gap:var(--s3); margin-block-start:var(--s3) }
.n-marcas li{ font-size:var(--t2); line-height:1.5 }
.n-marcas b{ display:block; font-family:var(--sans); font-size:var(--t1); font-weight:600;
             letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2);
             margin-block-end:.35em }
.n-linhas{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.03em; color:var(--tinta) }
.n-fam .dentro > p + p{ margin-block-start:var(--s3) }
.n-fam .rot{ font-family:var(--sans); font-size:var(--t1); font-weight:600; letter-spacing:.16em;
             text-transform:uppercase; color:var(--tinta-2); display:block; margin-block-end:.3em }

/* ------------------------------ o cocho em corte ------------------------ */
/* segunda quebra de caixa: a prancha sai do wrap pela direita e desce sobre
   a seção seguinte, que ganha respiro no topo por .n-depois                */
.n-cocho-cx{ margin-block-start:clamp(1.5rem,3vw,2.5rem); position:relative; z-index:2;
             inline-size:min(920px, calc(100% + max(0px,(100vw - var(--wrap)) / 2) + var(--pad)));
             margin-block-end:clamp(-4.5rem,-6vw,-2.5rem) }
.cocho{ inline-size:100%; height:auto; overflow:visible }
/* abaixo de 700 o rotulo de 11px encolheria demais: a prancha guarda o tamanho
   e a caixa rola na horizontal. Melhor rolar do que ficar ilegivel.           */
@media (max-width:699.98px){
  .n-cocho-cx{ overflow-x:auto; -webkit-overflow-scrolling:touch;
             margin-inline-end:calc(var(--pad) * -1); padding-inline-end:var(--pad) }
  .cocho{ inline-size:700px; max-inline-size:none; flex:0 0 auto }
}
.cocho g path,.cocho g ellipse,.cocho g circle{ fill:none; stroke:var(--tinta) }
.cocho .chao path{ stroke:var(--fio); stroke-width:1.4; stroke-linecap:round }
.cocho .sombra path{ stroke:var(--fio); stroke-width:.8; opacity:.6 }
.cocho .corpo path{ stroke-width:2.4; stroke-linejoin:round }
.cocho .dreno path,.cocho .dreno circle{ stroke-width:1.4 }
.cocho .nivel path{ stroke:var(--fio); stroke-width:1.4 }
.cocho .graos ellipse{ stroke-width:1.4 }
.cocho .po path{ stroke:var(--fio); stroke-width:.8; stroke-linecap:round; opacity:.7 }
.cocho .chamada path{ stroke:var(--fio); stroke-width:.8 }
/* o rótulo abre o próprio canal no que estiver atrás dele: "furo de dreno"
   caía em cima da hachura do chão e ficava ilegível. Convenção de desenho
   técnico, e sobre fundo limpo o halo é invisível.                        */
.cocho .rot text{ fill:var(--tinta-2); font-family:var(--mono); font-size:12px;
                  letter-spacing:.14em;
                  paint-order:stroke fill; stroke:var(--osso); stroke-width:4px;
                  stroke-linejoin:round }
/* a matéria responde ao ponteiro: o grão assenta, a página não se mexe */
.cocho .graos,.cocho .nivel{ transform-box:view-box; transform-origin:380px 200px }
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .cocho .graos,.cocho .nivel{ transition:transform var(--d-medio) var(--e-firme) }
  .n-cocho-cx:hover .graos,.n-cocho-cx:focus-within .graos{ transform:translate(0,3px) }
  .n-cocho-cx:hover .nivel,.n-cocho-cx:focus-within .nivel{ transform:translate(0,4px) }
}
@media (max-width:759.98px){
  .n-cocho-cx{ inline-size:calc(100% + var(--pad)); margin-block-end:var(--s5) }
}
.n-depois{ position:relative; z-index:1; padding-block-start:clamp(5rem,9vw,8rem) }

/* ------------------------------ a calculadora --------------------------- */
.n-formula{ font-family:var(--mono); font-size:var(--t2); line-height:1.9; color:var(--tinta);
            background:var(--osso); border:1px solid var(--fio); padding:var(--s3);
            margin-block-start:var(--s3); overflow-x:auto }
.n-formula b{ font-weight:600 }
.n-vc{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4);
       margin-block-start:var(--s5) }
@media (min-width:820px){ .n-vc{ grid-template-columns:minmax(0,7fr) minmax(0,5fr);
                                 column-gap:clamp(2rem,4vw,3.5rem) } }
.n-entradas{ display:grid; gap:var(--s3) }
.n-linha{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
          gap:var(--s3); border-block-end:1px solid var(--fio); padding-block-end:var(--s2) }
.n-linha label{ font-family:var(--sans); font-size:var(--t1); font-weight:600; letter-spacing:.1em;
                text-transform:uppercase; color:var(--tinta-2); line-height:1.35 }
.n-saidas{ border-inline-start:1px solid var(--fio); padding-inline-start:var(--s4) }
@media (max-width:819.98px){ .n-saidas{ border-inline-start:0; padding-inline-start:0;
  border-block-start:1px solid var(--fio); padding-block-start:var(--s4) } }
.n-saida-rot{ font-family:var(--sans); font-size:var(--t1); font-weight:600; letter-spacing:.16em;
              text-transform:uppercase; color:var(--tinta-2) }
.n-saida-2{ margin-block-start:var(--s4) }
#vc-kg{ font-size:var(--t3) }

/* ------------------------------ fecho ----------------------------------- */
.n-fecho{ padding-block:clamp(3rem,6vw,5rem) }
.n-fecho .acoes{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-block-start:var(--s4) }

@media print{
  .n-hero-foto,.n-cocho-cx,.n-sumario{ display:none !important }
  .n-vc{ grid-template-columns:1fr }
}