/* =========================================================================
   MARANATA AGROPECUÁRIA · /saude.html · a página sem ornamento
   Aqui não entra desenho, metal, cunha nem foto grande: papel, tinta, fio
   e tabela. A ausência é o argumento, e ela é a mesma do sistema.
   Carrega DEPOIS do base.css. Nada aqui redefine token do sistema.
   ========================================================================= */

/* ---- hero de página: só tipo e fio. O fio de baixo é a linha que o
        aviso atravessa (primeira quebra de caixa: sobreposição) ---------- */
.pag{ padding-block:clamp(2.25rem,5vw,4.25rem) clamp(3.5rem,7vw,6.5rem);
      border-block-end:1px solid var(--fio); position:relative }
.pag h1{ font-size:var(--t6); line-height:.92; max-inline-size:14ch }
.pag .duo{ margin-block-start:clamp(1.75rem,3.5vw,3rem) }
.pag .lede{ max-inline-size:30ch }

/* ---- o aviso legal sobe e cruza o fio do hero ------------------------- */
.aviso-topo{ padding-block:0 clamp(3rem,6vw,6rem); position:relative; z-index:2 }
.aviso-cx{ margin-block-start:clamp(-6rem,-7vw,-3.25rem); max-inline-size:64ch;
           padding:var(--s5) var(--s5) var(--s4) }
.aviso-cx h2{ font-size:var(--t3); margin-block:var(--s1) var(--s3) }
.aviso-cx .corpo{ max-inline-size:56ch }
.aviso-cx .corpo + .corpo{ margin-block-start:var(--s3) }
.norma{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s1) var(--s4);
        margin-block-start:var(--s4); border-block-start:1px solid var(--fio);
        padding-block-start:var(--s3); font-family:var(--mono); font-size:var(--t1);
        line-height:1.5 }
.norma dt{ color:var(--tinta-2); letter-spacing:.06em }
.norma dd{ margin:0; color:var(--tinta); letter-spacing:.02em }

/* ---- o fio como separador de assunto: matéria da casa ----------------- */
.fio{ border:0; border-block-start:1px solid var(--fio); margin-block:0 }

/* ---- tabelas: a única figura desta página ----------------------------- */
/* segunda quebra de caixa: a tabela de espécies sangra para fora do wrap  */
.sangra{ margin-inline-end:0 }
/* abaixo de 390px a sangria empurra a rolagem para fora do body: recolhe */
@media (max-width:389.98px){ .sangra{ margin-inline-end:0; padding-inline-end:0 } }
.rolagem{ padding-block-end:var(--s1) }
/* a tabela de espécies mede 928px e o contêiner rola em toda a faixa abaixo de
   1000px (a 390 são 60% fora da tela). Sem aviso, o leitor via "COSTUMA EXIG"
   e "depende do pr" cortados e lia defeito. O esmaecimento da borda direita é
   o único sinal de que há mais coisa para o lado, e ele acompanha a rolagem.  */
@media screen and (max-width:999.98px){
  .rolagem.sangra{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  }
}
.tabela tbody th{ font-family:var(--serif); font-weight:400; font-size:var(--t2);
                  letter-spacing:0; text-transform:none; color:var(--tinta);
                  padding-inline-end:var(--s4); line-height:1.2 }
.tabela td{ color:var(--tinta) }
.tabela .q{ color:var(--tinta-2) }
.tabela .m{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.04em;
            color:var(--tinta-2); white-space:nowrap }
.tabela tfoot td{ border-block-end:0; padding-block-start:var(--s3);
                  font-family:var(--mono); font-size:var(--t1); color:var(--tinta-2);
                  line-height:1.5 }
.t-esp{ min-inline-size:58rem }
.t-esp .c-esp{ inline-size:15% } .t-esp .c-cat{ inline-size:15% }
.t-esp .c-prz{ inline-size:23% } .t-esp .c-per{ inline-size:30% }
.t-esp .c-ond{ inline-size:17% }
.t-fab{ max-inline-size:46rem; min-inline-size:22rem }
.t-fab .c-nom{ inline-size:56% }
.t-lim{ max-inline-size:60rem; min-inline-size:30rem }
.t-lim .c-casa{ inline-size:46% }
.t-res{ max-inline-size:32rem; min-inline-size:20rem; margin-block-start:var(--s3) }
.t-res .c-cls{ inline-size:66% }
.t-res td.n{ color:var(--tinta) }

/* ---- vocabulário de balcão: pilha de fios ------------------------------ */
.grupo{ margin-block-start:var(--s5); border-block-start:1px solid var(--fio) }
.grupo details:first-of-type > summary{ padding-block-start:var(--s4) }
.dentro > .corpo + .corpo{ margin-block-start:var(--s3) }
.dentro .fecha{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.04em;
                color:var(--tinta-2); margin-block-start:var(--s3) }

/* ---- lista de conferência: fio fechado, face aberta (M2) --------------- */
.confere{ list-style:none; padding:0; display:grid; gap:var(--s2);
          margin-block-start:var(--s3) }
.confere li{ font-size:var(--t2); max-inline-size:46ch; padding-block:2px }

/* ---- responsável técnico: ficha discreta, nunca monumento -------------- */
.rt-cx{ padding:var(--s4) }
.rt-cx .norma{ margin-block-start:0; border-block-start:0; padding-block-start:0 }

/* ---- fecho ------------------------------------------------------------- */
.acoes{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-block-start:var(--s5) }
/* terceira quebra de caixa: a foto sai do retângulo pelo chanfro de 22 graus */
.foto-loja{ max-inline-size:240px }
.foto-loja img{ inline-size:100% }

@media (max-width:939.98px){
  .aviso-cx{ margin-block-start:clamp(-4rem,-9vw,-2.5rem); padding:var(--s4) }
  .pag h1{ max-inline-size:none }
}

/* ---- impressão: a página é uma folha de balcão ------------------------- */
@media print{
  .rolagem{ overflow:visible }
  .sangra{ margin-inline-end:0; padding-inline-end:0 }
  .t-esp,.t-fab,.t-lim,.t-res{ min-inline-size:0; max-inline-size:none }
  .aviso-cx{ margin-block-start:0; border:1px solid #000 }
  details > summary{ border-inline-start:0; padding-inline-start:0 }
  .dentro{ padding-inline-start:0 }
  .foto-loja{ display:none }
}