/* =========================================================================
   MARANATA AGROPECUÁRIA · /selaria.html
   Só o que esta página tem de próprio. Carrega DEPOIS de base.css.
   Regra da casa mantida: nada nasce escondido, zero @keyframes,
   movimento só responde a ponteiro ou foco.
   ========================================================================= */

/* ------------------------------ hero da página -------------------------- */
.cabeca{ padding-block:clamp(2.5rem,6vw,5rem) clamp(1.5rem,3vw,2.5rem); position:relative }
.cabeca-grade{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s5); align-items:end }
@media (min-width:940px){
  .cabeca-grade{ grid-template-columns:minmax(0,7fr) minmax(0,4fr);
                 column-gap:clamp(2rem,5vw,5.5rem); align-items:start }
}
.h-pagina{ font-size:var(--t6); line-height:.88; text-transform:none; max-inline-size:11ch }
/* a foto do hero sai do wrap pela direita: primeira quebra de caixa */
.retrato{ justify-self:end; max-inline-size:290px; inline-size:100% }
@media (min-width:1000px){
  .retrato{ margin-inline-end:0 }
}
@media (max-width:939.98px){ .retrato{ justify-self:start; max-inline-size:250px } }

/* ------------------------------ a bota em corte ------------------------- */
.corte-grade{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s5) }
@media (min-width:1000px){
  .corte-grade{ grid-template-columns:minmax(0,520px) minmax(0,1fr);
                column-gap:clamp(2rem,4vw,4.5rem); align-items:start }
}
.bota-cx{ position:relative; inline-size:100% }
.bota{ inline-size:100%; height:auto }
/* segunda quebra de caixa: a prancha encosta na borda da janela pela esquerda */
@media (min-width:1000px){
  .bota-cx{ inline-size:520px;
            margin-inline-start:calc(-1 * (max(0px,(100vw - var(--wrap)) / 2) + var(--pad))) }
}
/* abaixo de 620 o rótulo em 11px encolheria demais: a prancha mantém o tamanho
   real e o contêiner rola, em vez de espremer o desenho                      */
@media (max-width:619.98px){
  /* A bota e quase vertical: ela CABE inteira no celular. O que nao pode encolher
     junto e o rotulo, entao ele cresce em unidade de viewBox para compensar a
     escala. Nada de rolagem: o desenho inteiro na tela vale mais.              */
  .bota-cx{ overflow:visible; margin-inline-end:0; padding-inline-end:0 }
  .bota{ inline-size:100%; max-inline-size:520px; height:auto }
  .bota .rot{ font-size:17px; letter-spacing:.1em }
  .bota .chamada .cham{ stroke-width:1.1 }
}

/* traço: três pesos e só três. 2,4 no contorno · 1,4 no resto · 0,8 na
   hachura e nas linhas de chamada. fill:none em tudo.                       */
.bota g path,.bota g circle{ fill:none; stroke:var(--tinta) }
.bota .ext path{ stroke-width:2.4; stroke-linejoin:round }
.bota .boca path,
.bota .corte .jan,.bota .corte .cam,
.bota .reforco path,.bota .sola path,
.bota .dec path,.bota .dec circle{ stroke-width:1.4; stroke-linejoin:round }
.bota .costura path{ stroke-width:1.4; stroke-linecap:round }
.bota .corte .hach,.bota .corte .hach2{ stroke-width:.8; clip-path:url(#bota-janela) }
.bota .chamada .cham{ stroke-width:.8 }
.bota .rot{ fill:var(--tinta-2); stroke:none;
            font-family:var(--mono); font-size:11px; letter-spacing:.18em }
/* o único movimento da página: a costura responde ao ponteiro e ao foco */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .bota .costura{ opacity:.5; transition:opacity var(--d-medio) var(--e-saida) }
  .bota-cx:hover .costura,.corte-grade:focus-within .costura{ opacity:1 }
}
.bota-legenda{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.1em;
               color:var(--tinta-2); margin-block-start:var(--s3); max-inline-size:46ch }

/* ------------------------- sobreposição entre seções -------------------- */
/* terceira quebra de caixa: a placa da numeração desce sobre a seção seguinte */
.placa{ background:var(--linho); border:1px solid var(--fio); padding:var(--s4);
        margin-block-end:-72px; position:relative; z-index:2; max-inline-size:34rem }
.depois-da-placa{ padding-block-start:clamp(6rem,10vw,8rem); position:relative; z-index:1 }
@media (max-width:759.98px){ .placa{ margin-block-end:-48px } }

/* ------------------------------- listas --------------------------------- */
.peca{ list-style:none; padding:0; display:grid; gap:var(--s4) }
.peca > li{ max-inline-size:58ch }
.peca b{ font-family:var(--sans); font-weight:600 }
.modelos{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:var(--s1) var(--s2);
          margin-block-start:var(--s3) }
.modelos li{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.1em;
             color:var(--tinta); border:1px solid var(--fio); padding:8px 12px;
             background:var(--linho) }
.grupo{ display:grid; gap:var(--s3); margin-block-start:var(--s4) }

/* --------------------------- o selo do logo ----------------------------- */
.provas{ display:grid; gap:var(--s4); justify-items:start; margin-block-start:var(--s5) }
.provas .selo{ padding:var(--s3) var(--s4) }
.provas .selo img{ inline-size:min(300px,66vw); height:auto }
.provas figcaption{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.08em;
                    color:var(--tinta-2); max-inline-size:52ch; line-height:1.55 }

/* a definição da tabela ganha medida própria, sem sair da célula */
.tabela td .def{ display:block; max-inline-size:46ch }
.peca > li > span{ display:block; margin-block-start:.25em; color:var(--tinta-2) }