/* =========================================================================
   MARANATA AGROPECUÁRIA · sistema de design
   Conceito F · O FARDO ABERTO · verbo: abrir e conferir
   Regra: nada nasce escondido. Zero @keyframes. Movimento só responde.
   ========================================================================= */

/* ---------- fontes auto-hospedadas · métricas medidas com fontTools ------ */
@font-face{
  font-family:"NSD";
  src:url(../f/nsd.woff2) format("woff2-variations"), url(../f/nsd.woff2) format("woff2");
  font-weight:400 700; font-stretch:62.5% 100%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"NSans";
  src:url(../f/nsans.woff2) format("woff2-variations"), url(../f/nsans.woff2) format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"NMono";
  src:url(../f/nmono.woff2) format("woff2-variations"), url(../f/nmono.woff2) format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}
/* medido: upem 1000 · asc 1069 · desc 293 · avg 532 (NSD) 488 (NSans) 602 (NMono)
   contra Georgia avg 440 · Arial avg 441 · Menlo avg 602                       */
@font-face{ font-family:"NSD fb"; src:local("Georgia"),local("Times New Roman");
  size-adjust:120.93%; ascent-override:88.40%; descent-override:24.23%; line-gap-override:0% }
@font-face{ font-family:"NSans fb"; src:local("Arial"),local("Helvetica Neue");
  size-adjust:110.56%; ascent-override:96.69%; descent-override:26.50%; line-gap-override:0% }
@font-face{ font-family:"NMono fb"; src:local("Menlo"),local("Courier New");
  size-adjust:99.99%; ascent-override:106.91%; descent-override:29.30%; line-gap-override:0% }

/* ---------------------------------- tokens ------------------------------ */
:root{
  /* chão claro · dominante */
  --osso:#ECEEE2;      /* H 70,0  S 26,1%  L 91,0% */
  --linho:#E1E3D1;     /* campo: fichas, tabelas, input */
  /* tinta */
  --tinta:#16261E;     /* 13,45:1 sobre osso */
  --tinta-2:#41503F;   /* 7,32:1 sobre osso */
  /* o gesto escuro */
  --breu:#0E1D16;
  /* acento funcional · verde-mata REAL da marca */
  --verde:#1F4C35;     /* 8,35:1 sobre osso */
  /* fio · um sobre claro, um dentro do escuro. Não existe terceiro */
  --fio:#697560;       /* 4,15:1 sobre osso · 3,73:1 sobre linho */
  --fio-luz:#8C9A85;   /* 5,87:1 sobre breu */
  /* metal · rampa REAL medida no logo dourado */
  --g-alta:#FAE1A9; --g-luz:#EFC98F; --g-corpo:#D1A972; --g-meio:#8E6F45;
  --g-sombra:#332A1E; --g-grave:#6B5230;   /* 6,22:1 sobre osso */

  /* tipografia · razão 1,6 · âncora --t2 · sete clamps, todos aqui */
  --t1:clamp(.700rem, .693rem + .029vw, .719rem);
  --t2:clamp(1.038rem, .996rem + .171vw, 1.150rem);
  --t3:clamp(1.363rem, 1.184rem + .733vw, 1.844rem);
  --t4:clamp(1.781rem, 1.347rem + 1.781vw, 2.950rem);
  --t5:clamp(2.250rem, 1.333rem + 3.762vw, 4.719rem);
  --t6:clamp(2.875rem, 1.139rem + 7.124vw, 7.550rem);
  --t7:clamp(4.125rem, 1.170rem + 12.124vw, 12.080rem);

  /* espaço · razão 1,5 */
  --s1:.5rem; --s2:.75rem; --s3:1.125rem; --s4:1.75rem;
  --s5:2.625rem; --s6:4rem; --s7:6rem; --s8:9rem;

  /* isto é papel e matéria prensada, não vidro */
  --r0:0; --r1:2px; --r2:3px;
  --sombra-dura:2px 2px 0 var(--fio);

  --d-curto:120ms; --d-medio:220ms; --d-longo:380ms;
  --e-saida:cubic-bezier(.2,.7,.3,1);
  --e-firme:cubic-bezier(.32,.06,.24,1);

  --wrap:1180px;
  --pad:clamp(1.25rem, .5rem + 3vw, 3.25rem);
  --face:url(../img/face.svg);

  --serif:"NSD","NSD fb",Georgia,serif;
  --sans:"NSans","NSans fb",Arial,sans-serif;
  --mono:"NMono","NMono fb",Menlo,monospace;
}

