/* =====================================================================
   catalogo.css — página inicial (index.html): hero, experiências 3D,
   catálogo de bichos, álbum de descobertas, missão e seção para adultos.
   Usa as variáveis de css/marca.css.
   ===================================================================== */

/* ---------- topo (hero com o Curu) ---------- */
.hero-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.hero2 { position: relative; overflow: hidden; background:
  radial-gradient(ellipse 60% 70% at 78% 45%, rgba(168, 217, 74, .35), transparent 70%),
  radial-gradient(ellipse 50% 60% at 10% 100%, rgba(70, 167, 88, .18), transparent 70%),
  linear-gradient(180deg, #F3F8E6, var(--bg)); }
.hero2::before, .hero2::after { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #7CC576, #1E8A5A); opacity: .22; }
.hero2::before { left: -80px; top: 40%; transform: rotate(-20deg); }
.hero2::after { right: -60px; top: -70px; transform: rotate(60deg); }
.hero2-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px; padding-top: 18px; padding-bottom: 34px; }
.hero2 h1 { margin: 0; font-size: clamp(38px, 5.6vw, 66px); line-height: 1; font-weight: 900; color: var(--color-nature); letter-spacing: -.02em; }
.hero2 h1 em, .secao h2 em, .passos h2 em, .bloco h2 em { font-style: normal; color: var(--color-terra); }
.hero2-txt > p { margin: 14px 0 20px; font-size: clamp(18px, 2vw, 22px); color: var(--text); max-width: 520px; }
.btn-g { min-height: 58px; font-size: 19px; padding: 0 26px; }
.btn .ico { width: 1.25em; height: 1.25em; }
.selos { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; font-weight: 800; color: var(--text-soft); }
.selos li { display: inline-flex; align-items: center; gap: 6px; }
.selos .ico { color: var(--color-leaf); }
.hero2-curu { position: relative; display: flex; justify-content: center; }
.hero2-curu img { width: min(118%, 620px); margin-right: -6%; height: auto; filter: drop-shadow(0 14px 22px rgba(22, 74, 58, .22)); }
.fala { position: absolute; top: -6px; right: 0; margin: 0; background: #fff; border-radius: 22px; padding: 10px 16px; font-weight: 800; font-size: 16px; line-height: 1.3; box-shadow: var(--shadow-m); max-width: 200px; }
.fala b { color: var(--color-terra); }
.fala::after { content: ''; position: absolute; left: 22px; bottom: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.busca { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: var(--shadow-m); max-width: 560px; margin: 0 auto; }
.busca > span .ico { color: var(--text-soft); }
.busca input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 17px; min-height: 44px; }
.busca input::placeholder { color: #9A8A7C; }
.busca button { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--color-primary); color: #fff; cursor: pointer; display: grid; place-items: center; }
.busca button .ico { color: #fff; width: 22px; height: 22px; }

/* ---------- que bicho você quer conhecer ---------- */
.conhecer { position: relative; z-index: 2; margin-top: -10px; background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-m); padding: 20px 18px 16px; text-align: center; }
.conhecer h2 { margin: 0 0 12px; font-size: clamp(22px, 2.8vw, 28px); font-weight: 900; color: var(--color-nature); }
.cats { display: flex; gap: 12px; justify-content: safe center; overflow-x: auto; padding: 14px 2px 4px; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font-weight: 800; font-size: 15px; color: var(--text); width: 92px; }
.cat span { width: 78px; height: 78px; border-radius: 50%; overflow: hidden; border: 4px solid var(--color-primary-soft); background: var(--color-primary-soft); }
.cat img { width: 100%; height: 100%; object-fit: cover; }
.cat:active span { transform: scale(.94); }

/* ---------- destaques ---------- */
.ver-todos { font-weight: 800; color: var(--color-primary); }
.destaques { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dest { background: var(--surface); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-s); display: flex; flex-direction: column; }
.dest-foto { position: relative; aspect-ratio: 4 / 3; background: var(--color-primary-soft); }
.dest-foto img { width: 100%; height: 100%; object-fit: cover; }
.dest-foto .badge { position: absolute; top: 10px; right: 10px; }
.dest-corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.dest h3 { margin: 0; font-size: 24px; font-weight: 900; }
.dest small { color: var(--text-soft); font-size: 15px; margin-bottom: 10px; }
.dest .btn { min-height: 48px; font-size: 17px; align-self: flex-start; }

/* ---------- primeira missão (sem mini-Curu) ---------- */
.primeira-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--color-accent); display: grid; place-items: center; flex: none; }
.primeira-ico .ico { width: 28px; height: 28px; color: var(--text); }

/* ---------- momento: viu um bicho? ---------- */
.momento { position: relative; margin-top: 40px; display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: center;
  background: radial-gradient(ellipse at 85% 30%, rgba(168, 217, 74, .35), transparent 60%), linear-gradient(120deg, var(--color-accent-soft), #F1F8E4);
  border-radius: 32px; padding: 34px 34px 34px 34px; overflow: hidden; box-shadow: var(--shadow-m); min-height: 360px; }
.momento h2 { margin: 0; font-size: clamp(30px, 4vw, 44px); font-weight: 900; color: var(--color-nature); line-height: 1.05; }
.momento p { margin: 10px 0 18px; font-size: 19px; }
.momento small { display: block; margin-top: 12px; color: var(--text-soft); font-size: 15px; max-width: 380px; }
.momento-curu { order: -1; width: 240px; max-width: none; height: auto; margin-left: -40px; filter: drop-shadow(0 10px 16px rgba(22, 74, 58, .2)); }
.fluxo-visual { display: flex; align-items: center; justify-content: center; gap: 10px; }
.fluxo-visual figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.fluxo-visual figcaption { font-weight: 900; font-size: 15px; color: var(--color-nature); }
.fv-foto img { width: 140px; height: 140px; object-fit: cover; border-radius: 20px; border: 6px solid #fff; box-shadow: var(--shadow-m); transform: rotate(-5deg); }
.fv-id { background: #fff; border-radius: 20px; padding: 18px 14px; box-shadow: var(--shadow-m); width: 150px; }
.fv-id b { font-size: 14px; color: var(--text-soft); } .fv-id strong { font-size: 22px; color: var(--color-nature); margin-bottom: 4px; }
.fv-carta { position: relative; width: 140px; background: #fff; border-radius: 16px; padding: 8px 8px 10px; box-shadow: 0 10px 26px rgba(73, 53, 40, .2); transform: rotate(4deg); border: 3px solid var(--color-accent); }
.fv-carta img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.fv-carta em { position: absolute; top: 12px; left: 12px; font-style: normal; font-weight: 900; font-size: 12px; background: var(--color-accent); border-radius: 999px; padding: 0 7px; }
.fv-carta span { font-weight: 900; }
.fv-carta figcaption { position: absolute; bottom: -30px; left: 0; right: 0; }
.fv-seta { font-size: 30px; font-weight: 900; color: var(--color-leaf); }

/* ---------- novo bicho no bolso ---------- */
.passos-linha { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.passos-linha li { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: var(--radius-m); padding: 12px 14px; font-weight: 900; font-size: 17px; box-shadow: var(--shadow-s); }
.passos-linha b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--color-leaf); flex: none; }
.passos-linha li:nth-child(2) b { background: var(--color-accent); color: var(--text); }
.passos-linha li:nth-child(3) b { background: var(--color-terra); }
.passos-linha li:nth-child(4) b { background: var(--color-nature); }

/* ---------- palco 3D ---------- */
.palco3d { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; }
.janela3d { position: relative; display: block; min-height: 440px; border-radius: 32px; overflow: hidden; color: #fff; text-decoration: none; box-shadow: var(--shadow-m); background: #3B2A1D; }
.janela3d > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.janela3d::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 74, 58, .5), transparent 30%, transparent 55%, rgba(22, 74, 58, .9)); }
.j3d-topo { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 900; font-size: 18px; flex-wrap: wrap; }
.j3d-abas { display: flex; gap: 4px; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 4px; }
.j3d-abas i { font-style: normal; color: var(--text); font-size: 14px; padding: 4px 12px; border-radius: 999px; }
.j3d-abas i.on { background: var(--color-accent); }
.j3d-lado { position: absolute; right: 16px; top: 74px; display: flex; flex-direction: column; gap: 8px; }
.j3d-lado i { font-style: normal; background: rgba(255, 255, 255, .92); color: var(--color-nature); font-weight: 900; font-size: 14px; border-radius: 16px; padding: 8px 12px; text-align: center; }
.j3d-base { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.j3d-base h2 { margin: 0; font-size: clamp(28px, 3.6vw, 40px); font-weight: 900; color: #fff; }
.j3d-base p { margin: 4px 0 0; font-size: 18px; color: #E5F2DC; }
.palco-lado { display: grid; gap: 18px; }
.mini { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-s); text-decoration: none; color: var(--text); }
.mini > img, .mini-duo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mini-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--line); }
.mini-duo img { width: 100%; height: 100%; object-fit: cover; }
.mini > div { padding: 12px 16px 16px; }
.mini b { display: block; font-size: 20px; font-weight: 900; color: var(--color-nature); }
.mini span { color: var(--text-soft); font-size: 15px; }
.palco-lado { align-content: start; }
.mini { flex-direction: row; align-items: center; }
.mini > img, .mini-duo { width: 120px; flex: none; aspect-ratio: 4 / 3; }
.mini > div { padding: 10px 14px; }
.mini b { font-size: 18px; }
.mini span { font-size: 14px; }
.colecoes-t { margin: 18px 0 8px; font-size: 19px; color: var(--color-nature); }
.colecoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.colecoes li { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: var(--radius-m); padding: 8px 12px; }
.colecoes li > div { flex: 1; min-width: 0; }
.colecoes b { display: block; font-size: 15px; }
.colecoes .barra { display: block; height: 8px; margin-top: 4px; }
.colecoes em { font-style: normal; font-weight: 800; font-size: 13px; color: var(--text-soft); white-space: nowrap; }
.colecoes li.completa { background: var(--color-accent-soft); }
.colecoes li.completa em { color: var(--color-nature); }
.col-emoji { font-size: 24px; }
.ver-mais { display: flex; justify-content: center; margin-top: 18px; }

/* ---------- famílias e escolas ---------- */
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bloco { background: var(--surface); border-radius: 32px; padding: 28px; box-shadow: var(--shadow-s); display: flex; flex-direction: column; align-items: flex-start; }
.bloco ul { align-self: stretch; }
.bloco-curu { width: 230px; height: auto; margin: -10px 0 4px -10px; }
.bloco .btn { margin-top: 18px; }
.roteiro { padding-left: 0; list-style: none; display: grid; gap: 8px; margin: 12px 0; }
.roteiro b { display: inline-block; min-width: 56px; color: var(--color-primary); }
.bloco h2 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 900; color: var(--color-nature); line-height: 1.15; }
.bloco p { margin: 0 0 12px; }
.bloco ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bloco li { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; }
.bloco li .ico { color: var(--color-leaf); margin-top: 3px; }
.bloco.escuro { background: var(--color-nature); color: #fff; }
.bloco.escuro h2 { color: #fff; }
.bloco.escuro p { color: #DCEBD9; }
.bloco.escuro li .ico { color: var(--color-accent); }
.bloco .contato { margin-top: 14px; font-weight: 800; color: var(--color-accent); }
.aventura { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--color-nature); color: #fff; border-radius: var(--radius-l); padding: 20px 24px; }
.aventura h2 { margin: 0; font-size: 26px; font-weight: 900; color: #fff; }
.aventura p { margin: 4px 0 0; color: #DCEBD9; }

/* ---------- catálogo ---------- */
.primeira { display: flex; align-items: center; gap: 14px; background: var(--color-accent-soft); border: 2px dashed var(--color-accent); border-radius: var(--radius-m); padding: 12px 16px; margin-bottom: 14px; font-size: 17px; }
.primeira b { display: block; color: var(--color-nature); font-size: 19px; }
.primeira .mascote { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid #fff; box-shadow: var(--shadow-s); }
.filtros { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.grade { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-l);
  overflow: hidden; box-shadow: var(--shadow-s); transition: transform .14s ease, box-shadow .14s ease;
}
.card:active { transform: scale(.98); }
.card-foto { position: relative; aspect-ratio: 16 / 10; background: var(--cor, var(--color-primary-soft)); display: grid; place-items: center; overflow: hidden; }
.card-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.card-foto.ok img { opacity: 1; }
.card-emoji { font-size: 60px; line-height: 1; }
.card-foto .badge { position: absolute; left: 10px; bottom: 10px; z-index: 2; }
.card-foto .badge-dentro { left: 10px; top: 10px; bottom: auto; }
.mini .badge-dentro { display: inline-flex; font-style: normal; margin-bottom: 4px; font-size: 12px; }
.card-foto .badge-ok { left: auto; right: 10px; top: 10px; bottom: auto; pointer-events: none; }
.card-corpo { padding: 12px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.15; }
.card i { color: var(--text-soft); font-size: 14px; line-height: 1.25; }
.card p { margin: 6px 0 12px; font-size: 15px; line-height: 1.35; }
.fatos { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fatos li { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px 3px 9px; font-size: 14px; font-weight: 800; color: var(--text); }
.fatos .ico { width: 15px; height: 15px; }
.fatos li:nth-child(1) .ico { color: var(--color-secondary); }
.fatos li:nth-child(2) .ico { color: #D84315; }
.fatos li:nth-child(3) .ico { color: var(--color-primary); }
/* o cartão inteiro abre a ficha; o selo "Explorar em 3D" fica por cima e leva ao 3D */
.card-abrir { position: absolute; inset: 0; z-index: 1; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.card-abrir:focus-visible { outline-offset: -3px; }
.vazio { text-align: center; padding: 30px; color: var(--text-soft); font-size: 18px; }

/* ---------- descobertas ---------- */
.descobertas { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.progresso-txt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.progresso-txt b { font-size: 22px; color: var(--color-nature); }
.barra { height: 12px; border-radius: 999px; background: var(--color-primary-soft); overflow: hidden; }
.barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-leaf), var(--color-lime)); transition: width .5s ease; }
.por-grupo { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.por-grupo li { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 15px; }
.por-grupo .ico { color: var(--color-primary); }
.album { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
/* cartas do bolso */
.carta {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-s); overflow: hidden; border: 3px solid #fff; padding: 0; cursor: pointer;
  background: var(--color-primary-soft); box-shadow: var(--shadow-s); font: inherit; color: inherit; text-align: center;
}
.carta img { width: 100%; height: 100%; object-fit: cover; }
.carta span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 4px 5px; font-size: 12px; font-weight: 900; color: #fff; background: linear-gradient(transparent, rgba(22, 74, 58, .9)); line-height: 1.15; }
.carta em { position: absolute; top: 5px; left: 5px; font-style: normal; font-size: 11px; font-weight: 900; background: var(--color-accent); color: var(--text); border-radius: 999px; padding: 0 6px; }
.carta i { position: absolute; top: 5px; right: 5px; font-style: normal; font-size: 11px; font-weight: 900; background: #fff; border-radius: 999px; padding: 0 6px; }
.carta.falta { background: repeating-linear-gradient(135deg, #F6EBD2 0 8px, #F1E3C4 8px 16px); border-color: #F6EBD2; box-shadow: inset 0 0 0 1.5px var(--line); }
.carta.falta em { background: #fff; color: var(--text-soft); }
.carta.falta .frente, .carta.falta .verso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; background: none; color: var(--text-soft); font-size: 12px; font-weight: 800; line-height: 1.25; }
.carta.falta .frente .ico { width: 26px; height: 26px; color: #C8B48F; }
.carta.falta .frente b { font-size: 18px; letter-spacing: 2px; }
.carta.falta .verso { opacity: 0; background: var(--color-accent-soft); color: var(--text); }
.carta.falta .verso b { color: var(--color-nature); font-size: 13px; }
.carta.falta .verso u { margin-top: 2px; color: var(--color-primary); font-weight: 900; }
.carta.falta.virada .frente { opacity: 0; }
.carta.falta.virada .verso { opacity: 1; }
.carta.falta.virada { animation: vira .35s ease; }
@keyframes vira { 50% { transform: scaleX(.05); } }
/* nível de explorador */
.nivel { display: flex; align-items: center; gap: 12px; background: var(--color-accent-soft); border-radius: var(--radius-m); padding: 10px 14px; margin-bottom: 14px; color: var(--text-soft); font-size: 15px; }
.nivel b { display: block; color: var(--color-nature); font-size: 19px; }
.nivel-emoji { font-size: 34px; line-height: 1; }
/* janela "Que bicho você encontrou?" */
.janela { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(15, 53, 41, .55); }
.janela .caixa { position: relative; width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border-radius: var(--radius-l); padding: 22px 18px 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.janela h2 { margin: 0 40px 4px 0; font-size: 26px; font-weight: 900; color: var(--color-nature); }
.janela .caixa > p { margin: 0 0 12px; color: var(--text-soft); }
.janela .fechar { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bg); cursor: pointer; display: grid; place-items: center; }
.escolha { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.escolha button { position: relative; aspect-ratio: 1; border-radius: var(--radius-m); overflow: hidden; border: 3px solid #fff; padding: 0; cursor: pointer; box-shadow: var(--shadow-s); background: var(--color-primary-soft); }
.escolha img { width: 100%; height: 100%; object-fit: cover; }
.escolha span { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 4px 5px; font-size: 13px; font-weight: 900; color: #fff; background: linear-gradient(transparent, rgba(22, 74, 58, .9)); line-height: 1.15; }
.escolha button:active { transform: scale(.95); }
.aviso-seg { margin: 14px 0 4px; background: var(--color-accent-soft); border-radius: var(--radius-s); padding: 8px 12px; font-weight: 800; font-size: 15px; }
.em-breve { margin: 6px 0 0; font-size: 14px; color: var(--text-soft); }
.hero-acoes .btn .ico { width: 1.3em; height: 1.3em; }
.missao h3 { margin: 6px 0 4px; font-size: 22px; font-weight: 900; color: var(--color-nature); }
.missao > p { margin: 0 0 12px; color: var(--text-soft); }
.missao ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.missao li { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.missao li .caixa { width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--line); display: grid; place-items: center; color: transparent; flex: none; }
.missao li.ok .caixa { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.missao li button { margin-left: auto; background: none; border: 0; color: var(--color-secondary); font-weight: 800; font-size: 14px; cursor: pointer; padding: 6px 0; }
.missao .selo { margin-top: 14px; display: flex; align-items: center; gap: 10px; background: var(--color-accent-soft); border-radius: var(--radius-m); padding: 10px 14px; font-weight: 800; }
.missao .dica { margin-top: 12px; font-size: 14px; color: var(--text-soft); }

/* ---------- para adultos ---------- */
.adultos { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; background: var(--color-nature); color: #fff; border-radius: var(--radius-l); padding: clamp(22px, 4vw, 40px); }
.adultos h2 { color: #fff; }
.adultos > div > p { color: #DCEBD9; margin: 10px 0 0; font-size: 18px; }
.adultos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.adultos li { display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 255, 255, .08); border-radius: var(--radius-m); padding: 12px 14px; }
.adultos li .ico { color: var(--color-accent); width: 26px; height: 26px; margin-top: 1px; }
.adultos li b { display: block; }
.adultos li span { color: #DCEBD9; font-size: 15px; }

/* ---------- iPad vertical ---------- */
@media (max-width: 900px) {
  .hero2-in { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .hero2-curu { order: -1; max-width: 360px; margin: 0 auto; }
  .fala { right: -6px; }
  .destaques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .descobertas, .adultos { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- celular ---------- */
@media (max-width: 520px) {
  .hero2-in { padding-top: 14px; }
  .hero2-curu { max-width: 270px; }
  .fala { font-size: 13px; padding: 7px 11px; max-width: 150px; top: -10px; right: -18px; }
  .hero2 .hero-acoes .btn { flex: 1 1 100%; }
  .selos { font-size: 13px; gap: 6px 12px; }
  .cats { justify-content: flex-start; }
  .cat { width: 76px; font-size: 13px; } .cat span { width: 64px; height: 64px; }
  .destaques { gap: 10px; }
  .dest h3 { font-size: 17px; } .dest-corpo { padding: 9px 10px 11px; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { border-radius: var(--radius-m); }
  .card-corpo { padding: 9px 11px 12px; }
  .card h3 { font-size: 17px; }
  .card i { font-size: 12.5px; }
  .card p { display: none; }
  .fatos { margin-top: 8px; }
  .fatos li:nth-child(2) { display: none; }
  .fatos li { font-size: 12px; padding: 1px 8px 1px 6px; }
  .card-foto .badge { left: 7px; bottom: 7px; font-size: 11.5px; padding: 2px 8px; }
  .card-foto .badge-dentro { left: 10px; top: 10px; bottom: auto; }
.mini .badge-dentro { display: inline-flex; font-style: normal; margin-bottom: 4px; font-size: 12px; }
.card-foto .badge-ok { left: auto; bottom: auto; right: 7px; top: 7px; }
}

/* ---------- celular: seções da Home V2 ---------- */
@media (max-width: 520px) {
  .momento { grid-template-columns: minmax(0, 1fr); padding: 22px 16px 44px; border-radius: 24px; text-align: center; gap: 14px; }
  .momento-curu { width: 190px; margin: -6px auto -10px; }
  .momento small { margin-left: auto; margin-right: auto; }
  .momento .btn-g { width: 100%; }
  .fluxo-visual { gap: 4px; grid-column: auto; }
  .fv-foto img { width: 88px; height: 88px; border-width: 4px; }
  .fv-id { width: 92px; padding: 10px 6px; } .fv-id strong { font-size: 16px; } .fv-id b { font-size: 11px; }
  .fv-carta { width: 88px; } .fv-seta { font-size: 18px; } .fluxo-visual figcaption { font-size: 12px; }
  .passos-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .passos-linha li { font-size: 14px; padding: 10px; gap: 8px; min-width: 0; }
  .passos-linha b { width: 30px; height: 30px; }
  .palco-lado { grid-template-columns: minmax(0, 1fr); }
  .janela3d { min-height: 340px; border-radius: 24px; }
  .j3d-abas, .j3d-lado { display: none; }
  .j3d-base .btn-g { width: 100%; }
  .bloco { padding: 20px; border-radius: 24px; }
  .bloco .btn-g { width: 100%; white-space: normal; text-align: center; }
  .bloco-curu { width: 180px; }
}

/* Biblioteca 3D em destaque na home: trilho de itens que rola para o lado */
.bib-home { margin-top: 8px; }
.bib-home .secao-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bh-trilho { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 14px; scrollbar-width: none; }
.bh-trilho::-webkit-scrollbar { display: none; }
.bh-carta { flex: none; width: 168px; scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface); border-radius: var(--radius-l); padding: 0 0 14px; box-shadow: var(--shadow-m); overflow: hidden; transition: transform .15s ease; }
.bh-carta:hover { transform: translateY(-3px); }
.bh-carta img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: radial-gradient(circle at 50% 42%, #ffffff, #f1ead6 72%); }
.bh-carta b { padding: 10px 14px 0; font-size: 17px; font-weight: 900; color: var(--color-nature); line-height: 1.15; }
.bh-carta span { padding: 2px 14px 0; font-size: 14px; font-weight: 700; color: var(--text-soft); }
.bh-mais { justify-content: center; align-items: center; text-align: center; background: var(--color-accent-soft); padding: 18px 0; }
.bh-mais .bh-n { font-size: 44px; font-weight: 900; color: var(--color-nature); padding: 0; }
@media (min-width: 900px) { .bh-carta { width: 190px; } }