/* ManuPekena — catalogo.css
   Exclusivo da página de catálogo. Depende de main.css. */


.produto{border:1px solid var(--fio); border-radius:var(--r-md); background:var(--papel); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color var(--t-medio) var(--ease), transform var(--t-medio) var(--ease)}
.produto:hover{border-color:#B9AE96; transform:translateY(-3px)}
.produto .foto{aspect-ratio:1/1; overflow:hidden; background:var(--osso-2); border-bottom:1px solid var(--fio)}
.produto .foto img{width:100%; height:100%; object-fit:cover}
.produto .corpo{padding:20px 20px 22px}
.produto h4{font-family:var(--display); font-weight:400; font-size:20px; margin:0 0 8px; letter-spacing:-.2px}
.produto p{margin:0; font-size:15px; color:var(--tinta-media); line-height:1.55}
.vela{background:var(--papel); text-align:center; transition:background var(--t-medio) var(--ease)}
.vela:hover{background:#FFFFFF}
.vela .foto{aspect-ratio:1/1; padding:16px 14px 6px}
.vela .foto img{width:100%; height:100%; object-fit:contain}
.vela .corpo{padding:0 10px 18px}
.vela strong{display:block; font-family:var(--texto); font-weight:700; font-size:13.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--tinta)}
.vela span{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; color:var(--tinta-sutil); margin-top:5px}
/* ===== Catálogo ===== */
.prancha-especie .foto{transition:border-color var(--t-medio) var(--ease)}
.prancha-especie .foto img{transition:transform .6s var(--ease)}
.prancha-especie:hover .foto img{transform:scale(1.03)}
.uso{transition:border-color var(--t-medio) var(--ease), transform var(--t-medio) var(--ease)}
.uso:hover{transform:translateY(-3px); border-color:#B9AE96}
.indice-especies li{transition:background var(--t-medio) var(--ease)}
.indice-especies li:hover{background:#FFFDF8}
/* entrada da capa do catálogo */
body.carregado .capa-pagina .sobrancelha{animation:sobe .8s var(--ease-entrada) both}
body.carregado .capa-pagina h1{animation:sobe .9s var(--ease-entrada) 110ms both}
body.carregado .capa-pagina .corpo-lg{animation:sobe .8s var(--ease-entrada) 220ms both}
body.carregado .capa-acoes{animation:sobe .8s var(--ease-entrada) 320ms both}
body.carregado .ficha-dados{animation:sobe .9s var(--ease-entrada) 300ms both}
.js .capa-pagina .sobrancelha,.js .capa-pagina h1,.js .capa-pagina .corpo-lg,
.js .capa-pagina .capa-acoes,.js .ficha-dados{opacity:0}
@media (prefers-reduced-motion:reduce){ .js .capa-pagina *,.js .ficha-dados{opacity:1 !important} }
.capa-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:end}

.prancha-especie{
  display:grid; grid-template-columns:340px 1fr; gap:40px; align-items:start;
  padding:44px 0; border-top:1px solid var(--fio);
}
.prancha-especie:first-of-type{border-top:0; padding-top:0}
.prancha-especie .foto{
  border:1px solid var(--fio); border-radius:var(--r-md); overflow:hidden;
  background:var(--osso-2); aspect-ratio:1/1;
}
.prancha-especie .foto img{width:100%; height:100%; object-fit:cover}
.prancha-especie h3{font-size:clamp(24px,3vw,31px); margin-bottom:2px}
.prancha-especie .cientifico{font-size:20px; color:var(--tinta-media); display:block; margin-bottom:18px}
.prancha-especie p{color:var(--tinta-media); max-width:60ch}
.num-prancha{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--tinta-sutil);
  display:block; margin-bottom:10px;
}
.taxon-linha{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--tinta-media);
  border-top:1px solid var(--fio); border-bottom:1px solid var(--fio); padding:12px 0; margin:0 0 16px; line-height:1.8;
}
.taxon-linha b{color:var(--tinta-sutil); font-weight:400; text-transform:uppercase; font-size:10px; letter-spacing:.1em}