/* ---------------------------------- base -------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{ -webkit-text-size-adjust:100%; scroll-padding-block-start:88px; scroll-padding-block-end:110px }
body{
  background:var(--osso); color:var(--tinta);
  font-family:var(--sans); font-size:var(--t2); font-weight:400; line-height:1.62;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,iframe{ display:block; max-width:100% }
svg{ max-width:none }
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.03; letter-spacing:-.012em; text-wrap:balance }
p{ text-wrap:pretty }
a{ color:var(--verde); text-underline-offset:.18em; text-decoration-thickness:from-font }
a:hover{ text-decoration-thickness:2px }
b,strong{ font-weight:600 }
:focus-visible{ outline:3px solid var(--verde); outline-offset:3px; border-radius:1px }
.escuro :focus-visible,.cunha :focus-visible,.rodape :focus-visible{ outline-color:var(--g-luz) }
::selection{ background:var(--verde); color:var(--osso) }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
     clip-path:inset(50%); white-space:nowrap; border:0 }
.pular{ position:absolute; inset-block-start:0; inset-inline-start:0; z-index:120;
        background:var(--verde); color:var(--osso); padding:14px 22px; font-weight:600;
        text-decoration:none; transform:translateY(-200%) }
.pular:focus{ transform:none }
#conteudo:focus-visible{ outline:none }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }
.sec{ padding-block:clamp(3.5rem,7vw,7rem); position:relative }
section{ scroll-margin-block-start:96px }

/* ------------------------- a face de corte, o motivo -------------------- */
/* Coisa fechada leva um fio simples. Coisa aberta leva a face de corte. */
.bl{ border-inline-start:1px solid var(--fio); padding-inline-start:var(--s3) }
.bl[data-aberto],
.face-on{
  border-inline-start-color:transparent;
  background-image:var(--face);
  background-repeat:repeat-y;
  background-position:left top var(--desloc,0);
  background-size:12px 48px;
  padding-inline-start:calc(var(--s3) + 6px);
}
@supports (mask-image:url(x)){
  .bl[data-aberto],.face-on{
    background-image:none;
    position:relative;
  }
  .bl[data-aberto]::before,.face-on::before{
    content:""; position:absolute; inset-block:0; inset-inline-start:0; width:12px;
    background:var(--fio);
    -webkit-mask:var(--face) repeat-y left top var(--desloc,0) / 12px 48px;
    mask:var(--face) repeat-y left top var(--desloc,0) / 12px 48px;
  }
  .escuro .bl[data-aberto]::before,.escuro .face-on::before{ background:var(--fio-luz) }
}

/* faixa de face que sangra: substitui a faixa de fundo alternada */
.tira{ block-size:18px; inline-size:100vw; margin-inline-start:calc(50% - 50vw);
       background:var(--fio);
       -webkit-mask:var(--face) repeat-x left top / 48px 18px;
       mask:var(--face) repeat-x left top / 48px 18px;
       transform:rotate(180deg); opacity:.7 }

/* --------------------------------- topo --------------------------------- */
.topo{ position:sticky; inset-block-start:0; z-index:60; background:var(--osso);
       border-block-end:1px solid var(--fio) }
.topo-in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
          min-block-size:76px; padding-block:var(--s2) }
.topo-marca{ display:inline-flex; align-items:center; text-decoration:none; flex:0 0 auto }
.topo-marca img{ inline-size:clamp(148px,17vw,208px); block-size:auto }
.indice{ display:none; gap:var(--s1); align-items:stretch }
.indice a{ font-family:var(--sans); font-size:var(--t1); font-weight:600; letter-spacing:.15em;
           text-transform:uppercase; color:var(--tinta-2); text-decoration:none;
           display:inline-flex; align-items:center; min-block-size:48px;
           padding-inline:var(--s2) var(--s2); position:relative }
.indice a:hover{ color:var(--tinta) }
.indice a[aria-current=page]{ color:var(--tinta) }
.indice a::before{ content:""; position:absolute; inset-block:14px; inset-inline-start:0; width:1px;
                   background:var(--fio) }
.indice a[aria-current=page]{ padding-inline-start:calc(var(--s2) + 15px) }
.indice a[aria-current=page]::before{
  width:12px; background:var(--verde);
  -webkit-mask:var(--face) repeat-y left top / 12px 48px;
  mask:var(--face) repeat-y left top / 12px 48px;
}
@media (min-width:1000px){ .indice{ display:flex } }
.menu{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.12em; text-transform:uppercase;
       color:var(--tinta); background:none; border:1px solid var(--fio); padding:12px 16px;
       min-block-size:48px; cursor:pointer }
@media (min-width:1000px){ .menu{ display:none } }
.gaveta a{ display:block; padding:14px 0; min-block-size:48px; font-family:var(--sans);
           font-size:var(--t1); font-weight:600; letter-spacing:.15em; text-transform:uppercase;
           color:var(--tinta); text-decoration:none; border-block-end:1px solid var(--fio) }
.gaveta a:last-child{ border-block-end:0 }

/* --------------------------------- hero --------------------------------- */
.hero{ padding-block:clamp(2.5rem,6vw,5.5rem) clamp(2rem,5vw,4rem); position:relative }
.hero-grade{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4); align-items:end }
@media (min-width:900px){
  .hero-grade{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(2rem,4vw,4rem) }
}
/* o lockup dela, na ordem dela: descritor pequeno, nome enorme, descritor casado.
   O nome é medido em unidade de contêiner: ele preenche a linha, sempre.       */
.lockup{ container-type:inline-size; margin-block-end:clamp(1.5rem,3vw,2.75rem) }
.h-pre{ font-family:var(--sans); font-weight:600; font-size:calc(var(--t7) * .088);
        letter-spacing:.34em; text-transform:uppercase; color:var(--tinta-2); line-height:1;
        margin-block-end:.55em }
.h-nome{ font-family:var(--serif); font-size:var(--t7); font-weight:400; font-stretch:80%;
         line-height:.82; letter-spacing:-.004em; text-transform:uppercase; white-space:nowrap }
.h-desc{ font-family:var(--sans); font-weight:700; font-size:calc(var(--t7) * .128);
         letter-spacing:.30em; text-transform:uppercase; color:var(--tinta-2);
         line-height:1.15; margin-block-start:.5em; margin-inline-end:-.30em; white-space:nowrap }
@supports (container-type:inline-size){
  .h-pre{ font-size:2.35cqi }
  .h-nome{ font-size:var(--fsnome,14.4cqi) }
  .h-desc{ font-size:3.55cqi; letter-spacing:var(--ls-desc,.45em); margin-inline-end:-.45em }
}
.h-local{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.14em; color:var(--tinta-2);
          margin-block-start:var(--s3) }
.hero-foto{ position:relative; justify-self:end; max-inline-size:400px; width:100% }
/* a foto dissolve na base E na direita: o recorte do arquivo deixa de parecer corte */
.hero-foto img{ inline-size:100%; height:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 97%),
                     linear-gradient(to right,#000 78%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 60%,transparent 97%),
             linear-gradient(to right,#000 78%,transparent 99%);
  -webkit-mask-composite:source-in; mask-composite:intersect }
@media (max-width:899.98px){ .hero-foto{ max-inline-size:280px; justify-self:start } }

/* ---------------------- fileira de espécies (M4) ------------------------ */
.especies{ margin-block-start:clamp(2rem,4vw,3.5rem) }
.especies-lede{ font-size:var(--t1); font-family:var(--sans); font-weight:600; letter-spacing:.24em;
                text-transform:uppercase; color:var(--tinta-2); margin-block-end:var(--s2) }
.fileira{ display:flex; align-items:baseline; gap:clamp(.5rem,1.2vw,1.1rem); flex-wrap:nowrap;
          --sangra:min(var(--s6), calc(50vw - 50%));
          margin-inline-start:calc(var(--sangra) * -1); padding-inline-start:var(--sangra) }
.fileira label{ font-family:var(--serif); font-weight:400; font-stretch:62.5%; color:var(--tinta);
                cursor:pointer; line-height:.9; display:inline-flex; align-items:baseline;
                padding-block:10px; transition:color var(--d-curto) var(--e-saida) }
.fileira label:hover{ color:var(--verde) }
.fileira input{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%) }
.fileira input:checked + label{ color:var(--verde); text-decoration:underline;
  text-underline-offset:.12em; text-decoration-thickness:.055em }
.fileira input:focus-visible + label{ outline:3px solid var(--verde); outline-offset:4px }
/* a fileira tem escala própria: sete degraus derivados de --t7, somando menos que
   a largura do wrap. A escada é a informação; o teto é o que cabe numa linha.  */
.e1{ font-size:calc(var(--t7) * .062) } .e2{ font-size:calc(var(--t7) * .096) }
.e3{ font-size:calc(var(--t7) * .148) } .e4{ font-size:calc(var(--t7) * .228) }
.e5{ font-size:calc(var(--t7) * .352) } .e6{ font-size:calc(var(--t7) * .518) }
.e7{ font-size:calc(var(--t7) * .690) }
@media (max-width:759.98px){
  .fileira{ flex-direction:column; align-items:flex-start; gap:0; margin-inline-start:0;
            padding-inline-start:0 }
  .fileira label{ min-block-size:48px; align-items:center }
  .e1{ font-size:var(--t1) } .e2{ font-size:var(--t2) } .e3{ font-size:var(--t3) }
  .e4{ font-size:var(--t4) } .e5{ font-size:var(--t5) } .e6{ font-size:var(--t6) }
  .e7{ font-size:var(--t7) }
}

/* --------------------------- grade de conteúdo -------------------------- */
.duo{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s5) }
@media (min-width:940px){
  .duo{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); column-gap:clamp(2rem,5vw,5.5rem) }
  .duo > .dado{ margin-block-start:-3.4rem }
}
.olho{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.2em; text-transform:uppercase;
       color:var(--tinta-2); margin-block-end:var(--s2) }