.indice-especies{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--fio); border:1px solid var(--fio); border-radius:var(--r-md); overflow:hidden; margin-top:8px}
.indice-especies li{background:var(--papel); padding:22px 24px; list-style:none}
.indice-especies h4{font-family:var(--display); font-weight:400; font-size:21px; margin:0 0 2px}
.indice-especies .cientifico{font-size:16px; color:var(--tinta-media); display:block; margin-bottom:12px}
.indice-especies p{margin:0; font-size:15px; color:var(--tinta-media)}
.indice-especies .taxon-linha{margin-bottom:12px; padding:10px 0}

.usos{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.uso{border:1px solid var(--fio); border-radius:var(--r-md); background:var(--papel); padding:28px 26px}
.uso h4{font-family:var(--display); font-weight:400; font-size:22px; margin:0 0 10px}
.uso p{margin:0; color:var(--tinta-media); font-size:15.5px}
.uso .n{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--guara); display:block; margin-bottom:12px}

.cuidados{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 32px}
.cuidados li{display:grid; grid-template-columns:14px 1fr; gap:12px; color:#B9CDC1; font-size:15.5px; line-height:1.5}
.cuidados .b{color:#E9A79E; font-family:var(--mono); font-size:12px; line-height:1.6}

.fecho-catalogo{background:var(--verde-mata); color:var(--osso)}
.fecho-catalogo h2{color:var(--osso)}

@media (max-width:960px){
  .capa-grid{grid-template-columns:1fr; gap:40px}
  .prancha-especie{grid-template-columns:1fr; gap:24px}
  .prancha-especie .foto{max-width:380px}
  .indice-especies,.usos,.cuidados{grid-template-columns:1fr}
}
@media print{
  .cabecalho,.barra-proto,.capa-acoes,.nao-imprime{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  .escuro,.capa-pagina,.fecho-catalogo,.rodape{background:#fff !important; color:#14120D !important; border:0}
  .escuro h1,.escuro h2,.escuro h3,.capa-pagina h1,.fecho-catalogo h2{color:#14120D !important}
  .capa-pagina .corpo-lg,.cuidados li,.rodape .sobre,.rodape a{color:#3A3529 !important}
  .ficha-dados dt,.ficha-dados dd{background:#fff !important; border-bottom:1px solid #D6CDB9}
  .ficha-dados dt{color:#6B6556 !important}
  .ficha-dados dd{color:#14120D !important}
  .ficha-dados dl{background:#D6CDB9}
  .cuidados .b{color:#CE2E1C !important}
  section{padding:18pt 0}
  .capa-pagina{padding:0 0 24pt}
  .prancha-especie{page-break-inside:avoid; padding:16pt 0}
  .indice-especies li,.uso{page-break-inside:avoid}
  .wrap{max-width:none; padding:0}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-family:var(--mono); font-size:8pt; color:#6B6556}
}
/* --- Composição e fontes dos dados de conservação ------------------
   A nota de composição existe por dois motivos: honestidade com o
   visitante e revisão das plataformas de anúncio, que barram anúncios de
   produtos derivados de fauna silvestre. A linha de fontes é o que separa
   educação ambiental de decoração com nome científico. */
.nota-composicao{
  margin-top:18px; padding:16px 18px; border-left:2px solid var(--guara);
  background:var(--osso-2); font-size:15px; line-height:1.6; color:var(--tinta-media);
}
.nota-composicao b{color:var(--tinta); font-weight:700}
.fonte-dados{
  margin-top:36px; padding-top:20px; border-top:1px solid var(--fio);
  font-family:var(--mono); font-size:11.5px; line-height:1.75;
  letter-spacing:.02em; color:var(--tinta-sutil);
}
.fonte-dados b{color:var(--tinta-media); font-weight:500}