h2{ font-size:var(--t5) }
h3{ font-size:var(--t3) }
.lede{ font-size:var(--t3); font-family:var(--serif); line-height:1.24; max-inline-size:28ch }
.corpo{ max-inline-size:62ch }
.corpo + .corpo{ margin-block-start:var(--s3) }
.pergunta{ font-family:var(--serif); font-size:var(--t3); line-height:1.22; color:var(--tinta);
           border-block-start:1px solid var(--fio); padding-block-start:var(--s3);
           margin-block-start:var(--s4); max-inline-size:34ch }

/* ------------------------- o talo que mede (M3) ------------------------- */
.dado-lista{ list-style:none; padding:0; display:grid; gap:var(--s4) }
.num{ font-family:var(--mono); font-size:var(--t4); font-weight:400; font-variant-numeric:tabular-nums;
      line-height:1; display:block; --esc:2.6px }
.num::after{ content:""; display:block; block-size:2px; margin-block-start:.42em;
  inline-size:min(calc(var(--v) * var(--esc)), 100%); background:var(--fio);
  clip-path:polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%) }
.un{ display:block; font-family:var(--sans); font-size:var(--t1); letter-spacing:.06em;
     color:var(--tinta-2); margin-block-start:.6em }
.fonte{ font-family:var(--mono); font-size:var(--t1); color:var(--tinta-2); letter-spacing:.04em }

/* -------------------------------- cartões ------------------------------- */
.cartoes{ display:grid; gap:var(--s4); grid-template-columns:minmax(0,1fr) }
@media (min-width:760px){ .cartoes{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.cartao{ display:block; text-decoration:none; color:inherit; background:var(--linho);
         padding:var(--s4) var(--s4) var(--s5); border:1px solid var(--fio); border-radius:var(--r0);
         transition:background var(--d-curto) var(--e-saida) }
.cartao:hover{ background:#D8DBC6 }
.cartao h3{ font-size:var(--t3); margin-block-end:var(--s2) }
.cartao .leva{ font-family:var(--sans); font-size:var(--t1); font-weight:600; letter-spacing:.14em;
               text-transform:uppercase; color:var(--verde); margin-block-start:var(--s3);
               display:inline-flex; align-items:center; min-block-size:44px }

/* --------------------------- a cunha escura ----------------------------- */
.cunha{ background:var(--breu); color:var(--osso); inline-size:100vw;
        margin-inline-start:calc(50% - 50vw); overflow:visible;
        clip-path:polygon(0 3.2%, 100% 0, 100% 96.4%, 0 100%);
        padding-block:clamp(5rem,9vw,9rem) }
.cunha h2,.cunha h3{ color:var(--osso) }
.cunha .olho{ color:var(--fio-luz) }
.cunha a{ color:var(--g-luz) }
.frase{ font-family:var(--serif); font-size:var(--t5); line-height:1.06; color:var(--osso);
        max-inline-size:16ch }
.frase-fonte{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.14em; color:var(--fio-luz);
              margin-block-start:var(--s3) }

/* a prancha do fardo */
.fardo-cx{ margin-block-start:clamp(1rem,2vw,2rem); position:relative;
            inline-size:min(1080px, calc(100% + 50vw - 50%)) }
.fardo{ inline-size:100%; height:auto; overflow:visible }
@media (max-width:759.98px){
  /* No celular o desenho nao estica: a caixa fica quase quadrada e o proprio SVG
     reenquadra (preserveAspectRatio slice), mantendo o traco na escala certa.
     O que entra no quadro: a etiqueta, a face de corte inteira e o folhelho.   */
  .fardo-cx{ inline-size:calc(100% + var(--pad)); overflow:hidden }
  .fardo{ inline-size:100%; aspect-ratio:800/660; height:auto }
}
.fardo g path,.fardo g ellipse,.fardo g rect,.fardo g circle{ fill:none; stroke:var(--osso) }
.fardo .ar path{ stroke-width:2.4; stroke-linejoin:round }
.fardo .massa path{ stroke:var(--fio-luz); stroke-width:1.4; stroke-linejoin:round }
.fardo .fibra path{ stroke:var(--fio-luz); stroke-width:.8; opacity:.52 }
.fardo .camada path{ stroke-width:1.4; opacity:.3 }
.fardo .sulco path{ stroke-width:1.4; opacity:.45 }
.fardo .prensado path{ stroke-width:.8; stroke-linecap:round; opacity:.5 }
.fardo .topo ellipse{ fill:var(--breu); stroke-width:1.4 }
.fardo .folhelho path.c{ stroke-width:1.4; stroke-linejoin:round }
.fardo .folhelho path.t{ stroke:var(--fio-luz); stroke-width:.8; opacity:.6 }
.fardo .folhelho path.l{ stroke-width:1.4 }
.fardo .franja path{ stroke-width:.8; stroke-linecap:round; opacity:.7 }
.fardo .etq rect,.fardo .etq circle{ stroke-width:1.4 }
.fardo .etq .cord{ stroke:var(--fio-luz); stroke-width:.8 }
.fardo .etq .a{ fill:var(--g-corpo); stroke:none; font-family:var(--serif); font-weight:600;
                font-size:15px; letter-spacing:.11em }
.fardo .etq .b{ fill:var(--g-corpo); stroke:none; font-family:var(--mono); font-size:10.5px;
                letter-spacing:.2em; opacity:.82 }
.fardo .sombra path{ stroke:var(--fio-luz); stroke-width:.8; opacity:.38 }
/* M1 · O FOLHELHO: a matéria responde, a página não se mexe */
.fardo #folhelho,.fardo #franja{ transform-box:view-box; transform-origin:230px 580px }
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .fardo #folhelho,.fardo #franja{ transition:transform var(--d-medio) var(--e-firme) }
  .fardo-cx:hover #folhelho,.fardo-cx:focus-within #folhelho{ transform:rotate(-5deg) translate(-6px,4px) }
  .fardo-cx:hover #franja,.fardo-cx:focus-within #franja{ transform:translate(-4px,4px) }
}

/* o campo octogonal com o logo real */
.selo{ display:inline-flex; align-items:center; justify-content:center; padding:var(--s4) var(--s5);
       border:1px solid var(--g-meio);
       clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),
                         calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px) }
.selo img{ inline-size:min(300px,58vw); height:auto }

/* --------------------------------- fotos -------------------------------- */
figure{ margin:0 }
.foto img{ inline-size:100%; height:auto }
.foto figcaption{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.1em;
                  color:var(--tinta-2); margin-block-start:var(--s2) }
.chanfro img{ clip-path:polygon(0 0,100% 0,100% 88%,0 100%) }
.recorte-folhelho img{ clip-path:polygon(3% 8%,34% 0,66% 4%,97% 0,100% 30%,96% 62%,100% 92%,
                                          64% 100%,31% 95%,4% 100%,0 66%,3% 36%) }
.amostra{ max-inline-size:320px }

/* --------------------------- acordeão (M2) ------------------------------ */
details{ border-block-end:1px solid var(--fio) }
details > summary{ list-style:none; cursor:pointer; min-block-size:56px; display:flex;
  align-items:center; padding-block:var(--s3); padding-inline-start:var(--s3);
  border-inline-start:1px solid var(--fio); font-family:var(--serif); font-size:var(--t3);
  line-height:1.16 }
details > summary::-webkit-details-marker{ display:none }
details[open] > summary{ border-inline-start-color:transparent; position:relative }
details[open] > summary::before{ content:""; position:absolute; inset-block:0; inset-inline-start:0;
  width:12px; background:var(--verde);
  -webkit-mask:var(--face) repeat-y left top var(--desloc,0) / 12px 48px;
  mask:var(--face) repeat-y left top var(--desloc,0) / 12px 48px }
details .dentro{ min-block-size:0; padding:0 0 var(--s4) calc(var(--s3) + 12px); max-inline-size:60ch }
@supports (selector(::details-content)){
  details::details-content{ display:grid; grid-template-rows:0fr; overflow:clip;
    transition:grid-template-rows var(--d-longo) var(--e-saida),
               content-visibility var(--d-longo) allow-discrete }
  details[open]::details-content{ grid-template-rows:1fr }
}

/* --------------------------- botões e ações ----------------------------- */
.acao{ display:inline-flex; align-items:center; gap:var(--s2); min-block-size:52px;
  padding:14px 26px; background:var(--verde); color:var(--osso); text-decoration:none;
  font-family:var(--sans); font-weight:600; font-size:var(--t1); letter-spacing:.16em;
  text-transform:uppercase; border:1px solid var(--verde); border-radius:var(--r0);
  transition:background var(--d-curto) var(--e-saida), color var(--d-curto) var(--e-saida) }
.acao:hover{ background:var(--tinta); border-color:var(--tinta) }
.acao-2{ background:none; color:var(--verde); border-color:var(--fio) }
.acao-2:hover{ background:var(--linho); color:var(--tinta) }
.cunha .acao{ background:var(--g-luz); color:var(--breu); border-color:var(--g-luz) }
.cunha .acao:hover{ background:var(--g-alta); border-color:var(--g-alta) }

/* --------------------- etiqueta de lote fixa (M5) ----------------------- */
.etiqueta{ position:fixed; inset-inline-end:var(--s3);
  inset-block-end:max(var(--s3), env(safe-area-inset-bottom)); z-index:50;
  min-block-size:52px; display:inline-flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s3); background:var(--linho); border:1px solid var(--fio);
  border-radius:var(--r0); box-shadow:var(--sombra-dura); color:var(--tinta);
  font-family:var(--mono); font-size:var(--t1); letter-spacing:.08em; text-decoration:none;
  transition:background var(--d-curto) var(--e-saida) }
.etiqueta:hover{ background:var(--osso) }
.etiqueta .furo{ inline-size:9px; block-size:9px; border-radius:var(--r2); border:1px solid var(--fio);
                 flex:0 0 auto }

/* ------------------------------- a ficha -------------------------------- */
.ficha{ background:var(--linho); border:1px solid var(--fio); padding:var(--s4) }
.campo{ border:0; border-block-start:1px solid var(--fio); padding:var(--s3) 0 0;
         margin:var(--s3) 0 0; min-inline-size:0 }
.campo:first-of-type{ border-block-start:0; padding-block-start:0; margin-block-start:0 }
.campo > legend,.campo > .rot{ font-family:var(--sans); font-size:var(--t1); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2); padding:0;
  margin-block-end:var(--s2); float:left; inline-size:100% }
.campo > legend + *{ clear:both }
.opcoes{ display:flex; flex-wrap:wrap; gap:var(--s1) }
.opcoes label{ display:inline-flex; align-items:center; min-block-size:44px; padding:9px 15px;
  border:1px solid var(--fio); background:var(--osso); cursor:pointer;
  font-size:var(--t1); font-family:var(--sans); letter-spacing:.03em; color:var(--tinta);
  transition:background var(--d-curto) var(--e-saida), border-color var(--d-curto) var(--e-saida) }
.opcoes label:hover{ background:var(--linho) }
.opcoes input{ position:absolute; inline-size:1px; block-size:1px; clip-path:inset(50%) }
.opcoes input:checked + label{ background:var(--verde); border-color:var(--verde); color:var(--osso) }
.opcoes input:focus-visible + label{ outline:3px solid var(--verde); outline-offset:3px }
.eco{ margin-block-start:var(--s4); border-block-start:1px solid var(--fio); padding-block-start:var(--s4) }
.eco dl{ display:grid; grid-template-columns:auto 1fr; gap:var(--s1) var(--s3); margin:0;
         font-family:var(--mono); font-size:var(--t1) }
.eco dt{ color:var(--tinta-2); letter-spacing:.08em }
.eco dd{ margin:0; color:var(--tinta) }
.perguntas{ list-style:none; padding:0; margin-block-start:var(--s3); display:grid; gap:var(--s2) }
.perguntas li{ border-inline-start:1px solid var(--fio); padding-inline-start:var(--s3);
               font-size:var(--t2); max-inline-size:56ch }
.aviso{ font-family:var(--mono); font-size:var(--t1); color:var(--tinta-2); letter-spacing:.03em;
        margin-block-start:var(--s3); line-height:1.5 }
input[type=number],input[type=text]{ font-family:var(--mono); font-size:var(--t2); color:var(--tinta);
  background:var(--osso); border:1px solid var(--fio); border-radius:var(--r1); padding:12px 14px;
  min-block-size:48px; inline-size:100%; max-inline-size:11ch }
input::placeholder{ color:var(--tinta-2); opacity:.72 }
.saida{ font-family:var(--mono); font-size:var(--t4); color:var(--tinta); font-variant-numeric:tabular-nums }

/* --------------------------- conferido no balcão ------------------------ */
.conferido ul{ list-style:none; padding:0; display:grid; gap:var(--s2); margin-block-start:var(--s3) }
.conferido li{ padding-inline-start:calc(var(--s3) + 6px); position:relative; min-block-size:34px;
               display:flex; align-items:center; font-size:var(--t2) }
.conferido li::before{ content:""; position:absolute; inset-block:0; inset-inline-start:0; width:12px;
  background:var(--fio);
  -webkit-mask:var(--face) repeat-y left top / 12px 48px;
  mask:var(--face) repeat-y left top / 12px 48px }
.quando{ font-family:var(--mono); font-size:var(--t1); color:var(--tinta-2); letter-spacing:.08em }

/* -------------------------------- tabela -------------------------------- */
.tabela{ inline-size:100%; border-collapse:collapse; font-size:var(--t2) }
.tabela caption{ text-align:start; font-family:var(--mono); font-size:var(--t1); letter-spacing:.14em;
                 text-transform:uppercase; color:var(--tinta-2); padding-block-end:var(--s2) }
.tabela th,.tabela td{ text-align:start; padding:var(--s2) var(--s3) var(--s2) 0;
                       border-block-end:1px solid var(--fio); vertical-align:top }
.tabela th{ font-family:var(--sans); font-weight:600; font-size:var(--t1); letter-spacing:.12em;
            text-transform:uppercase; color:var(--tinta-2) }
.tabela td.n{ font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap }
.rolagem{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* --------------------------------- mapa --------------------------------- */
.mapa{ border:1px solid var(--fio); aspect-ratio:16/10; overflow:hidden; background:var(--linho) }
.mapa iframe{ inline-size:100%; block-size:100%; border:0; filter:grayscale(1) contrast(.92) }
.mapa:focus-within{ outline:3px solid var(--verde); outline-offset:3px }

/* -------------------------------- rodapé -------------------------------- */
.rodape{ background:var(--breu); color:var(--osso); padding-block:clamp(3rem,6vw,5rem) var(--s5);
         margin-block-start:clamp(3rem,6vw,6rem) }
.rodape a{ color:var(--g-luz) }
.rodape .grade{ display:grid; gap:var(--s5); grid-template-columns:minmax(0,1fr) }
@media (min-width:820px){ .rodape .grade{ grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr) } }
.rodape h2{ font-size:var(--t3); color:var(--osso) }
.rodape .rot{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.2em; text-transform:uppercase;
              color:var(--fio-luz); margin-block-end:var(--s2) }
.rodape ul{ list-style:none; padding:0; display:grid; gap:0 }
.rodape ul a{ display:inline-flex; align-items:center; min-block-size:44px }
.rodape .legal{ font-size:var(--t1); line-height:1.6; color:var(--linho); max-inline-size:76ch;
                border-block-start:1px solid var(--fio-luz); padding-block-start:var(--s3);
                margin-block-start:var(--s5) }
.rodape .rt{ font-family:var(--mono); font-size:var(--t1); color:var(--fio-luz);
             margin-block-start:var(--s2); letter-spacing:.06em }
.assinatura{ display:flex; align-items:center; gap:.4em; margin-block-start:var(--s4);
             font-family:var(--sans); font-size:var(--t1); letter-spacing:.1em; color:var(--fio-luz);
             min-block-size:44px }
.assinatura a{ display:inline-flex; align-items:center; min-block-size:44px }
.assinatura a{ color:var(--g-corpo); text-decoration:underline; text-underline-offset:.2em }
.assinatura a:hover{ color:var(--g-alta) }

/* --------------------------- transição de página ------------------------ */
@view-transition{ navigation:auto }

/* --------------------------- reduced motion ----------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ transition:none !important }
  .fardo #folhelho,.fardo #franja{ transform:none }
  details::details-content{ transition:none }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none !important }
}

/* -------------------------------- impressão ----------------------------- */
@media print{
  :root{ --osso:#fff; --linho:#fff; --tinta:#000; --tinta-2:#333; --fio:#999 }
  body{ background:#fff; color:#000; font-size:11pt }
  .topo,.etiqueta,.gaveta,.menu,.indice,.cunha,.rodape .grade,.acao,.tira,.hero-foto,
  .fardo-cx,.mapa,.especies{ display:none !important }
  .ficha{ border:1px solid #000; padding:14pt }
  .imprime-cabeca{ display:block !important; border-block-end:1px solid #000;
                   padding-block-end:8pt; margin-block-end:12pt }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8pt; color:#555 }
  .perguntas li{ break-inside:avoid }
}
.imprime-cabeca{ display:none }

/* ---- a escolha de espécie reconfigura a lista, sem uma linha de JS ------
   Modo de falha: sem :has(), nada é escondido. Verboso e correto.          */
main:has(#e-canario:checked) [data-esp]:not([data-esp~="ave"]),
main:has(#e-gato:checked)    [data-esp]:not([data-esp~="gato"]),
main:has(#e-cao:checked)     [data-esp]:not([data-esp~="cao"]),
main:has(#e-ovino:checked)   [data-esp]:not([data-esp~="ovino"]),
main:has(#e-suino:checked)   [data-esp]:not([data-esp~="suino"]),
main:has(#e-equino:checked)  [data-esp]:not([data-esp~="equino"]),
main:has(#e-bovino:checked)  [data-esp]:not([data-esp~="bovino"]){ display:none }

/* ---- a ficha: as perguntas condicionais.
   Base = todas visíveis. :has() só ESCONDE o que não se aplica.            */
#ficha:has(#es-5:checked)   li[data-se="escore-baixo"],
#ficha:has(#es-6:checked)   li[data-se="escore-baixo"],
#ficha:has(#es-7:checked)   li[data-se="escore-baixo"]{ display:none }
#ficha:has(input[name=peso]:checked):not(:has(#pe-1:checked)) li[data-se="sem-peso"]{ display:none }
#ficha:has(#vo-2:checked) li[data-se="sem-volumoso"],
#ficha:has(#vo-3:checked) li[data-se="sem-volumoso"],
#ficha:has(#vo-4:checked) li[data-se="sem-volumoso"]{ display:none }
#ficha:has(#co-2:checked) li[data-se="compete"]{ display:none }

/* ---- o retrato do hero cruza a linha do nome ---------------------------- */
/* o retrato sobe e passa POR TRÁS do nome: a página deixa de ser uma pilha */
.lockup{ position:relative; z-index:2 }
@media (min-width:1000px){
  .hero-grade{ align-items:start }
  .hero-foto{ position:relative; z-index:1; max-inline-size:420px;
              margin-inline-end:0 }
  .hero-texto{ position:relative; z-index:2 }
}

/* ---- a franja do fardo cai sobre a seção seguinte ----------------------- */
.fardo-cx{ margin-block-end:-132px; z-index:2 }
/* no celular a franja cai menos: com -132 o folhelho some atras da secao seguinte */
@media (max-width:759.98px){ .fardo-cx{ margin-block-end:-44px } }
.depois-da-cunha{ position:relative; z-index:1; padding-block-start:clamp(6rem,11vw,10rem) }

/* ---- menu compacto: <details> nativo, zero JS ---------------------------- */
.menu-cx{ position:relative }
.menu-cx > summary{ list-style:none }
.menu-cx > summary::-webkit-details-marker{ display:none }
.menu-cx .gaveta{ position:absolute; inset-block-start:calc(100% + 12px); inset-inline-end:0;
  z-index:70; background:var(--osso); border:1px solid var(--fio); min-inline-size:240px;
  padding:var(--s2) var(--s3); box-shadow:var(--sombra-dura) }
.menu-cx[open] > summary{ background:var(--linho) }
@media (min-width:1000px){ .menu-cx{ display:none } }

/* =========================================================================
   ABERTURA E REVELAÇÃO (pedido do dono, 28/08)
   Duas regras que não se quebram:
   · sem JS, tudo já está visível. O JS só ARMA o que vai ser revelado.
   · sob prefers-reduced-motion, nada disso existe. É assim que o card do
     WhatsApp continua correto: ele é renderizado sob reduce e sem JS.
   ========================================================================= */

/* ---------------------------- a abertura -------------------------------- */
.abre{
  position:fixed; inset:0; z-index:200; background:var(--breu);
  display:grid; place-content:center; justify-items:center; gap:var(--s4);
  pointer-events:none;
  animation:abre-sobe .62s cubic-bezier(.7,0,.2,1) 1.55s forwards;
}
.abre-marca{
  inline-size:clamp(190px,26vw,330px); block-size:auto;
  /* o logo é revelado pela FACE DE CORTE, o mesmo motivo de todo o site */
  -webkit-mask-image:linear-gradient(to bottom,transparent 48%,#000 52%);
  mask-image:linear-gradient(to bottom,transparent 48%,#000 52%);
  -webkit-mask-size:100% 200%; mask-size:100% 200%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:0 0; mask-position:0 0;
  animation:abre-revela 1.05s cubic-bezier(.62,0,.25,1) .18s forwards;
}
.abre-fio{
  inline-size:min(330px,62vw); block-size:1px; background:var(--g-meio);
  transform:scaleX(0); transform-origin:left center;
  animation:abre-fio .7s cubic-bezier(.62,0,.25,1) .95s forwards;
}
.abre-rot{
  font-family:var(--mono); font-size:var(--t1); letter-spacing:.3em;
  text-transform:uppercase; color:var(--fio-luz); opacity:0;
  animation:abre-rot .55s ease-out 1.05s forwards;
}
@keyframes abre-revela{ to{ -webkit-mask-position:0 100%; mask-position:0 100% } }
@keyframes abre-fio{ to{ transform:scaleX(1) } }
@keyframes abre-rot{ to{ opacity:1 } }
@keyframes abre-sobe{ to{ transform:translateY(-101%); visibility:hidden } }

/* ------------------------- revelação no scroll -------------------------- */
/* Estado base: VISÍVEL. Só o JS arma, e só fora de reduce. */
@media (prefers-reduced-motion:no-preference){
  html.js .rv{ opacity:0; transform:translateY(18px);
               transition:opacity .62s cubic-bezier(.2,.7,.3,1),
                          transform .62s cubic-bezier(.2,.7,.3,1) }
  html.js .rv.entrou{ opacity:1; transform:none }
  html.js .rv:nth-child(2){ transition-delay:.07s }
  html.js .rv:nth-child(3){ transition-delay:.14s }
  html.js .rv:nth-child(4){ transition-delay:.21s }
  html.js .rv:nth-child(5){ transition-delay:.28s }
  html.js .rv:nth-child(6){ transition-delay:.35s }
}

@media (prefers-reduced-motion:reduce){
  .abre{ display:none }
  html.js .rv{ opacity:1; transform:none; transition:none }
}
@media print{ .abre{ display:none } }

/* ---- pista de rolagem: quando a prancha nao cabe, o papel esmaece na borda -- */
.rola-pista{ position:relative }
.rola-pista::after{
  content:""; position:absolute; inset-block:0; inset-inline-end:0; inline-size:52px;
  pointer-events:none;
  background:linear-gradient(to right, rgba(236,238,226,0), var(--osso));
}
@media (min-width:700px){ .n-cocho-cx.rola-pista::after{ display:none } }
.bota-cx.rola-pista::after{ display:none }