/* sansa · Biblioteca · v2 · 15/10/2026
   Só nas páginas da Biblioteca (depois de base.css). Cada seção tem o seu desenho:
   feira (alimentos), herbário (fitoterápicos), laboratório limpo (suplementos), painel escuro (marcadores).
   Tokens da LP (/paginas/base.css) + painel escuro da Biografia: #131F1A, #F2EDE1, ótimo #7FB890, média #C9803F, atenção #C4574A, foco #D0A95A. */

/* ---------- menu fixo da Biblioteca (v3, 16/10) ----------
   Uma cápsula só, presa no topo ao rolar; a seção atual vem preenchida. "Tudo" volta ao índice.
   No celular: "← Tudo" + a seção atual, que abre a lista das outras. */
/* gruda logo abaixo do cabeçalho flutuante; a faixa lisa do cabeçalho cresce para ficar atrás dele */
.bib-trilho { position: sticky; top: 84px; z-index: 61; margin-top: 14px; }
body:has(.bib-trilho) .nav-band.flutua-on::before { height: 155px; }
.bib-trilho > .in { display: flex; justify-content: center; }
.bib-abas { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; border: 1.5px solid rgba(29,40,35,.22); background: #FCFCFC; box-shadow: 0 10px 24px -18px rgba(29,40,35,.45); }
.bib-abas a { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; color: #2E3A34 !important; text-decoration: none; font: 600 14.5px 'Plus Jakarta Sans', sans-serif; white-space: nowrap; transition: background .15s; }
.bib-abas a:hover { background: #F2EADC; }
.bib-abas a[aria-current="page"] { background: #1D2823; color: #FAF5EC !important; }
/* interruptor: com o script ativo, quem pinta a seção atual é a pílula que desliza */
.bib-abas { position: relative; }
.bib-abas .ind { position: absolute; top: 5px; left: 0; height: 40px; border-radius: 999px; background: #1D2823; transition: transform .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1); z-index: 0; pointer-events: none; }
.bib-abas.com-ind a { position: relative; z-index: 1; transition: color .2s; }
.bib-abas.com-ind a[aria-current="page"] { background: transparent; color: #2E3A34 !important; }
.bib-abas.com-ind a.ativo { color: #FAF5EC !important; }
.bib-abas.com-ind a.ativo:hover { background: transparent; }
.escuro-pg .bib-abas .ind { background: #F2EDE1; }
.escuro-pg .bib-abas.com-ind a[aria-current="page"] { color: #C9CFC8 !important; }
.escuro-pg .bib-abas.com-ind a.ativo { color: #131F1A !important; }
@media (prefers-reduced-motion: reduce) { .bib-abas .ind { transition: none; } }
.bib-movel { display: none; }
.escuro-pg .bib-abas { background: #1B2A23; border-color: #2C3B34; }
.escuro-pg .bib-abas a { color: #C9CFC8 !important; }
.escuro-pg .bib-abas a:hover { background: #24342C; }
.escuro-pg .bib-abas a[aria-current="page"] { background: #F2EDE1; color: #131F1A !important; }
/* celular (16/10): uma barra só. "← Tudo" e a seção atual entram no cabeçalho, no lugar do "Começar grátis"
   (o botão continua na barra fixa de baixo). biblioteca.js move .bib-movel para dentro do cabeçalho. */
@media (max-width: 760px) {
  .bib-trilho { display: none; }
  body:has(.bib-trilho) .nav-band.flutua-on::before { height: 76px; }
  .nav { position: relative; }
  .nav:has(.bib-movel) .btn { display: none; }
  .bib-movel { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  .bm-tudo { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; font: 600 14px 'Plus Jakarta Sans', sans-serif; color: #2E3A34 !important; text-decoration: none; white-space: nowrap; }
  .bm-tudo.on { color: #1D2823 !important; }
  .bm-lista summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; background: #1D2823; color: #FAF5EC; font: 600 14px 'Plus Jakarta Sans', sans-serif; cursor: pointer; white-space: nowrap; }
  .bm-lista summary::-webkit-details-marker { display: none; }
  .bm-lista summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
  .bm-lista[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .bm-lista > div { position: absolute; right: 0; left: 0; top: calc(100% + 8px); display: flex; flex-direction: column; padding: 6px; border-radius: 20px; background: #FCFCFC; border: 1px solid rgba(29,40,35,.14); box-shadow: 0 22px 40px -22px rgba(29,40,35,.55); }
  .bm-lista > div a { padding: 12px 14px; border-radius: 14px; font: 500 15px 'Plus Jakarta Sans', sans-serif; color: #1D2823 !important; text-decoration: none; }
  .bm-lista > div a[aria-current="page"] { background: #F2EADC; font-weight: 600; }
}

.bib-cab { padding-block: 40px 28px; }
.bib-cab .pilha { gap: 14px; }
.vazio { padding: 40px 0; text-align: center; color: #6E8080; }
.rev { display: inline-block; align-self: flex-start; font-size: 11.5px; color: #A85F2E; border: 1px dashed #D9925E; border-radius: 999px; padding: 1px 8px; line-height: 1.5; }
.pt-rev { position: absolute; top: 12px; right: 12px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px dashed #D9925E; background: rgba(217,146,94,.18); }
.busca-l { width: 100%; max-width: 420px; height: 46px; border-radius: 999px; border: 1px solid rgba(29,40,35,.16); background: #FCFCFC; padding: 0 18px; font: 400 15px 'Plus Jakarta Sans', sans-serif; color: #1D2823; }
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.pilulas button { padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(29,40,35,.16); background: #FCFCFC; color: #2E3A34; font: 500 13.5px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.pilulas button.on { background: #1D2823; border-color: #1D2823; color: #FAF5EC; }
.filtro-rot { font: 600 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6E8080; margin: 4px 0 -2px; }
.barra-f { display: flex; flex-direction: column; gap: 12px; }
.conta { font-size: 13px; color: #6E8080; }

/* ---------- foto e espaço de foto ---------- */
.ft { display: block; position: relative; aspect-ratio: 1 / 1; width: 100%; }
.ft img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 18px 16px rgba(74, 52, 28, .20)) drop-shadow(0 3px 4px rgba(74, 52, 28, .12)); transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s; }
.ph { display: grid; place-items: center; }
.ph b { display: grid; place-items: center; width: 54%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F6EDDE 0%, #E9DBC4 70%, #E2D1B6 100%); box-shadow: 0 18px 22px -14px rgba(74,52,28,.35); font: 400 clamp(28px, 4.2vw, 46px)/1 'Fraunces', Georgia, serif; color: #A98C69; }
.ph-fito b { border-radius: 46% 54% 50% 50% / 60% 58% 42% 40%; background: radial-gradient(circle at 40% 30%, #EEF0E2 0%, #DDE2C8 75%); color: #7D8B5C; font-style: italic; }
.ph-supl b { width: 34%; aspect-ratio: 1 / 1.9; border-radius: 999px; background: linear-gradient(90deg, #E9C9A0 0%, #F4E1C4 45%, #DDB487 100%); color: #8A6236; font-size: clamp(22px, 3vw, 32px); box-shadow: none; }
.ph-marc b { background: #22322B; color: #D0A95A; box-shadow: none; }
.ft.mini { width: 30px; flex: 0 0 30px; }
.ft.mini img { inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 3px 3px rgba(74,52,28,.25)); }
.ft.mini b { width: 100%; font-size: 14px; box-shadow: none; }

/* ---------- conexões ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(29,40,35,.14); background: #FCFCFC; color: #1D2823 !important; text-decoration: none; font: 500 13.5px/1.25 'Plus Jakarta Sans', sans-serif; max-width: 100%; }
.chip:hover { border-color: #D9925E; }
.chip-m { background: #131F1A; border-color: #131F1A; color: #F2EDE1 !important; }
.chip-m i { width: 7px; height: 7px; border-radius: 50%; background: #D0A95A; flex: 0 0 7px; }
.chip-m:hover { border-color: #D0A95A; }
.chip-a { padding-left: 4px; }
.chip small { font: 600 9.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6E8080; }
.nota-l { font-size: 13px; color: #6E8080; max-width: 60ch; }
.nada { font-size: 14px; color: #8E9C96; }

/* ---------- a ficha (painel, comparação, página) ---------- */
.fh { font-size: 34px; line-height: 1.08; }
.ficha-topo { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; }
.ficha-topo .ft.grande { background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, #F4ECDD 70%); border-radius: 24px; }
.ficha-tit { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cien { font-style: italic; color: #6E8080; font-size: 16px; }
.bloco { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; margin-top: 20px; border-top: 1px solid #E6DCCB; }
.bloco h3 { font: 600 11.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6E8080; }
.bloco p { font-size: 16px; }
.ficha-link { display: inline-block; margin-top: 14px; font-size: 13.5px; }
.pn-corpo .aviso, .ficha-pg .aviso { margin-top: 22px; }

/* ---------- painel lateral / central / folha de baixo ---------- */
html.pn-aberto { overflow: hidden; }
.pn { position: fixed; inset: 0; z-index: 60; }
.pn-fundo { position: absolute; inset: 0; background: rgba(14, 21, 17, .42); opacity: 0; transition: opacity .22s; }
.pn.on .pn-fundo { opacity: 1; }
.pn-folha { position: absolute; top: 0; right: 0; bottom: 0; width: min(540px, 100%); background: #FBF7EE; box-shadow: -30px 0 60px -30px rgba(14,21,17,.45); transform: translateX(104%); transition: transform .26s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; color: #2E3A34; font-size: 16px; line-height: 1.55; }
.pn.on .pn-folha { transform: none; }
.pn-folha *, .pn-folha *::before, .pn-folha *::after { box-sizing: border-box; }
.pn-folha h2, .pn-folha h3, .pn-folha p { margin: 0; }
.pn-folha a { color: #A85F2E; }
.pn-x { position: absolute; top: 14px; right: 14px; z-index: 2; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(29,40,35,.18); background: #FCFCFC; font: 500 13px 'Plus Jakarta Sans', sans-serif; color: #1D2823; cursor: pointer; }
.pn-corpo { overflow-y: auto; overscroll-behavior: contain; padding: 64px 34px 40px; flex: 1; }
/* herbário: folha de papel */
.pn-fito .pn-folha { background: #F7F1E4; border-left: 1px solid #E2D5BC; }
.pn-fito .fh { font-style: normal; }
.pn-fito .cien { font: italic 400 22px/1.2 'Fraunces', Georgia, serif; color: #4E5A3A; }
/* laboratório: branco */
.pn-supl .pn-folha, .pn-cmp .pn-folha { background: #FCFCFC; }
.pn-cmp .pn-folha { width: min(980px, 100%); }
/* feira: central */
.pn-alim .pn-folha { top: 50%; left: 50%; right: auto; bottom: auto; width: min(880px, calc(100% - 48px)); max-height: calc(100% - 64px); border-radius: 28px; transform: translate(-50%, -46%) scale(.97); opacity: 0; transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.pn-alim.on .pn-folha { transform: translate(-50%, -50%); opacity: 1; }
.pn-alim .ficha-topo { grid-template-columns: 260px 1fr; }
.pn-alim .ficha-topo .ft.grande img { transform: scale(1.04); }

/* ---------- régua (marcadores) ---------- */
.regua { margin-top: 18px; }
.regua-barra { display: flex; gap: 4px; height: 12px; }
.regua-barra i { flex: 1; border-radius: 999px; transform: scaleX(0); transform-origin: left center; opacity: .2; transition: transform .55s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 110ms), opacity .4s calc(var(--i) * 110ms); }
.regua-barra .s-o { background: #7FB890; } .regua-barra .s-m { background: #C9803F; } .regua-barra .s-a { background: #C4574A; }
.regua-rot { display: flex; gap: 4px; margin-top: 10px; }
.regua-rot span { flex: 1; min-width: 0; text-align: center; font: 700 10px/1.25 'Plus Jakarta Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity .35s calc(var(--i) * 110ms + 250ms), transform .35s calc(var(--i) * 110ms + 250ms); }
.regua-rot .r-o { color: #7FB890; } .regua-rot .r-m { color: #C9803F; } .regua-rot .r-a { color: #C4574A; }
.regua-eixo { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: #8E9C96; }
.anima .regua-barra i { transform: none; opacity: 1; }
.anima .regua-rot span { opacity: 1; transform: none; }
.frase-d { margin-top: 12px !important; font-size: 14.5px; color: #D0A95A; }
@media (prefers-reduced-motion: reduce) { .regua-barra i, .regua-rot span, .ft img, .pn-folha { transition: none !important; } }

/* =========================================================
   ÍNDICE
   ========================================================= */
.semana { display: grid; grid-template-columns: 5fr 6fr; gap: 40px; align-items: center; background: radial-gradient(110% 120% at 20% 30%, #FFFFFF 0%, #F6EEDF 55%, #EFE3CF 100%); border-radius: 30px; padding: 36px 44px; }
.semana .sem-foto { max-width: 360px; width: 100%; justify-self: center; }
.semana .sem-foto .ft img { inset: 4%; width: 92%; height: 92%; }
.semana .sem-foto:hover .ft img { transform: scale(1.06) rotate(-2deg); }
.semana .sem-txt { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.semana h2.serif { font-size: 52px; line-height: 1; }
.portas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.porta { position: relative; display: flex; flex-direction: column; gap: 8px; border-radius: 24px; padding: 22px; min-height: 340px; text-decoration: none; color: #2E3A34 !important; overflow: hidden; transition: transform .2s; }
.porta:hover { transform: translateY(-3px); }
.porta h3 { font: 400 26px/1.1 'Fraunces', Georgia, serif; color: #1D2823; }
.porta p { font-size: 14.5px; }
.porta .qt { font: 600 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6E8080; }
.porta .vis { margin-top: auto; }
.porta-alim { background: radial-gradient(120% 100% at 30% 20%, #FFFFFF 0%, #F4EAD8 70%); }
.porta-alim .vis { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-inline: -6px; }
.porta-alim .vis .ft img { inset: 6%; width: 88%; height: 88%; }
.porta-alim:hover .vis .ft img { transform: scale(1.08); }
.porta-fito { background: #F4EDDF; border: 1px solid #E2D5BC; }
.porta-fito .vis { border: 1px solid #CDBF9F; outline: 1px solid #CDBF9F; outline-offset: 3px; padding: 14px 16px; background: #FBF7EE; }
.porta-fito .vis i { display: block; font: italic 400 22px/1.15 'Fraunces', Georgia, serif; color: #4E5A3A; }
.porta-fito .vis small { display: block; margin-top: 4px; font: 600 10.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8A7B5C; }
.porta-supl { background: #FCFCFC; border: 1px solid rgba(29,40,35,.08); }
.porta-supl .vis { display: flex; align-items: flex-end; justify-content: center; gap: 14px; height: 120px; border-bottom: 2px solid #E3E7E5; }
.porta-supl .vis span { width: 34px; border-radius: 999px; background: linear-gradient(90deg, #E9C9A0 0%, #F4E1C4 45%, #DDB487 100%); }
.porta-supl .vis span:nth-child(1) { height: 66px; } .porta-supl .vis span:nth-child(2) { height: 92px; } .porta-supl .vis span:nth-child(3) { height: 54px; }
.porta-marc { background: #131F1A; }
.porta-marc h3 { color: #F2EDE1; } .porta-marc p { color: #C9CFC8; } .porta-marc .qt { color: #D0A95A; }
.porta-marc .vis .regua-eixo { color: #7E8C85; }
.resultados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.res { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: #FCFCFC; border: 1px solid rgba(29,40,35,.08); text-decoration: none; color: #1D2823 !important; min-width: 0; }
.res:hover { border-color: #D9925E; }
.res .ft.mini, .res .ph-marc { width: 40px; flex: 0 0 40px; }
.res .ph-marc b { width: 100%; font-size: 16px; }
.res span:last-child { display: flex; flex-direction: column; min-width: 0; }
.res small { font: 600 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6E8080; }
.res b { font-weight: 500; font-size: 15px; overflow-wrap: anywhere; }

/* =========================================================
   ALIMENTOS FUNCIONAIS · a feira
   ========================================================= */
.feira-sec { background: linear-gradient(180deg, #FAF5EC 0%, #F5ECDD 100%); }
.banca { padding-top: 34px; }
.banca h2.serif { font-size: 30px; display: flex; align-items: baseline; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #E3D6C0; margin-bottom: 18px; }
.banca h2 small { font: 500 13px 'Plus Jakarta Sans', sans-serif; color: #8E9C96; }
.bancada { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 8px 16px; border-radius: 22px; text-decoration: none; color: #1D2823 !important; background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #FBF5EA 55%, rgba(251,245,234,0) 72%); transition: background .2s; min-width: 0; }
.tile:hover .ft img { transform: scale(1.14) translateY(-4px); filter: drop-shadow(0 26px 20px rgba(74,52,28,.24)) drop-shadow(0 4px 5px rgba(74,52,28,.12)); }
.tile:hover .ph b { transform: scale(1.06); }
.ph b { transition: transform .3s; }
.tile-nome { font: 400 18px/1.15 'Fraunces', Georgia, serif; text-align: center; overflow-wrap: anywhere; }
.tile-cien { font-size: 12px; font-style: italic; color: #7C8A84; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================================================
   FITOTERÁPICOS · o herbário
   ========================================================= */
.herb-sec { background: #EFE6D3; }
.herbario { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.exsicata { position: relative; display: flex; flex-direction: column; background: #FBF7EE; border: 1px solid #E2D5BC; border-radius: 18px; padding: 0; overflow: hidden; text-decoration: none; color: #2E3A34 !important; box-shadow: 0 1px 0 #E2D5BC, 0 22px 30px -26px rgba(60,48,24,.55); transition: transform .2s, box-shadow .2s; min-width: 0; }
.exsicata:hover { transform: translateY(-3px); box-shadow: 0 1px 0 #E2D5BC, 0 30px 36px -26px rgba(60,48,24,.6); }
.exsicata .ft { aspect-ratio: 4 / 3.4; background: #F4EDDF; border-radius: 0; }
.exsicata .ph b { width: 48%; }
.exsicata .etiqueta { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 20px; border-top: 1px solid #E8DCC4; }
.ex-cien { font: italic 400 13.5px/1.3 'Plus Jakarta Sans', sans-serif; color: #6F7A5A; overflow-wrap: anywhere; }
.ex-nome { font: 400 22px/1.15 "Fraunces", Georgia, serif; color: #1D2823; overflow-wrap: anywhere; }
.ex-hist { margin-top: 8px; font: 400 13.5px/1.55 'Plus Jakarta Sans', sans-serif; color: #5E6A63; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ex-hist.vazia { color: #A39A86; font-style: italic; }
.herb-sec .pilulas button { background: #FBF7EE; border-color: #D6C8AB; }
.herb-sec .pilulas button.on { background: #3F4A2E; border-color: #3F4A2E; color: #FBF7EE; }
.herb-sec .pilulas button[data-v] { min-width: 38px; }

/* =========================================================
   SUPLEMENTOS · laboratório limpo
   ========================================================= */
.lab-sec { background: #FCFCFC; }
.estante { padding-top: 34px; }
.estante h2 { font: 600 12px 'Plus Jakarta Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #1D2823; margin-bottom: 10px; display: flex; gap: 8px; }
.estante h2 small { color: #8E9C96; font-weight: 500; letter-spacing: .06em; }
/* prateleira em grade: quebra em linhas, cada linha com a sua tábua (sem rolagem lateral) */
.prateleira { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 0; row-gap: 26px; padding-top: 8px; }
.frasco { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; padding: 0 7px 14px; position: relative; border-bottom: 2px solid #E3E7E5; }
@media (max-width: 480px) { .prateleira { grid-template-columns: repeat(2, minmax(0, 1fr)); } .frasco .ft { width: 96px; } }
.frasco > a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: #1D2823 !important; width: 100%; }
.frasco .ft { width: 110px; }
.frasco > a:hover .ph b { transform: translateY(-4px); }
.fr-nome { font: 600 13.5px/1.3 'Plus Jakarta Sans', sans-serif; min-height: 2.6em; overflow-wrap: anywhere; }
.frasco .rev { align-self: center; font-size: 10.5px; }
.cmp { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(29,40,35,.2); background: #FFFFFF; font: 500 12.5px 'Plus Jakarta Sans', sans-serif; color: #2E3A34; cursor: pointer; }
.frasco.sel .cmp { background: #1D2823; border-color: #1D2823; color: #FCFCFC; }
.frasco.sel .ft { outline: 2px solid #D9925E; outline-offset: -2px; border-radius: 18px; }
.bandeja { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40; width: min(760px, calc(100% - 32px)); background: #1D2823; color: #F2EDE1; border-radius: 22px; padding: 12px 12px 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 24px 40px -20px rgba(14,21,17,.6); }
.bandeja[hidden] { display: none; }
.bj-itens { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.bj-item { display: inline-flex; align-items: center; gap: 6px; background: #2C3B34; border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; }
.bj-item button { border: 0; background: #3A4A42; color: #F2EDE1; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; line-height: 1; }
.bj-dica { font-size: 12.5px; color: #9DB0AC; }
.bj-acoes { display: flex; gap: 8px; flex: 0 0 auto; }
.bandeja .btn { height: 42px; padding: 0 16px; font-size: 14px; }
.bandeja .btn.sec { color: #F2EDE1 !important; border-color: rgba(242,237,225,.3); }
.bandeja .btn[disabled] { opacity: .45; cursor: default; }
.cp { margin-top: 18px; overflow-x: auto; }
.cp-linha { display: grid; grid-template-columns: repeat(var(--n), minmax(220px, 1fr)); gap: 16px; }
.cp-cel { font-size: 14.5px; line-height: 1.5; min-width: 0; }
.cp-cab .cp-cel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cp-cab .ft { width: 92px; }
.cp-cab b { font: 400 21px/1.15 'Fraunces', Georgia, serif; color: #1D2823; }
.cp-cab small { font-size: 12px; color: #6E8080; text-transform: uppercase; letter-spacing: .1em; }
.cp-rot { font: 600 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6E8080; padding: 16px 0 8px; margin-top: 16px; border-top: 1px solid #E6E9E7; position: sticky; left: 0; }
.cp-cel .chips { margin-top: 10px; }
.cp-cel .chip { font-size: 12.5px; min-height: 30px; }
html.com-bandeja .fim { padding-bottom: 120px; }

/* =========================================================
   MARCADORES · o painel escuro da Biografia
   ========================================================= */
.escuro-pg { background: #131F1A; color: #F2EDE1; display: flow-root; } /* flow-root: a margem do menu fica dentro do verde */
.escuro-pg .k { color: #D0A95A; }
.escuro-pg .serif, .escuro-pg h1 { color: #F2EDE1; }
.escuro-pg .lead { color: #C9CFC8; }
.escuro-pg .aviso { color: #9DB0AC; border-left-color: #D0A95A; }
.escuro-pg .migalha, .escuro-pg .migalha a, .escuro-pg .conta { color: #9DB0AC; }
.escuro-pg .busca-l { background: #1B2A23; border-color: #2C3B34; color: #F2EDE1; }
.escuro-pg .busca-l::placeholder { color: #7E8C85; }
.escuro-pg .pilulas button { background: transparent; border-color: #2C3B34; color: #C9CFC8; }
.escuro-pg .pilulas button.on { background: #D0A95A; border-color: #D0A95A; color: #131F1A; }
.escuro-pg .filtro-rot { color: #7E8C85; }
.marc-sec { border-top: 0 !important; padding-top: 8px; }
.mg { padding-top: 30px; }
.mg > h2.k { padding-bottom: 10px; border-bottom: 1px solid #2C3B34; }
.mk { border-bottom: 1px solid #22322B; }
.mk summary { position: relative; list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 30px 16px 0; }
.mk summary::-webkit-details-marker { display: none; }
.mk summary::after { content: "+"; position: absolute; right: 2px; top: 13px; color: #D0A95A; font-size: 20px; }
.mk[open] summary::after { content: "\2013"; }
.mk summary:hover .mk-nome { color: #FFFFFF; }
.mk-nome { font: 400 22px/1.2 'Fraunces', Georgia, serif; color: #F2EDE1; }
.mk-info { font-size: 12.5px; color: #7E8C85; white-space: nowrap; }
.mk .pt-rev { top: 22px; right: 26px; }
.mk-corpo { padding: 4px 0 28px; max-width: 760px; }
.mk-corpo .k:first-child, .mk-corpo .fh { display: none; }
.mk-corpo .lead, .ficha-pg.fp-marc .lead { color: #E2DDD1; font-size: 17px; margin-top: 4px; }
.escuro-pg .bloco, .fp-marc .bloco { border-top-color: #22322B; }
.escuro-pg .bloco h3, .fp-marc .bloco h3 { color: #9DB0AC; }
.escuro-pg .bloco p, .fp-marc .bloco p { color: #C9CFC8; }
.escuro-pg .chip, .fp-marc .chip { background: #1B2A23; border-color: #2C3B34; color: #F2EDE1 !important; }
.escuro-pg .chip:hover, .fp-marc .chip:hover { border-color: #D0A95A; }
.escuro-pg .chip small, .fp-marc .chip small { color: #9DB0AC; }
.escuro-pg .nada, .escuro-pg .nota-l, .fp-marc .nada, .fp-marc .nota-l { color: #8E9C96; }
.escuro-pg .rev, .fp-marc .rev { color: #E0A877; border-color: #C9803F; }
.escuro-pg .ficha-link, .fp-marc .ficha-link { color: #D0A95A; }
.escuro-pg .aviso { margin-top: 18px; }

/* ficha em página própria */
.ficha-pg { max-width: 860px; }
.ficha-pg .fh { font-size: 48px; }
.fp-marc { background: #131F1A; color: #F2EDE1; border-radius: 28px; padding: 40px 40px 34px; max-width: 900px; }
.fp-marc .k { color: #D0A95A; } .fp-marc .fh { color: #F2EDE1; }
.fp-marc .aviso { color: #9DB0AC; border-left-color: #D0A95A; }
.fp-fito { background: #FBF7EE; border: 1px solid #E2D5BC; border-radius: 8px; padding: 34px; }
.fp-fito .cien { font: italic 400 26px/1.2 'Fraunces', Georgia, serif; color: #4E5A3A; }
.fp-alim .ficha-topo { grid-template-columns: 280px 1fr; }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
  .bancada { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .herbario { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portas { grid-template-columns: 1fr 1fr; }
  .semana { grid-template-columns: 1fr 1fr; padding: 28px; gap: 24px; }
  .resultados { grid-template-columns: 1fr 1fr; }
  .bandeja { bottom: 84px; }
}
@media (max-width: 640px) {
  .bancada { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile-nome { font-size: 16px; }
  .herbario { grid-template-columns: 1fr 1fr; gap: 12px; }
  .exsicata { padding: 0; }
  .exsicata .etiqueta { padding: 12px 12px 14px; } .ex-nome { font-size: 18px; } .ex-hist { font-size: 12.5px; }
  .ex-cien { font-size: 12.5px; }
  .ex-hist { font-size: 12.5px; -webkit-line-clamp: 3; }
  .portas { grid-template-columns: 1fr; }
  .porta { min-height: 0; }
  .semana { grid-template-columns: 1fr; padding: 22px; }
  .semana .sem-foto { max-width: 220px; margin: 0 auto; width: 100%; }
  .semana h2.serif { font-size: 40px; }
  .resultados { grid-template-columns: 1fr; }
  .frasco { flex-basis: 128px; }
  .frasco .ft { width: 92px; }
  .bandeja { flex-direction: column; align-items: stretch; padding: 12px; border-radius: 18px; }
  .bj-acoes .btn { flex: 1; }
  .mk-nome { font-size: 19px; }
  .mk-info { display: none; }
  .fh { font-size: 28px; }
  .ficha-pg .fh { font-size: 34px; }
  /* 25/10, dono: foto e título na mesma linha, em 2 colunas, também no celular */
  .ficha-topo, .pn-alim .ficha-topo, .fp-alim .ficha-topo { grid-template-columns: minmax(0, 40%) 1fr; gap: 16px; }
  .ficha-topo .ft.grande { max-width: 200px; }
  .fp-marc, .fp-fito { padding: 24px 20px; border-radius: 20px; }
  /* folha de baixo */
  .pn .pn-folha, .pn-alim .pn-folha { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 88vh; height: 88vh; border-radius: 24px 24px 0 0; transform: translateY(104%); opacity: 1; border-left: 0; }
  .pn.on .pn-folha, .pn-alim.on .pn-folha { transform: none; }
  .pn-corpo { padding: 58px 20px 32px; }
  .pn-folha::before { content: ""; position: absolute; top: 8px; left: 50%; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: rgba(29,40,35,.2); }
  .cp-linha { grid-template-columns: repeat(var(--n), minmax(180px, 1fr)); }
}

/* hábitos ligados (ficha do marcador) */
.habitos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.habitos li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.45; }
.habitos li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: #7FB890; }

/* Marcadores: o painel escuro é um bloco arredondado em cima e embaixo, no raio do cartão da página */
.escuro-pg { border-radius: 36px; }
@media (max-width: 1024px) { .escuro-pg { border-radius: 26px; } }

/* Marcadores: respiro entre o painel escuro e o bloco final (os dois são escuros) */
/* depois da faixa na cor do fundo, o bloco final começa como uma seção creme de topo arredondado,
   e a caixa do CTA fica um pouco abaixo do início dela */
.escuro-pg + .fim { padding-top: calc(48px + 32px); background:
  linear-gradient(#F2EADC, #F2EADC) left top / 100% 48px no-repeat,
  radial-gradient(circle at 100% 100%, transparent 35.5px, #F2EADC 36px) left 0 top 48px / 36px 36px no-repeat,
  radial-gradient(circle at 0 100%, transparent 35.5px, #F2EADC 36px) right 0 top 48px / 36px 36px no-repeat; }
@media (max-width: 1024px) { .escuro-pg + .fim { padding-top: calc(32px + 20px); background:
  linear-gradient(#F2EADC, #F2EADC) left top / 100% 32px no-repeat,
  radial-gradient(circle at 100% 100%, transparent 25.5px, #F2EADC 26px) left 0 top 32px / 26px 26px no-repeat,
  radial-gradient(circle at 0 100%, transparent 25.5px, #F2EADC 26px) right 0 top 32px / 26px 26px no-repeat; } }

/* Biblioteca: os cantos sob a faixa ficam logo abaixo da faixa mais alta (cabeçalho + menu das seções) */
body:has(.bib-trilho) .nav-band.flutua-on::after { top: 155px; }
@media (max-width: 760px) { body:has(.bib-trilho) .nav-band.flutua-on::after { top: 76px; } }

/* Marcadores: os cantos de baixo do painel escuro ficam na cor do fundo da página (a mesma da separação),
   sem sobrar o creme do cartão por trás do arredondado */
.escuro-pg { position: relative; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.escuro-pg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; pointer-events: none;
  background: radial-gradient(circle at 100% 0, transparent 35.5px, #F2EADC 36px) left bottom / 36px 36px no-repeat, radial-gradient(circle at 0 0, transparent 35.5px, #F2EADC 36px) right bottom / 36px 36px no-repeat; }
@media (max-width: 1024px) {
  .escuro-pg::after { height: 26px; background: radial-gradient(circle at 100% 0, transparent 25.5px, #F2EADC 26px) left bottom / 26px 26px no-repeat, radial-gradient(circle at 0 0, transparent 25.5px, #F2EADC 26px) right bottom / 26px 26px no-repeat; }
}

/* Marcadores, topo do painel: um respiro na cor do fundo entre o cabeçalho e o painel, com os cantos
   (fim do bloco claro e início do painel escuro) também na cor do fundo, sem sobrar o creme do cartão */
.escuro-pg { margin-top: 48px; }
.escuro-pg::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-48px - 36px); height: calc(48px + 72px); pointer-events: none; background:
  radial-gradient(circle at 100% 0, transparent 35.5px, #F2EADC 36px) left top / 36px 36px no-repeat,
  radial-gradient(circle at 0 0, transparent 35.5px, #F2EADC 36px) right top / 36px 36px no-repeat,
  linear-gradient(#F2EADC, #F2EADC) left 0 top 36px / 100% 48px no-repeat,
  radial-gradient(circle at 100% 100%, transparent 35.5px, #F2EADC 36px) left 0 top 84px / 36px 36px no-repeat,
  radial-gradient(circle at 0 100%, transparent 35.5px, #F2EADC 36px) right 0 top 84px / 36px 36px no-repeat; }
@media (max-width: 1024px) {
  .escuro-pg { margin-top: 32px; }
  .escuro-pg::before { top: calc(-32px - 26px); height: calc(32px + 52px); background:
    radial-gradient(circle at 100% 0, transparent 25.5px, #F2EADC 26px) left top / 26px 26px no-repeat,
    radial-gradient(circle at 0 0, transparent 25.5px, #F2EADC 26px) right top / 26px 26px no-repeat,
    linear-gradient(#F2EADC, #F2EADC) left 0 top 26px / 100% 32px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 25.5px, #F2EADC 26px) left 0 top 58px / 26px 26px no-repeat,
    radial-gradient(circle at 0 100%, transparent 25.5px, #F2EADC 26px) right 0 top 58px / 26px 26px no-repeat; }
}

/* ---------- vitrine de Alimentos (16/10): o item em destaque, grande, e a fileira de miniaturas ---------- */
.vitr-sec { padding-block: 8px 24px !important; }
.vt-palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-radius: 36px; overflow: hidden; background: #1D2823; min-height: 440px; }
.vt-foto { display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #F0C79C 0%, #E3A574 55%, #D9925E 100%); border-radius: 0 36px 36px 0; padding: 32px; }
.vt-foto img { width: min(78%, 360px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(74,40,14,.28)); }
.vt-foto img.entra { animation: vt-entra .45s cubic-bezier(.2,.8,.2,1); }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.vt-info { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 44px 48px; color: #F2EDE1; }
.vt-info .k { color: #D9925E; }
.vt-nome { font-size: clamp(38px, 4.4vw, 60px); line-height: 1; color: #FAF5EC; margin: 4px 0 0; }
.vt-cien { font: italic 400 15px 'Plus Jakarta Sans', sans-serif; color: #9DB0AC; margin: 0; min-height: 1.2em; }
.vt-grupo { font: 600 11.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #C9CFC8; margin: 10px 0 0; }
.vt-txt { font-size: 15.5px; line-height: 1.55; color: #D7DED9; margin: 2px 0 0; max-width: 46ch; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.vt-areas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.vt-areas span { font-size: 12.5px; padding: 4px 12px; border-radius: 999px; border: 1px solid #2C3B34; background: #24342C; color: #C9CFC8; }
.vt-ver { align-self: flex-start; margin-top: 14px; color: #F2EDE1 !important; border-color: rgba(242,237,225,.3) !important; }
.vt-trilho { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.vt-seta { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(29,40,35,.16); background: #FCFCFC; font-size: 18px; color: #1D2823; cursor: pointer; }
.vt-seta:hover { background: #F2EADC; }
.vt-minis { flex: 1; min-width: 0; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 2px 6px; }
.vt-minis::-webkit-scrollbar { display: none; }
.vt-mini { flex: 0 0 auto; width: 118px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; scroll-snap-align: center; }
.vt-mini-f { display: grid; place-items: center; width: 118px; height: 118px; border-radius: 24px; background: #F2EADC; border: 2px solid transparent; transition: border-color .2s, background .2s; }
.vt-mini-f img { width: 76%; height: 76%; object-fit: contain; transition: transform .2s; }
.vt-mini:hover .vt-mini-f img { transform: translateY(-3px); }
.vt-mini-n { font: 600 13.5px 'Plus Jakarta Sans', sans-serif; color: #5E6A63; }
.vt-mini.on .vt-mini-f { border-color: #D9925E; background: #FBE9D8; }
.vt-mini.on .vt-mini-n { color: #1D2823; }
@media (max-width: 760px) {
  .vt-palco { grid-template-columns: 1fr; border-radius: 26px; min-height: 0; }
  .vt-foto { border-radius: 0 0 26px 26px; padding: 22px; order: -1; }
  .vt-foto img { width: min(62%, 240px); }
  .vt-info { padding: 22px 22px 26px; }
  .vt-nome { font-size: 36px; }
  .vt-seta { display: none; }
  .vt-mini, .vt-mini-f { width: 92px; } .vt-mini-f { height: 92px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { .vt-foto img.entra { animation: none; } }

/* algumas fotos aprovadas têm fundo claro: multiply funde o fundo na cor do bloco (as transparentes não mudam) */
.vt-foto img, .vt-mini-f img { mix-blend-mode: multiply; }

/* vitrine, ajuste 16/10: "Abrir a ficha" no canto superior direito do bloco escuro; no celular,
   foto + descrição + miniaturas cabem numa tela, sem rolar */
.vt-info { position: relative; }
.vt-ver { position: absolute; top: 36px; right: 36px; margin: 0; height: 38px; padding: 0 16px; font-size: 13.5px; }
@media (max-width: 760px) {
  .vt-foto { padding: 14px; }
  .vt-foto img { width: min(44%, 170px); }
  .vt-info { padding: 16px 18px 18px; gap: 4px; }
  .vt-info .k { font-size: 10.5px; }
  .vt-nome { font-size: 28px; margin-top: 2px; }
  .vt-cien { font-size: 13px; }
  .vt-grupo { font-size: 10.5px; margin-top: 4px; }
  .vt-txt { font-size: 13.5px; line-height: 1.45; -webkit-line-clamp: 3; }
  .vt-areas { gap: 4px; margin-top: 4px; }
  .vt-areas span { font-size: 11.5px; padding: 3px 10px; }
  .vt-ver { top: 12px; right: 12px; height: 32px; padding: 0 12px; font-size: 12.5px; }
  .vt-trilho { margin-top: 10px; }
  .vt-mini, .vt-mini-f { width: 72px; } .vt-mini-f { height: 72px; border-radius: 18px; }
  .vt-mini { gap: 5px; } .vt-mini-n { font-size: 12px; }
}

/* vitrine: o eyebrow é o grupo da feira; o nome científico vira legenda pequena, logo abaixo do nome */
.vt-info .k.vt-grupo { color: #D9925E; margin: 0; font-size: 12px; letter-spacing: .14em; }
.vt-info .vt-cien { font: italic 400 12.5px 'Plus Jakarta Sans', sans-serif; color: #8FA19C; margin: 0 0 4px; min-height: 0; }
@media (max-width: 760px) { .vt-info .k.vt-grupo { font-size: 10.5px; padding-right: 110px; } .vt-info .vt-cien { font-size: 11.5px; } }

/* vitrine no celular (16/10): quatro miniaturas por linha, com avançar e voltar discretos nas pontas */
@media (max-width: 760px) {
  .vt-trilho { gap: 4px; }
  .vt-seta { display: grid; place-items: center; width: 28px; height: 28px; border: 0; background: transparent; color: #8A968F; font-size: 16px; padding: 0; }
  .vt-seta:hover { background: transparent; color: #1D2823; }
  .vt-minis { gap: 8px; scroll-snap-type: x mandatory; }
  .vt-mini { flex: 0 0 calc((100% - 24px) / 4); width: auto; scroll-snap-align: start; }
  .vt-mini-f { width: 100%; height: auto; aspect-ratio: 1; }
  .vt-mini-n { font-size: 11.5px; line-height: 1.25; text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* vitrine em todas as seções (16/10): cor do bloco por seção, e a inicial no lugar da foto enquanto ela não existe */
.vt-foto .entra { animation: vt-entra .45s cubic-bezier(.2,.8,.2,1); }
.vt-ini { display: grid; place-items: center; border-radius: 50%; font-family: 'Fraunces', Georgia, serif; font-weight: 400; line-height: 1; }
.vt-ini.grande { width: min(56%, 260px); aspect-ratio: 1; font-size: clamp(72px, 9vw, 120px); }
.vt-mini-f .vt-ini { width: 62%; aspect-ratio: 1; font-size: 26px; }
.vitr-alim .vt-ini { background: radial-gradient(circle at 35% 30%, #F6EDDE 0%, #E9DBC4 70%, #E2D1B6 100%); color: #A98C69; }
/* Fitoterápicos: bloco sálvia, inicial em folha clara */
.vitr-fito .vt-foto { background: radial-gradient(circle at 40% 35%, #C9D3B4 0%, #A3B087 55%, #7D8B5C 100%); }
.vitr-fito .vt-ini { background: radial-gradient(circle at 35% 30%, #F4F6EC 0%, #DDE5C9 70%, #CBD6B1 100%); color: #5E6B42; box-shadow: 0 22px 30px -18px rgba(40,50,20,.4); }
.vitr-fito .vt-mini.on .vt-mini-f { border-color: #7D8B5C; background: #E6EBDA; }
/* Suplementos: bloco claro de laboratório, inicial como cápsula âmbar */
.vitr-supl .vt-foto { background: radial-gradient(circle at 40% 35%, #FFFFFF 0%, #F1F3F2 55%, #E3E7E5 100%); }
.vitr-supl .vt-ini { border-radius: 999px; background: linear-gradient(90deg, #E9C9A0 0%, #F4E1C4 45%, #DDB487 100%); color: #8A6236; }
.vitr-supl .vt-ini.grande { width: min(26%, 120px); aspect-ratio: 1 / 1.9; font-size: clamp(54px, 6vw, 76px); }
.vitr-supl .vt-mini-f .vt-ini { width: 34%; aspect-ratio: 1 / 1.9; font-size: 18px; }
.vitr-supl .vt-mini.on .vt-mini-f { border-color: #B9C4C0; background: #F1F3F2; }
@media (max-width: 760px) {
  .vt-ini.grande { width: min(40%, 150px); font-size: 64px; }
  .vitr-supl .vt-ini.grande { width: min(20%, 70px); font-size: 44px; }
  .vt-mini-f .vt-ini { font-size: 20px; }
}

/* vitrine do índice (16/10): as quatro seções; a cor do bloco acompanha a seção escolhida */
.vitr-marc .vt-foto { background: radial-gradient(circle at 40% 35%, #2A3B33 0%, #1B2A23 60%, #131F1A 100%); }
.vt-regua { display: flex; gap: 6px; width: min(70%, 320px); }
.vt-regua i { flex: 1; height: 14px; border-radius: 999px; background: #C4574A; }
.vt-regua i:nth-child(2), .vt-regua i:nth-child(4) { background: #C9803F; }
.vt-regua i:nth-child(3) { background: #7FB890; }
.vt-mini-f .vt-regua { width: 70%; gap: 3px; } .vt-mini-f .vt-regua i { height: 7px; }
/* miniaturas do índice: cada uma na cor da sua seção, independente da escolhida */
.vitr .vt-mini[data-t="fito"] .vt-mini-f .vt-ini { width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F4F6EC 0%, #DDE5C9 70%, #CBD6B1 100%); color: #5E6B42; font-size: 24px; box-shadow: none; }
.vitr .vt-mini[data-t="supl"] .vt-mini-f .vt-ini { width: 34%; aspect-ratio: 1 / 1.9; border-radius: 999px; background: linear-gradient(90deg, #E9C9A0 0%, #F4E1C4 45%, #DDB487 100%); color: #8A6236; font-size: 18px; }
.vitr .vt-mini[data-t="marc"] .vt-mini-f { background: #131F1A; }
.vitr-marc .vt-mini.on .vt-mini-f { border-color: #D0A95A; }

/* vitrine (16/10): o botão do canto vira a ação principal do bloco: cheio, na cor do CTA, com seta */
.vt-ver { display: inline-flex; align-items: center; gap: 8px; background: #D9925E !important; color: #1D2823 !important; border: 0 !important; font-weight: 600; box-shadow: none; transition: background .15s, transform .15s; }
.vt-ver::after { content: "→"; font-weight: 500; transition: transform .15s; }
.vt-ver:hover { background: #E3A574 !important; }
.vt-ver:hover::after { transform: translateX(3px); }

/* vitrine no desktop (16/10): as miniaturas ficam dentro do bloco verde, abaixo do texto */
@media (min-width: 761px) {
  .vt-info .vt-trilho { margin-top: 22px; padding-top: 20px; border-top: 1px solid #2C3B34; }
  .vt-info .vt-seta { width: 38px; height: 38px; background: transparent; border-color: rgba(242,237,225,.22); color: #F2EDE1; }
  .vt-info .vt-seta:hover { background: #24342C; }
  .vt-info .vt-mini, .vt-info .vt-mini-f { width: 92px; }
  .vt-info .vt-mini-f { height: 92px; border-radius: 20px; background: #EDE5D6; }
  .vt-info .vt-mini-n { color: #9DB0AC; font-size: 12.5px; }
  .vt-info .vt-mini.on .vt-mini-n { color: #FAF5EC; }
  .vt-info .vt-mini.on .vt-mini-f { border-color: #D9925E; background: #FBE9D8; }
  .vt-info .vt-mini[data-t="marc"] .vt-mini-f { background: #131F1A; }
  .vt-palco { min-height: 520px; }
}

/* vitrine no celular (16/10): o botão fica abaixo da legenda, não no canto */
@media (max-width: 760px) {
  .vt-ver { position: static; align-self: flex-start; margin-top: 12px; }
  .vt-info .k.vt-grupo { padding-right: 0; }
}

/* índice (16/10): a busca geral fica na coluna direita, ao lado do título */
.bib-cab-duo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; } /* a busca começa na mesma linha do título */
.bib-busca { gap: 10px; }
.bib-busca .busca-l { width: 100%; max-width: none; }
.bib-cab .resultados:not(:empty) { margin-top: 18px; }
@media (max-width: 900px) { .bib-cab-duo { grid-template-columns: 1fr; gap: 24px; } }

/* índice: o aviso fica na coluna da busca */
.bib-busca .aviso { margin-top: 8px; }
/* a contagem fica centralizada sob o campo de busca */
.bib-busca .conta { text-align: center; }

/* índice (16/10): a busca vira um cartão próprio, centrado na altura do título; tudo dentro dele centralizado,
   e o aviso como nota discreta separada por um fio (sem a barra laranja) */
.bib-cab-duo { align-items: center; }
.bib-busca { background: #F2EADC; border-radius: 28px; padding: 26px 28px 24px; text-align: center; align-items: stretch; }
.bib-busca .k { text-align: center; }
.bib-busca .busca-l { background: #FCFCFC; }
.bib-busca .aviso { margin: 14px 0 0; padding: 14px 0 0; border-left: 0; border-top: 1px solid #E2D6C1; font-size: 12.5px; line-height: 1.5; color: #7E8C85; text-align: center; }
@media (max-width: 900px) { .bib-busca { padding: 20px 18px 18px; border-radius: 24px; } }
.bib-busca .busca-l { text-align: center; } /* o texto do campo também centralizado */

/* vitrine no celular (16/10): o bloco da imagem tem a mesma altura em todos os itens (foto, inicial ou régua) */
@media (max-width: 760px) { .vt-foto { height: 200px; box-sizing: border-box; } .vt-foto img { max-height: 100%; } }
@media (max-width: 760px) { .vt-info { min-height: 216px; box-sizing: border-box; justify-content: flex-start; } } /* texto com altura mínima igual: o cartão não muda de tamanho entre itens */

/* ajuste fino (17/10): ritmo de 48px entre os blocos da Biblioteca, sem a linha colada na vitrine */
.bib-cab { padding-block: 40px 24px; }
.vitr-sec { padding-block: 24px 40px !important; border-top: 0 !important; }
@media (max-width: 760px) { .bib-cab { padding-block: 28px 16px; } .vitr-sec { padding-block: 16px 28px !important; } }

/* vitrine com categorias (17/10): pílulas acima das miniaturas; a categoria escolhida fica preenchida */
.vt-nav { display: flex; flex-direction: column; gap: 14px; }
.vt-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.vt-cats::-webkit-scrollbar { display: none; }
.vt-cat { flex: 0 0 auto; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(29,40,35,.18); background: transparent; font: 500 13px 'Plus Jakarta Sans', sans-serif; color: #2E3A34; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.vt-cat:hover { background: #F2EADC; }
.vt-cat.on { background: #1D2823; border-color: #1D2823; color: #FAF5EC; }
@media (min-width: 761px) {
  .vt-info .vt-nav { margin-top: 22px; padding-top: 20px; border-top: 1px solid #2C3B34; }
  .vt-info .vt-nav .vt-trilho { margin-top: 0; padding-top: 0; border-top: 0; }
  .vt-info .vt-cat { border-color: rgba(242,237,225,.2); color: #C9CFC8; }
  .vt-info .vt-cat:hover { background: #24342C; }
  .vt-info .vt-cat.on { background: #F2EDE1; border-color: #F2EDE1; color: #131F1A; }
}
@media (max-width: 760px) { .vt-nav { margin-top: 12px; gap: 10px; } }

/* vitrine (17/10): categorias num seletor (cápsula com a categoria atual, que abre a lista), no lugar da linha de pílulas que cortava */
.vt-catsel { position: relative; align-self: flex-start; }
.vt-catsel summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px 0 16px; border-radius: 999px; border: 1px solid rgba(29,40,35,.18); background: #FCFCFC; cursor: pointer; font: 500 13.5px 'Plus Jakarta Sans', sans-serif; color: #1D2823; white-space: nowrap; }
.vt-catsel summary::-webkit-details-marker { display: none; }
.vt-catsel summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.vt-catsel[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.vt-catsel-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8B978D; }
.vt-catsel summary b { font-weight: 600; }
.vt-catsel .vt-cats { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; display: flex; flex-direction: column; gap: 2px; min-width: 240px; max-height: 320px; overflow-y: auto; overflow-x: hidden; padding: 6px; border-radius: 18px; background: #FCFCFC; border: 1px solid rgba(29,40,35,.14); box-shadow: 0 22px 40px -22px rgba(29,40,35,.55); }
.vt-catsel .vt-cat { height: auto; padding: 10px 12px; border: 0; border-radius: 12px; text-align: left; color: #1D2823 !important; background: transparent; font-size: 14px; }
.vt-catsel .vt-cat:hover { background: #F2EADC; }
.vt-catsel .vt-cat.on { background: #F2EADC; color: #1D2823 !important; font-weight: 600; }
@media (min-width: 761px) {
  .vt-info .vt-catsel summary { background: transparent; border-color: rgba(242,237,225,.22); color: #F2EDE1; }
  .vt-info .vt-catsel-k { color: #8B978D; }
}
/* a lista de categorias pode sair do bloco: o bloco não corta mais, e a foto arredonda os próprios cantos */
.vt-palco { overflow: visible; }
.vt-foto { border-radius: 36px; }
@media (max-width: 760px) { .vt-foto { border-radius: 26px; } }

/* vitrine no celular (17/10): o botão ancora no fim do bloco, com respiro fixo acima; o texto fica em cima, sem vazio solto no meio */
@media (max-width: 760px) {
  .vt-info { padding-bottom: 20px; }
  .vt-info .vt-areas:not(:empty) { margin-top: 10px; }
  .vt-info > .vt-ver { position: static; }
  .vt-info .vt-txt:empty { display: none; }
  .vt-info .vt-ver { margin-bottom: 0; }
  .vt-info { gap: 6px; }
  .vt-info::after { content: none; }
}
.vt-info .vt-ver { flex: 0 0 auto; }
@media (max-width: 760px) { .vt-info { min-height: 252px; } } /* mesma altura em todos os itens, com o botão no fim */
@media (max-width: 760px) {
  .vt-info { min-height: 0; height: 300px; overflow: hidden; }
  .vt-nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vt-info .vt-areas { flex-wrap: nowrap; overflow: hidden; max-height: 28px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .vt-info .vt-areas span { flex: 0 0 auto; }
} /* altura fixa: nome até 2 linhas, legenda até 3, áreas numa linha */

/* seletor de categoria acima do cartão da vitrine (17/10) */
.vitr > .vt-catsel { display: block; margin: 0 0 14px; }
.vitr > .vt-catsel summary { background: #FCFCFC; border-color: rgba(29,40,35,.18); color: #1D2823; }

/* vitrine no celular (17/10): espaços fixos por parte (nome 2 linhas, científico 1, legenda 2, áreas 1) e o botão logo abaixo;
   mesma altura em todos os itens, sem vão sobrando */
@media (max-width: 760px) {
  .vt-info { height: auto !important; min-height: 0 !important; overflow: visible; }
  .vt-info .vt-nome { font-size: 26px; line-height: 1.08; min-height: calc(2 * 1.08em); }
  .vt-info .vt-cien { min-height: 1.3em; line-height: 1.3; }
  .vt-info .vt-txt { -webkit-line-clamp: 2 !important; min-height: calc(2 * 1.45em); display: -webkit-box !important; }
  .vt-info .vt-areas { min-height: 26px; margin-top: 8px !important; }
  .vt-info > :nth-last-child(2) { margin-bottom: 0; }
}
@media (max-width: 760px) { .vitr .vt-info .vt-cien { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* nome científico numa linha só */

/* vitrine das seções (índice, 17/10): sem os espaços de nome científico e áreas, que as seções não têm */
.vitr[data-modo="secoes"] .vt-info .vt-cien, .vitr[data-modo="secoes"] .vt-info .vt-areas { display: none !important; }
@media (max-width: 760px) { .vitr[data-modo="secoes"] .vt-info .vt-nome { min-height: 0; } .vitr[data-modo="secoes"] .vt-info .vt-txt { margin-top: 4px; } }

/* miniaturas dentro do bloco verde também no celular (17/10) */
@media (max-width: 760px) {
  .vt-info .vt-nav { margin-top: 18px; padding-top: 16px; border-top: 1px solid #2C3B34; }
  .vt-info .vt-trilho { margin-top: 0; }
  .vt-info .vt-mini-f { background: #EDE5D6; }
  .vt-info .vt-mini-n { color: #9DB0AC; }
  .vt-info .vt-mini.on .vt-mini-n { color: #FAF5EC; }
  .vt-info .vt-mini.on .vt-mini-f { border-color: #D9925E; background: #FBE9D8; }
  .vt-info .vt-mini[data-t="marc"] .vt-mini-f { background: #131F1A; border: 1px solid #2C3B34; }
  .vt-info .vt-seta { color: #9DB0AC; }
  .vt-info .vt-seta:hover { color: #F2EDE1; }
  .vt-info { overflow: visible; }
}
/* o bloco de texto não alarga por causa da fileira de miniaturas */
.vt-info, .vt-nav, .vt-trilho, .vt-minis { min-width: 0; }
@media (max-width: 760px) { .vt-palco { grid-template-columns: minmax(0, 1fr); } .vt-info { max-width: 100%; box-sizing: border-box; } }

/* vitrine no celular (17/10): o botão fica à direita do título, na mesma linha; menos espaço no bloco */
@media (max-width: 760px) {
  .vitr .vt-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: start; padding: 16px 18px 18px; }
  .vitr .vt-info > * { grid-column: 1 / -1; }
  .vitr .vt-info > .vt-grupo { grid-row: 1; }
  .vitr .vt-info > .vt-nome { grid-column: 1; grid-row: 2; }
  .vitr .vt-info > .vt-ver { grid-column: 2; grid-row: 2; align-self: start; margin: 2px 0 0 !important; position: static; height: 32px; padding: 0 12px; font-size: 12.5px; }
  .vitr .vt-info .vt-areas { margin-top: 4px !important; }
  .vitr .vt-info .vt-nav { margin-top: 10px; padding-top: 12px; }
  .vitr .vt-info .vt-mini-n { min-height: calc(2 * 1.25em); }
}
@media (max-width: 760px) {
  /* o botão alinha com a primeira linha do título */
  .vitr .vt-palco .vt-info > a.vt-ver.btn { align-self: start; margin: -2px 0 0 !important; }
  /* miniaturas com tamanho fixo: a fileira tem a mesma altura em todas as categorias */
  .vitr .vt-info .vt-mini { flex: 0 0 64px; width: 64px; }
  .vitr .vt-info .vt-mini-f { width: 64px; height: 64px; aspect-ratio: auto; border-radius: 16px; }
}

/* desktop (17/10): sem altura mínima nem conteúdo centrado; o bloco tem o tamanho do conteúdo, com respiro fixo */
@media (min-width: 761px) {
  .vt-palco { min-height: 0 !important; }
  .vt-info { justify-content: flex-start; padding: 40px 44px 32px; }
  .vt-info .vt-nav { margin-top: 20px; padding-top: 18px; }
  .vt-foto { min-height: 360px; }
}
@media (min-width: 761px) {
  .vitr .vt-info .vt-nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vitr .vt-info .vt-cien { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vitr .vt-info .vt-txt { -webkit-line-clamp: 3; }
  .vitr .vt-info .vt-areas { flex-wrap: nowrap; overflow: hidden; max-height: 30px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .vitr .vt-info .vt-areas span { flex: 0 0 auto; }
  .vitr .vt-info .vt-nav { margin-top: auto; }
  .vitr .vt-info > .vt-txt { margin-bottom: 0; }
  .vt-foto { min-height: 0; }
  .vt-foto img { width: min(70%, 300px); }
}

/* vitrine (17/10): o bloco segue o conteúdo; sem espaço reservado para texto que o item não tem,
   e as miniaturas logo depois do texto, com respiro fixo */
.vitr .vt-info .vt-cien:empty, .vitr .vt-info .vt-txt:empty, .vitr .vt-info .vt-areas:empty { display: none !important; }
.vitr .vt-info .vt-nome, .vitr .vt-info .vt-cien, .vitr .vt-info .vt-txt, .vitr .vt-info .vt-areas { min-height: 0 !important; }
@media (min-width: 761px) { .vitr .vt-info .vt-nav { margin-top: 20px !important; } .vt-palco { align-items: start; } .vt-foto { align-self: stretch; } }
@media (max-width: 760px) { .vitr .vt-info .vt-nav { margin-top: 12px; } }

/* ---------- 17/10: duas telas nas seções (vitrine e "Ver tudo"), filtros acima da vitrine ---------- */
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bib-cab .pilha > .k { margin: 0; }
.vitr-sec .barra-f { margin-bottom: 24px; }
.vt-vazio { display: none; }
.vt-sem > .vt-vazio { display: block; margin: 8px 0 0; }
.vt-sem > #vitrine, body.ver-todos #vitrine, body.ver-todos .vt-vazio { display: none !important; }
body:not(.ver-todos) #todos { display: none; }
.vt-pe { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 20px; }
.vt-pe .aviso { margin: 0; }
.vt-pe .ver-todos { flex: none; }
body.ver-todos .vt-pe { margin-top: 4px; }
body.ver-todos #todos { padding-top: 24px; border-top: 0; }
@media (max-width: 760px) { .vt-pe { flex-direction: column; align-items: stretch; } .vt-pe .ver-todos { width: 100%; justify-content: center; } }

/* vitrine com altura fixa (17/10): legenda com 4 linhas reservadas; o que sobra fica acima das miniaturas */
.vitr:not([data-modo="secoes"]) .vt-info .vt-txt { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 4 !important; overflow: hidden; height: calc(4 * 1.45em) !important; min-height: 0 !important; line-height: 1.45; }
.vitr:not([data-modo="secoes"]) .vt-info .vt-cien { min-height: 1.3em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vitr:not([data-modo="secoes"]) .vt-info .vt-cien:empty { display: block !important; }
.vitr:not([data-modo="secoes"]) .vt-info .vt-areas { display: flex !important; flex-wrap: nowrap; overflow: hidden; height: 30px; min-height: 0 !important; }
.vitr .vt-info .vt-nome { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (min-width: 761px) {
  .vitr:not([data-modo="secoes"]) .vt-info { height: var(--vt-h, auto) !important; }
  .vitr:not([data-modo="secoes"]) .vt-info .vt-nav { margin-top: auto !important; }
}
@media (max-width: 760px) {
  .vitr:not([data-modo="secoes"]) .vt-info { position: relative; height: var(--vt-hm, auto) !important; align-content: start; padding-bottom: calc(var(--vt-navm, 0px) + 18px); }
  .vitr:not([data-modo="secoes"]) .vt-info .vt-nav { position: absolute; left: 18px; right: 18px; bottom: 18px; margin: 0 !important; }
}
/* alturas medidas em 17/10 com o nome mais longo de cada seção (2 linhas): desktop 555px, celular 256px de texto + 121px de miniaturas */
.vitr { --vt-h: 560px; --vt-hm: 392px; --vt-navm: 133px; }
/* no celular cada fileira de filtro rola de lado, para a vitrine não descer para longe */
@media (max-width: 760px) {
  .vitr-sec .pilulas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .vitr-sec .pilulas::-webkit-scrollbar { display: none; }
  .vitr-sec .pilulas button { flex: none; }
  .vitr-sec .barra-f { margin-bottom: 18px; }
}

/* 17/10: no celular cada filtro vira um seletor (a fileira inteira não cabe numa linha) */
.pil-sel { display: none; }
@media (max-width: 760px) {
  .vitr-sec .pilulas { display: none; }
  .vitr-sec .pil-sel { display: block; width: 100%; height: 46px; border-radius: 999px; border: 1px solid rgba(29,40,35,.16); padding: 0 44px 0 18px; font: 500 15px 'Plus Jakarta Sans', sans-serif; color: #1D2823; -webkit-appearance: none; appearance: none; cursor: pointer;
    background: #FCFCFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231D2823' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center; }
  .vitr-sec .pil-sel:focus-visible { outline: 2px solid #D9925E; outline-offset: 2px; }
  .vitr-sec .barra-f .filtro-rot { margin-bottom: -4px; }
}

/* 17/10: no desktop os dois filtros ficam lado a lado, um por coluna */
@media (min-width: 761px) {
  .vitr-sec .barra-f { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 12px; align-items: start; }
  .vitr-sec .barra-f > * { grid-column: 1 / -1; }
  .vitr-sec .barra-f > p.filtro-rot:nth-of-type(1) { grid-column: 1; grid-row: 2; margin: 0; }
  .vitr-sec .barra-f > p.filtro-rot:nth-of-type(2) { grid-column: 2; grid-row: 2; margin: 0; }
  .vitr-sec .barra-f > div.pilulas:nth-of-type(1) { grid-column: 1; grid-row: 3; }
  .vitr-sec .barra-f > div.pilulas:nth-of-type(2) { grid-column: 2; grid-row: 3; }
  .vitr-sec .barra-f > .conta { grid-row: 4; }
}
/* com um filtro só (Fitoterápicos), ele ocupa a largura toda */
@media (min-width: 761px) {
  .vitr-sec .barra-f:not(:has(> div.pilulas ~ div.pilulas)) > p.filtro-rot,
  .vitr-sec .barra-f:not(:has(> div.pilulas ~ div.pilulas)) > div.pilulas { grid-column: 1 / -1; }
}
/* Marcadores, no celular: o mesmo seletor, nas cores do painel escuro */
@media (max-width: 760px) {
  .escuro-pg .pilulas { display: none; }
  .escuro-pg .pil-sel { display: block; width: 100%; height: 46px; border-radius: 999px; border: 1px solid #2C3B34; padding: 0 44px 0 18px; font: 500 15px 'Plus Jakarta Sans', sans-serif; color: #F2EDE1; -webkit-appearance: none; appearance: none; cursor: pointer;
    background: #1B2A23 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F2EDE1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center; }
  .escuro-pg .pil-sel option { color: #1D2823; background: #FCFCFC; }
  .escuro-pg .pil-sel:focus-visible { outline: 2px solid #D0A95A; outline-offset: 2px; }
}

/* 17/10: Marcadores no mesmo ritmo das outras seções: o menu fica no fundo da página, logo abaixo do cabeçalho,
   e o painel escuro começa colado nele, como o cartão claro das outras páginas */
.escuro-pg { margin-top: 0 !important; }
.escuro-pg::before { display: none !important; }
/* o painel escuro não encosta no menu: o mesmo respiro de 14px que separa o menu do cabeçalho */
@media (min-width: 761px) { .escuro-pg { margin-top: 14px !important; } }

/* Marcadores (17/10): depois de rolar, o menu das seções fica preso dentro do painel escuro.
   Uma faixa escura atrás do menu acompanha o topo do painel e para 14px acima do menu, com os cantos do painel */
@media (min-width: 761px) {
  body.menu-no-escuro .bib-trilho::before { content: ""; position: absolute; left: 0; right: 0; top: var(--esc-dy, -14px); bottom: -19px; z-index: -1; background: #131F1A; border-radius: 36px 36px 0 0; }
  body.menu-no-escuro .nav-band.flutua-on::after { display: none; }
}
@media (min-width: 761px) and (max-width: 1024px) { body.menu-no-escuro .bib-trilho::before { border-radius: 26px 26px 0 0; } }
/* 17/10: o menu das seções volta para dentro do painel escuro desde o início; o painel começa 14px abaixo do cabeçalho
   e o menu 14px abaixo do topo do painel */
/* a faixa passa 1px da máscara clara (não sobra fio branco entre as duas) e termina num fio cinza, o mesmo das divisórias do painel */
@media (min-width: 761px) { body.menu-no-escuro .bib-trilho::before { bottom: -20px; border-bottom: 1px solid #2C3B34; } }

/* Marcadores, desktop (17/10): o menu das seções fica metade fora e metade dentro do painel escuro.
   O menu na mesma altura das outras seções (14px do cabeçalho); o painel começa na linha do meio do menu.
   Ao rolar, a faixa escura atrás do menu também para no meio dele. A pílula é a clara, a mesma das outras seções. */
@media (min-width: 761px) {
  .escuro-pg { margin-top: 40px !important; }
  .escuro-pg > .bib-trilho { margin-top: -26px; }
  .escuro-pg .bib-abas { background: #FCFCFC; border-color: rgba(29,40,35,.22); }
  .escuro-pg .bib-abas a { color: #2E3A34 !important; }
  .escuro-pg .bib-abas a:hover { background: #F2EADC; }
  .escuro-pg .bib-abas a[aria-current="page"] { background: #1D2823; color: #FAF5EC !important; }
  .escuro-pg .bib-abas .ind { background: #1D2823; }
  .escuro-pg .bib-abas.com-ind a[aria-current="page"] { background: transparent; color: #2E3A34 !important; }
  .escuro-pg .bib-abas.com-ind a.ativo { color: #FAF5EC !important; }
  .escuro-pg .bib-cab { padding-top: 28px; }
}
/* o fio cinza sob a faixa só aparece quando o conteúdo já passa por baixo do menu (parado no topo, não) */
@media (min-width: 761px) { body:not(.menu-preso) .bib-trilho::before { border-bottom-color: transparent !important; } }

/* Marcadores, desktop (17/10): o bloco claro do cabeçalho fecha com cantos arredondados na linha em que o painel começa,
   e o painel abre com os seus; os quatro cantos ficam na cor do fundo da página */
@media (min-width: 761px) {
  body .escuro-pg::before { display: block !important; content: ""; position: absolute; left: 0; right: 0; top: -36px; height: 72px; pointer-events: none; background:
    radial-gradient(circle at 100% 0, transparent 35.5px, #F2EADC 36px) left top / 36px 36px no-repeat,
    radial-gradient(circle at 0 0, transparent 35.5px, #F2EADC 36px) right top / 36px 36px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 35.5px, #F2EADC 36px) left 0 top 36px / 36px 36px no-repeat,
    radial-gradient(circle at 0 100%, transparent 35.5px, #F2EADC 36px) right 0 top 36px / 36px 36px no-repeat; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  body .escuro-pg::before { top: -26px; height: 52px; background:
    radial-gradient(circle at 100% 0, transparent 25.5px, #F2EADC 26px) left top / 26px 26px no-repeat,
    radial-gradient(circle at 0 0, transparent 25.5px, #F2EADC 26px) right top / 26px 26px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 25.5px, #F2EADC 26px) left 0 top 26px / 26px 26px no-repeat,
    radial-gradient(circle at 0 100%, transparent 25.5px, #F2EADC 26px) right 0 top 26px / 26px 26px no-repeat; }
}

/* 17/10: as outras seções da Biblioteca (desktop) com o mesmo cabeçalho de Marcadores. O bloco claro do cabeçalho fecha
   na linha do meio do menu e o conteúdo abre logo ali, com os quatro cantos na cor do fundo; o menu fica metade em cada um.
   Ao rolar, o cartão do conteúdo sobe por trás do menu e para no meio dele. */
@media (min-width: 761px) {
  body:not(:has(.escuro-pg)) .bib-trilho::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 36px); height: 72px; z-index: -1; pointer-events: none; background:
    radial-gradient(circle at 100% 0, transparent 35.5px, #F2EADC 36px) left top / 36px 36px no-repeat,
    radial-gradient(circle at 0 0, transparent 35.5px, #F2EADC 36px) right top / 36px 36px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 35.5px, #F2EADC 36px) left 0 top 36px / 36px 36px no-repeat,
    radial-gradient(circle at 0 100%, transparent 35.5px, #F2EADC 36px) right 0 top 36px / 36px 36px no-repeat; }
  body:not(:has(.escuro-pg)) .bib-trilho::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; bottom: -20px; z-index: -2; pointer-events: none; background: #FAF5EC; border-radius: 36px 36px 0 0; }
  body:not(:has(.escuro-pg)) .nav-band.flutua-on::after { display: none; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  body:not(:has(.escuro-pg)) .bib-trilho::after { top: calc(50% - 26px); height: 52px; background:
    radial-gradient(circle at 100% 0, transparent 25.5px, #F2EADC 26px) left top / 26px 26px no-repeat,
    radial-gradient(circle at 0 0, transparent 25.5px, #F2EADC 26px) right top / 26px 26px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 25.5px, #F2EADC 26px) left 0 top 26px / 26px 26px no-repeat,
    radial-gradient(circle at 0 100%, transparent 25.5px, #F2EADC 26px) right 0 top 26px / 26px 26px no-repeat; }
  body:not(:has(.escuro-pg)) .bib-trilho::before { border-radius: 26px 26px 0 0; }
}

/* 17/10: filtros com largura padronizada no desktop. Toda pílula tem a largura da maior (212px, "Composição & Longevidade")
   e a fileira se divide em colunas iguais */
@media (min-width: 761px) {
  .pilulas { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 8px; }
  .pilulas button { width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 19/10 (dono): o filtro de benefício dos fitoterápicos em 2 colunas */
  .pilulas.pil-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 19/10 (dono): a busca da seção abaixo do eyebrow, à esquerda */
.cab-linha { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cab-linha .k { margin: 0; }
.cab-linha .busca-l { flex: none; width: 100%; max-width: 420px; }
@media (max-width: 760px) { .cab-linha { flex-direction: column; align-items: stretch; } .cab-linha .busca-l { flex: none; max-width: none; } }
/* sem a busca, os filtros começam na primeira linha da grade */
@media (min-width: 761px) {
  .vitr-sec .barra-f > p.filtro-rot:nth-of-type(1), .vitr-sec .barra-f > p.filtro-rot:nth-of-type(2) { grid-row: 1; }
  .vitr-sec .barra-f > div.pilulas:nth-of-type(1), .vitr-sec .barra-f > div.pilulas:nth-of-type(2) { grid-row: 2; }
  .vitr-sec .barra-f > .conta { grid-row: 3; }
}

/* 17/10: celular, topo das seções com um ritmo só: 16px entre eyebrow, busca, aviso e filtros */
@media (max-width: 760px) {
  .bib-cab .pilha { gap: 16px; }
  .bib-cab .pilha > .aviso { margin: 0; }
  .bib-cab:has(+ .marc-sec), .bib-cab:has(+ .vitr-sec) { padding-bottom: 16px !important; }
  .bib-cab + .marc-sec, .bib-cab + .vitr-sec { padding-top: 0 !important; }
  .marc-sec .barra-f, .vitr-sec .barra-f { gap: 16px; }
  .marc-sec .barra-f > .conta, .vitr-sec .barra-f > .conta { margin-top: -4px; }
  .vitr-sec .barra-f .filtro-rot { margin-bottom: -8px !important; }
}
@media (max-width: 760px) { .vitr-sec .barra-f { margin-bottom: 16px !important; } }

/* 17/10: o bloco do cabeçalho e o do conteúdo não se encostam mais. Entre os dois fica uma fresta de 16px na cor do fundo,
   atrás da linha do meio do menu (8px acima, 8px abaixo); o menu faz a ponte entre eles. Vale para todas as seções (desktop). */
@media (min-width: 761px) {
  body:not(:has(.escuro-pg)) .bib-trilho::after { top: calc(50% - 44px); height: 88px; background:
    radial-gradient(circle at 100% 0, transparent 35.5px, #F2EADC 36px) left top / 36px 36px no-repeat,
    radial-gradient(circle at 0 0, transparent 35.5px, #F2EADC 36px) right top / 36px 36px no-repeat,
    linear-gradient(#F2EADC, #F2EADC) left 0 top 36px / 100% 16px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 35.5px, #F2EADC 36px) left 0 top 52px / 36px 36px no-repeat,
    radial-gradient(circle at 0 100%, transparent 35.5px, #F2EADC 36px) right 0 top 52px / 36px 36px no-repeat; }
  body:not(:has(.escuro-pg)) .bib-trilho::before { top: calc(50% + 8px); }
  .escuro-pg { margin-top: 48px !important; }
  .escuro-pg > .bib-trilho { margin-top: -34px; }
  body .escuro-pg::before { top: -52px; height: 88px; background:
    radial-gradient(circle at 100% 0, transparent 35.5px, #F2EADC 36px) left top / 36px 36px no-repeat,
    radial-gradient(circle at 0 0, transparent 35.5px, #F2EADC 36px) right top / 36px 36px no-repeat,
    linear-gradient(#F2EADC, #F2EADC) left 0 top 36px / 100% 16px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 35.5px, #F2EADC 36px) left 0 top 52px / 36px 36px no-repeat,
    radial-gradient(circle at 0 100%, transparent 35.5px, #F2EADC 36px) right 0 top 52px / 36px 36px no-repeat; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  body:not(:has(.escuro-pg)) .bib-trilho::after { top: calc(50% - 34px); height: 68px; background:
    radial-gradient(circle at 100% 0, transparent 25.5px, #F2EADC 26px) left top / 26px 26px no-repeat,
    radial-gradient(circle at 0 0, transparent 25.5px, #F2EADC 26px) right top / 26px 26px no-repeat,
    linear-gradient(#F2EADC, #F2EADC) left 0 top 26px / 100% 16px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 25.5px, #F2EADC 26px) left 0 top 42px / 26px 26px no-repeat,
    radial-gradient(circle at 0 100%, transparent 25.5px, #F2EADC 26px) right 0 top 42px / 26px 26px no-repeat; }
  body .escuro-pg::before { top: -42px; height: 68px; background:
    radial-gradient(circle at 100% 0, transparent 25.5px, #F2EADC 26px) left top / 26px 26px no-repeat,
    radial-gradient(circle at 0 0, transparent 25.5px, #F2EADC 26px) right top / 26px 26px no-repeat,
    linear-gradient(#F2EADC, #F2EADC) left 0 top 26px / 100% 16px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 25.5px, #F2EADC 26px) left 0 top 42px / 26px 26px no-repeat,
    radial-gradient(circle at 0 100%, transparent 25.5px, #F2EADC 26px) right 0 top 42px / 26px 26px no-repeat; }
}

/* 19/10, proposta A do dono (desktop e tablet): cabeçalho e conteúdo num bloco só e o menu das seções vira uma fileira
   de abas logo abaixo do fio do cabeçalho, centralizada na horizontal (pedido do dono, 19/10). Sem fundo, sem sombra: a seção atual fica
   em grafite com um traço pêssego embaixo (o mesmo indicador que desliza ao trocar de seção). Ao rolar, a fileira fica
   presa logo abaixo da cápsula, como o topo arredondado do bloco; o menu nunca fica mais forte que o cabeçalho. */
@media (min-width: 761px) {
  .bib-trilho { position: sticky; top: 93px; z-index: 61; margin-top: 0; background: #FAF5EC; border-radius: 0; }
  body:has(.bib-trilho) .nav-band.flutua-on::before { height: 93px; }
  /* os cantos arredondados da máscara do topo passam por cima da fileira presa: ela vira o topo do bloco ao rolar */
  body:has(.bib-trilho) .nav-band.flutua-on::after { display: block !important; top: 93px; z-index: 62; }
  body:not(:has(.escuro-pg)) .bib-trilho::before, body:not(:has(.escuro-pg)) .bib-trilho::after { display: none; }
  .bib-trilho > .in { justify-content: center; border-bottom: 1px solid #E6DCCB; }
  /* um fio só: o do cabeçalho sai e o fio da fileira, na mesma largura e cor, fecha o cabeçalho */
  body:has(.bib-trilho) .nav-band .nav:not(.flutua) { border-bottom-color: transparent; }
  .bib-abas, .escuro-pg .bib-abas { display: inline-flex; width: auto; gap: 28px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .bib-abas a, .escuro-pg .bib-abas a { height: 52px; padding: 0; border-radius: 0; background: none !important; color: #5f6d67 !important; font: 500 14.5px 'Plus Jakarta Sans', sans-serif; }
  .bib-abas a:hover, .escuro-pg .bib-abas a:hover { color: #1d2823 !important; }
  .bib-abas a[aria-current="page"], .escuro-pg .bib-abas a[aria-current="page"] { color: #1d2823 !important; }
  .bib-abas.com-ind a[aria-current="page"], .escuro-pg .bib-abas.com-ind a[aria-current="page"] { color: #5f6d67 !important; }
  .bib-abas.com-ind a.ativo, .escuro-pg .bib-abas.com-ind a.ativo { color: #1d2823 !important; }
  .bib-abas .ind, .escuro-pg .bib-abas .ind { top: auto; bottom: -1px; height: 2px; border-radius: 2px; background: #d9925e; }
  /* Marcadores: a fileira fica no bloco claro e o painel escuro começa logo abaixo dela, com os cantos arredondados */
  .escuro-pg { margin-top: 0 !important; }
  .escuro-pg > .bib-trilho { margin-top: 0; }
  body .escuro-pg::before { display: none !important; }
  body:has(.escuro-pg) .bib-trilho::before { display: none !important; }
  body:has(.escuro-pg) .bib-trilho::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 36px; pointer-events: none; z-index: 0; background:
    radial-gradient(circle at 100% 100%, transparent 35.5px, #FAF5EC 36px) left top / 36px 36px no-repeat,
    radial-gradient(circle at 0 100%, transparent 35.5px, #FAF5EC 36px) right top / 36px 36px no-repeat; }
  body.menu-no-escuro .nav-band.flutua-on::after { display: block !important; }
  .escuro-pg .bib-cab { padding-top: 36px; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  body:has(.escuro-pg) .bib-trilho::after { height: 26px; background:
    radial-gradient(circle at 100% 100%, transparent 25.5px, #FAF5EC 26px) left top / 26px 26px no-repeat,
    radial-gradient(circle at 0 100%, transparent 25.5px, #FAF5EC 26px) right top / 26px 26px no-repeat; }
}

/* 20/10, pedido do dono: "O que você busca" em 3 colunas no desktop e no tablet (em 4 os nomes eram cortados) */

/* 20/10, pedido do dono: Marcadores no padrão das outras seções (fundo creme, vitrine, grade). A régua ocupa o lugar da foto,
   nas cores de status do design system; a vitrine dos marcadores fica clara como as outras */
.vitr-marc .vt-foto { background: radial-gradient(circle at 40% 35%, #FFFDF8 0%, #F2EDE1 60%, #ECE3D3 100%); }
.vt-regua i { background: #e0876c; }
.vt-regua i:nth-child(2), .vt-regua i:nth-child(4) { background: #e3b86a; }
.vt-regua i:nth-child(3) { background: #8fc9a2; }
.vitr-marc .vt-mini.on .vt-mini-f { border-color: #d9925e; background: #F7F1E6; }
.ft.ft-m { display: flex; align-items: center; justify-content: center; border-radius: 16px; background: radial-gradient(circle at 40% 35%, #FFFDF8 0%, #F2EDE1 70%, #ECE3D3 100%); }
.ft.ft-m .vt-regua { width: 62%; gap: 3px; }
.ft.ft-m .vt-regua i { height: 8px; }
/* 03/11: fotomicrografia do marcador, fundo branco da lâmina fundido ao creme do card */
img.mic { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: none; }
.ft.ft-m { overflow: hidden; }
.ft.ft-m img.mic { position: static; inset: auto; }
.tile:hover .ft.ft-m img.mic { transform: scale(1.06); filter: none; }
/* 20/10: a ficha aberta fica por cima da fileira de abas presa (z 61) e da máscara do topo (z 62) */
.pn { z-index: 64; }
/* a régua da ficha nas cores de status do design system (texto um tom mais escuro para ler sobre o creme) */
.regua-barra .s-o { background: #8fc9a2; } .regua-barra .s-m { background: #e3b86a; } .regua-barra .s-a { background: #e0876c; }
.regua-rot .r-o { color: #4f8a63; } .regua-rot .r-m { color: #a8792a; } .regua-rot .r-a { color: #b4543c; }

/* 20/10, pedido do dono: no desktop o botão da vitrine ficava por cima do título longo ("Alimentos funcionais").
   Igual ao celular: o botão ganha a sua própria coluna à direita do título, e o título quebra antes de chegar nele */
@media (min-width: 761px) {
  .vitr .vt-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-content: start; }
  .vitr .vt-info > * { grid-column: 1 / -1; }
  .vitr .vt-info > .vt-grupo { grid-column: 1; grid-row: 1; }
  .vitr .vt-info > .vt-nome { grid-column: 1; grid-row: 2; }
  .vitr .vt-info > .vt-ver { grid-column: 2; grid-row: 1 / 3; align-self: start; position: static !important; margin: 0 !important; }
}
/* "O que você busca" ao lado de outro filtro (Alimentos, Suplementos): o nome quebra em duas linhas em vez de ser cortado */
@media (min-width: 761px) {
  .pilulas.pil-2 button { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; height: auto; min-height: 46px; padding-block: 6px; }
}

/* ===== 03/11: ficha da produção (24 e 25/10) trazida para a Biblioteca da localhost ===== */
/* 24/10: fonte colada à frase escrita a partir dela */
.fonte { font-size: 12.5px; color: #8E9C96; white-space: nowrap; }
.fonte a { color: #A85F2E; text-decoration: none; }
.fonte a:hover { text-decoration: underline; }
.lead-fonte { font-size: 16px !important; margin-top: 10px !important; }
.fv-a.fpv-marc .lead-fonte { text-align: center; }
.fp-marc .fonte, .escuro-pg .fonte, .mk-corpo .fonte { color: #8E9C96; } .fp-marc .fonte a, .escuro-pg .fonte a, .mk-corpo .fonte a { color: #D0A95A; }

/* 25/10: bloco "O que tem" da ficha do alimento (proposta A, escolhida pelo dono): macros em blocos com número grande,
   vitaminas e minerais em barras de % VD, bioativos, nota com fonte. Sem cartão com borda */
.oqt { display: flex; flex-direction: column; gap: 18px; }
.comp-macros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.comp-m { background: #FCFCFC; border-radius: 12px; padding: 12px 14px; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.comp-m b { font: 400 24px/1 'Fraunces', serif; color: #1D2823; }
.comp-m b small { font: 500 12px 'Plus Jakarta Sans', sans-serif; color: #5f6d67; margin-left: 2px; }
.comp-m span { font: 600 10.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6E8080; }
/* barras de % VD (25/10, dono: 'mais elegante, soft e tech'): fio de 3px, trilho quase invisível, preenchimento em degradê
   pêssego que cresce ao abrir, número tabular em grafite com o 'VD' em cinza */
.comp-nut { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.comp-n { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: baseline; }
.comp-n b { font: 400 14px/1.2 'Plus Jakarta Sans', sans-serif; color: #2E3A34; letter-spacing: .01em; }
.comp-n em { font: 500 12.5px/1 'Plus Jakarta Sans', sans-serif; font-style: normal; color: #1D2823; font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.comp-n em small { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: #93a09a; margin-left: 3px; }
.comp-n i { grid-column: 1 / -1; display: block; height: 3px; border-radius: 999px; background: rgba(29,40,35,.07); overflow: hidden; }
.comp-n i::after { content: ''; display: block; height: 100%; width: var(--p); border-radius: 999px; background: linear-gradient(90deg, #d9925e, #ecbe97); animation: comp-cresce .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes comp-cresce { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .comp-n i::after { animation: none; } }
/* 25/10: cada barra abre um dropdown com o que o nutriente faz */
details.comp-n { align-self: start; }
details.comp-n summary { display: contents; cursor: pointer; list-style: none; }
details.comp-n summary::-webkit-details-marker { display: none; }
details.comp-n b::after { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 8px; border-right: 1.5px solid #93a09a; border-bottom: 1.5px solid #93a09a; transform: rotate(45deg); transition: transform .2s; }
details.comp-n[open] b::after { transform: rotate(-135deg); margin-bottom: 0; }
details.comp-n p { grid-column: 1 / -1; margin: 6px 0 4px; font-size: 13px; line-height: 1.55; color: #5f6d67; max-width: 52ch; }
/* 25/10, dono: abre e fecha deslizando, com o texto surgindo em fade; mais respiro entre as linhas */
.comp-nut { row-gap: 20px; }
details.comp-n[open] p { animation: nut-abre .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes nut-abre { from { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
details.comp-n b::after { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
details.comp-n summary:hover b::after { border-color: #d9925e; }
@media (prefers-reduced-motion: reduce) { details.comp-n[open] p { animation: none; } }
.comp-bio { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.comp-b { background: #FCFCFC; border-radius: 12px; padding: 14px 16px; }
.comp-b b { display: block; font: 600 14.5px/1.3 'Plus Jakarta Sans', sans-serif; color: #1D2823; }
.comp-b span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: #5f6d67; }
@media (max-width: 640px) { .oqt, .comp-macros, .fv-a .bloco > :not(h3) { min-width: 0; } .comp-macros { grid-template-columns: 1fr 1fr; } .comp-nut, .comp-bio { grid-template-columns: 1fr; } }

/* 25/10: chips de marcador claros na ficha (o escuro pesava), mais espaço entre chips, nota única no fim */
#ficha .chip-m { background: #FCFCFC; border-color: rgba(29,40,35,.14); color: #1D2823 !important; }
#ficha .chip-m i { background: #d9925e; }
#ficha .chip-m:hover { border-color: #d9925e; }
#ficha .chips { gap: 12px; }
#ficha .chip { min-height: 38px; padding: 6px 16px; }
/* 25/10, dono: na folha os chips de marcador também são claros, com mais espaço entre eles e até a nota */
.pn-corpo .chip-m { background: #FCFCFC; border-color: rgba(29,40,35,.14); color: #1D2823 !important; }
.pn-corpo .chip-m i { background: #d9925e; }
.pn-corpo .chip-m:hover { border-color: #d9925e; }
.pn-corpo .chips { gap: 12px; margin-top: 4px; }
.pn-corpo .chip { min-height: 38px; padding: 6px 16px; }
.pn-corpo .bloco:has(.chips) { gap: 14px; }
/* 25/10, dono: nota do "O que tem" no mesmo corpo e cor da nota final, e o mesmo respiro entre as partes do bloco */
.oqt .comp-bio { gap: 12px; }
.oqt .nota-l { margin-top: 2px; font-size: 13.5px; line-height: 1.6; color: #6E8080; max-width: none; } /* 04/11 (dono): a nota e a fonte numa linha só */
.oqt .nota-l .fonte, .oqt .nota-l .fonte a { font-size: inherit; }
.pn-corpo > .nota-fim { margin-top: 18px; font-size: 13.5px; line-height: 1.6; color: #6E8080; }
.fv-a > #ficha > .nota-fim { margin-top: 18px; }

/* 25/10, dono: na folha, foto à esquerda; eyebrow, nome e "De onde vem" à direita, em qualquer largura */
.pn-corpo:has(> .ficha-topo > .ft:not(.ft-m)) { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: 24px; align-content: start; }
.pn-corpo > .ficha-topo:has(> .ft:not(.ft-m)) > .ficha-tit { gap: 6px; }
.pn-corpo:has(> .ficha-topo > .ft:not(.ft-m)) > * { grid-column: 1 / -1; }
.pn-corpo > .ficha-topo:has(> .ft:not(.ft-m)) { display: contents; }
.pn-corpo > .ficha-topo:has(> .ft:not(.ft-m)) > .ft { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.pn-corpo > .ficha-topo:has(> .ft:not(.ft-m)) > .ficha-tit { grid-column: 2; grid-row: 1; align-self: end; }
.pn-corpo > .ficha-topo:has(> .ft:not(.ft-m)) + .bloco { grid-column: 2; grid-row: 2; align-self: start; border-top: 0; margin-top: 18px; padding-top: 16px; gap: 8px; position: relative; }
.pn-corpo > .ficha-topo:has(> .ft:not(.ft-m)) + .bloco::before { content: ''; position: absolute; top: 0; left: 0; width: 28px; height: 1px; background: #d9925e; }
.pn-corpo > .ficha-topo:has(> .ft:not(.ft-m)) + .bloco h3 { font-size: 10.5px; }
.pn-corpo > .ficha-topo:has(> .ft:not(.ft-m)) + .bloco p { font-size: 14px; line-height: 1.6; color: #5f6d67; max-width: 34ch; }
.pn-corpo > .ficha-topo:has(> .ft:not(.ft-m)) + .bloco + .bloco { margin-top: 28px; }
@media (min-width: 641px) { .pn-corpo:has(> .ficha-topo > .ft:not(.ft-m)) { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); column-gap: 36px; } .pn-corpo > .ficha-topo:has(> .ft:not(.ft-m)) + .bloco p { max-width: 46ch; } }
/* 25/10, dono: os cinco macros em duas linhas equilibradas, três em cima e dois embaixo */
@media (min-width: 641px) {
  .comp-macros:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .comp-macros:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .comp-macros:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
}

/* 25/10, dono: na folha as barras esperam o bloco aparecer e crescem uma depois da outra (40ms de intervalo) */
.pn-corpo .comp-n i::after { animation: none; width: 0; transition: width .9s cubic-bezier(.2,.8,.2,1) calc(var(--k, 0) * 40ms); }
.pn-corpo .comp-nut.vis .comp-n i::after { width: var(--p); }
@media (prefers-reduced-motion: reduce) { .pn-corpo .comp-n i::after { transition: none; width: var(--p); } }

/* 25/10, dono: na folha centralizada o marcador não tem foto; o topo vira uma coluna só (eyebrow, nome, explicação, régua) */
.pn .ficha-topo:not(:has(> .ft)) { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.pn .ficha-topo:not(:has(> .ft)) .fh { font-size: 40px; }
.pn .ficha-topo:not(:has(> .ft)) .lead { max-width: 60ch; }
.pn .ficha-topo:not(:has(> .ft)) .regua { width: 100%; margin-top: 8px; }

/* 25/10, dono: a nota "No método da Sansa..." logo abaixo dos chips ganha respiro e o mesmo corpo da nota final */
.pn-corpo > .bloco + .nota-l { margin-top: 22px; font-size: 13.5px; line-height: 1.6; color: #6E8080; }
.pn-corpo > .bloco + .nota-l + .bloco { margin-top: 28px; }
/* 03/11: o marcador com a imagem do microscópio (só na localhost) fica com o topo próprio: foto e nome lado a lado, explicação e régua abaixo */
.pn-corpo > .ficha-topo:has(> .ft-m) + .lead { margin-top: 22px; }


/* 03/11 (dono): mesmo padrão dos Fitoterápicos em todas as seções. As subcategorias (Grupos, Tipo)
   viram uma fileira horizontal na largura toda, acima de "O que você busca" */
@media (min-width: 761px) {
  .vitr-sec .barra-f > p.filtro-rot:nth-of-type(1) { grid-column: 1 / -1; grid-row: 1; }
  .vitr-sec .barra-f > div.pilulas:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; }
  .vitr-sec .barra-f > p.filtro-rot:nth-of-type(2) { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; }
  .vitr-sec .barra-f > div.pilulas:nth-of-type(2) { grid-column: 1 / -1; grid-row: 4; }
  .vitr-sec .barra-f > .conta { grid-row: 5; }
  .vitr-sec .barra-f > div.pilulas:not(.pil-2) { display: flex; flex-wrap: wrap; gap: 8px; }
  .vitr-sec .barra-f > div.pilulas:not(.pil-2) button { width: auto; flex: none; overflow: visible; }
}

/* 03/11 (dono): seções sem o destaque grande. Abas > subcategorias > grade de fotos com legenda, já aberta */
#vitrine, .vt-vazio, .vt-pe .ver-todos { display: none !important; }
body:not(.ver-todos) #todos { display: block; }
#todos { padding-top: 24px; border-top: 0; }
.vt-pe { margin-top: 4px; }

/* 03/11 (dono): topo enxuto. Busca, depois os dois filtros como botões lado a lado com o nome escrito,
   as etiquetas dos filtros ligados e a grade logo abaixo */
.vitr-sec .barra-f, .marc-sec .barra-f { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: flex-start !important; gap: 12px 14px; margin-bottom: 0 !important; }
.flt:has(.pil-sel[data-nome="Objetivo ou sintoma"]) { order: 1; }
.flt:has(.pil-sel[data-nome="Categoria"]) { order: 2; }
.vitr-sec .barra-f > p.filtro-rot, .vitr-sec .barra-f > div.pilulas { display: none !important; }
.flt { position: relative; display: flex; align-items: center; height: 46px; border-radius: 999px; border: 1px solid rgba(29,40,35,.16); background: #FCFCFC; cursor: pointer; }
.flt:focus-within { outline: 2px solid #D9925E; outline-offset: 2px; }
.flt-k { padding-left: 18px; font: 600 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6E8080; white-space: nowrap; pointer-events: none; }
.flt::after { content: ''; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid #1D2823; border-bottom: 1.5px solid #1D2823; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.vitr-sec .flt .pil-sel { display: block !important; width: auto; height: 44px; border: 0 !important; background: transparent !important; padding: 0 44px 0 10px; font: 500 15px 'Plus Jakarta Sans', sans-serif; color: #1D2823; -webkit-appearance: none; appearance: none; cursor: pointer; outline: none; box-shadow: none; }
.vitr-sec .barra-f > .conta { order: 10; flex-basis: 100%; margin: 0; }
.f-ativos { order: 11; display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
.f-ativos:empty { display: none; }
.f-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 0; background: #1D2823; color: #FAF5EC; font: 500 13px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.f-chip span { opacity: .7; font-size: 15px; line-height: 1; }
.vitr-sec { padding-bottom: 0 !important; }
.vt-pe.pe-grade { margin-top: 32px; }
@media (max-width: 760px) { .flt { width: 100%; } .vitr-sec .flt .pil-sel { flex: 1; width: 100%; } }
/* 03/11 (dono): busca e os dois filtros na mesma linha */
.vitr-sec .barra-f > .busca-f { order: 0; flex: 1 1 260px; max-width: 420px; width: auto; height: 46px; margin: 0; }
.bib-cab.cab-so-k { padding-bottom: 0 !important; }
.bib-cab.cab-so-k + .vitr-sec { padding-top: 14px !important; }
@media (max-width: 760px) { .vitr-sec .barra-f > .busca-f { flex-basis: 100%; max-width: none; } }
/* 03/11 (dono): no celular as 4 seções ficam dentro do bloco, numa fileira de abas que rola na horizontal.
   O cabeçalho volta a ter só a marca e o "Começar grátis" */
@media (max-width: 760px) {
  .bib-movel, .nav .bib-movel { display: none !important; }
  .nav:has(.bib-movel) .btn { display: inline-flex !important; }
  .bib-trilho { display: block !important; position: static; margin: 10px 0 0; }
  .bib-trilho > .in { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #E6DCCB; }
  .bib-trilho > .in::-webkit-scrollbar { display: none; }
  .bib-abas, .escuro-pg .bib-abas { display: inline-flex; gap: 22px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .bib-abas a, .escuro-pg .bib-abas a { height: 44px; padding: 0; border-radius: 0; background: none !important; color: #5f6d67 !important; font: 500 14.5px 'Plus Jakarta Sans', sans-serif; }
  .bib-abas.com-ind a.ativo, .escuro-pg .bib-abas.com-ind a.ativo, .bib-abas a[aria-current="page"] { color: #1d2823 !important; }
  .bib-abas .ind, .escuro-pg .bib-abas .ind { top: auto; bottom: 0; height: 2px; border-radius: 2px; background: #d9925e; }
  .bib-abas .ab-ind { display: none; }
}
/* 03/11 (dono): na página inicial, o filtro de objetivo ou sintoma vale para toda a Biblioteca */
.bib-busca .flt { margin-top: 10px; max-width: 420px; }
.bib-busca .flt .pil-sel { display: block !important; width: 100%; height: 44px; border: 0 !important; background: transparent !important; padding: 0 44px 0 10px; font: 500 15px 'Plus Jakarta Sans', sans-serif; color: #1D2823; -webkit-appearance: none; appearance: none; cursor: pointer; outline: none; }
@media (max-width: 760px) { .bib-abas, .escuro-pg .bib-abas { gap: 14px; } .bib-abas a, .escuro-pg .bib-abas a { font-size: 13.5px; } .bib-abas .ab-alim { font-size: 0 !important; } .bib-abas .ab-alim::after { content: "Alimentos"; font-size: 13.5px; } }
.bib-busca > .pilulas { display: none !important; }
.bib-busca .flt { width: 100%; }
@media (max-width: 760px) { .bib-trilho > .in { justify-content: center; } }
.bib-busca .flt, .bib-busca .f-ativos, .bib-busca .conta { order: 0 !important; }
.bib-busca .aviso { order: 20; }
/* 03/11 (dono): miniatura do marcador na busca sem sombra e sem quadrado branco: lâmina redonda fundida ao card */
.ft img[src*="/marc-"] { filter: none !important; object-fit: cover !important; border-radius: 50%; mix-blend-mode: multiply; box-shadow: none !important; }
/* 03/11 (dono): início da Biblioteca, objetivos numa grade em vez do seletor */
.in > .pilulas.obj-grade { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; order: 0 !important; width: 100%; margin: 4px 0 2px; }
.in > .pilulas.obj-grade button[data-v=""] { display: none; }
.in > .pilulas.obj-grade button { display: block; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid rgba(29,40,35,.12); border-radius: 12px; background: rgba(255,255,255,.55); font: 500 13.5px/1.25 'Plus Jakarta Sans', sans-serif; color: #1D2823; cursor: pointer; transition: border-color .15s, background .15s; }
.in > .pilulas.obj-grade button:hover { border-color: rgba(217,146,94,.55); }
.in > .pilulas.obj-grade button.on { background: #1D2823; border-color: #1D2823; color: #FCFCFC; }
.bib-busca .flt, .bib-busca .f-ativos { display: none !important; }
@media (max-width: 760px) { .in > .pilulas.obj-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.in > .pilulas.obj-grade button { display: flex; align-items: center; gap: 10px; }
.in > .pilulas.obj-grade .og-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: #C98551; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.in > .pilulas.obj-grade button.on .og-ic { stroke: #D9925E; }
/* 03/11 (dono): objetivos numa linha só, fora da caixa da busca: ícone em cima, nome embaixo */
.in > .pilulas.obj-grade { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 8px; margin: 0 0 20px; }
.in > .pilulas.obj-grade button { flex-direction: column; justify-content: flex-start; text-align: center; gap: 8px; padding: 14px 6px 12px; font-size: 12px; line-height: 1.25; min-height: 86px; }
.in > .pilulas.obj-grade .og-ic { width: 22px; height: 22px; }
@media (max-width: 1024px) { .in > .pilulas.obj-grade { display: flex !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .in > .pilulas.obj-grade::-webkit-scrollbar { display: none; } .in > .pilulas.obj-grade button { flex: 0 0 92px; } .in > .pilulas.obj-grade button[data-v=""] { display: none; } }
.pilulas.obj-grade + .flt, .pilulas.obj-grade ~ .f-ativos { display: none !important; }
.in > .pilulas.obj-grade { margin-top: 28px !important; }
/* 03/11 (dono): a linha de objetivos fica presa abaixo do cabeçalho ao rolar */
.in > .pilulas.obj-grade { position: sticky; z-index: 20; transition: box-shadow .2s, padding .2s; border-radius: 16px; }
.in > .pilulas.obj-grade.presa { background: rgba(250,245,236,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 6px; box-shadow: 0 8px 24px -14px rgba(29,40,35,.35); }
.in > .pilulas.obj-grade.presa button { min-height: 0; padding: 8px 4px; gap: 4px; }
/* 03/11 (dono): nas seções o seletor de objetivo some (a grade substitui) */
.barra-f .flt:has(select[data-nome="Objetivo ou sintoma"]), .f-chip[data-n="Objetivo ou sintoma"] { display: none !important; }
#todos > .in > .pilulas.obj-grade { margin-top: 0 !important; }
/* 03/11 (dono): categoria escrita no card; o seletor de categoria sai */
.barra-f .flt:has(select[data-nome="Categoria"]), .f-chip[data-n="Categoria"] { display: none !important; }
.tile-k { display: block; font: 600 10px/1.2 'Plus Jakarta Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8A968F; margin: 10px 0 3px; text-align: center; }
.frasco .tile-k { margin-top: 8px; }
/* 03/11 (dono): eyebrow, busca e contagem numa linha só */
.vitr-sec .barra-f { flex-wrap: nowrap !important; align-items: center !important; gap: 20px !important; }
.vitr-sec .barra-f .k-f { margin: 0 !important; white-space: nowrap; flex: none; }
.vitr-sec .barra-f .conta { width: auto !important; flex: none; margin: 0 0 0 auto !important; order: 9 !important; white-space: nowrap; }
.vitr-sec .barra-f .f-ativos:empty { display: none; }
@media (max-width: 760px) { .vitr-sec .barra-f { flex-wrap: wrap !important; gap: 10px !important; } .vitr-sec .barra-f .busca-f { order: 5; flex: 1 1 100%; max-width: none; } }
/* 03/11 (dono): busca no canto direito da faixa das categorias */
.bib-trilho > .in { position: relative; }
.bib-trilho .busca-t { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: min(260px, 24vw); height: 36px; padding: 0 16px; font-size: 13.5px; border-radius: 999px; margin: 0; }
@media (max-width: 1180px) { .bib-trilho .bib-abas { justify-content: flex-start !important; } }
/* 03/11 (dono): sem nome científico na legenda dos cards (fica na ficha) */
.tile:not(.tile-m) .tile-cien, .exsicata .ex-cien { display: none !important; }
/* 03/11 (dono): sem a faixa "Biblioteca · Seção" e a contagem nas seções */
.vitr-sec .barra-f .k-f, .vitr-sec .barra-f .conta { display: none !important; }
.bib-cab.cab-so-k { display: none !important; }
.vitr-sec:has(.barra-f .busca-f) .barra-f:not(:has(.busca-f)) { display: none !important; }
/* 03/11 (dono): presa, a linha de objetivos vira continuação da faixa das categorias (mesmo fundo, sem cartão flutuando) */
.in > .pilulas.obj-grade.presa { background: #FAF5EC !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0 !important; padding: 10px 0 12px !important; box-shadow: -24px 0 0 #FAF5EC, 24px 0 0 #FAF5EC, 0 1px 0 #E6DCCB, -24px 1px 0 #E6DCCB, 24px 1px 0 #E6DCCB !important; }
.in > .pilulas.obj-grade.presa button { background: transparent; border-color: rgba(29,40,35,.10); }
.in > .pilulas.obj-grade.presa button.on { background: #1D2823; }
.bib-trilho .busca-t { background: #FCFCFC; border: 1px solid rgba(29,40,35,.14); }
.in > .pilulas.obj-grade.presa { box-shadow: calc(-1 * var(--ext, 24px)) 0 0 #FAF5EC, var(--ext, 24px) 0 0 #FAF5EC, 0 1px 0 #E6DCCB, calc(-1 * var(--ext, 24px)) 1px 0 #E6DCCB, var(--ext, 24px) 1px 0 #E6DCCB !important; }
.bib-cab:has(.cab-linha) { display: none !important; }
/* 03/11 (dono): presa, faixa + objetivos formam um bloco só, com a base arredondada e sem as pontas curvas de cima */
.in > .pilulas.obj-grade.presa { background: transparent !important; box-shadow: none !important; }
.in > .pilulas.obj-grade.presa::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--ext, 24px)); right: calc(-1 * var(--ext, 24px)); background: #FAF5EC; border-radius: 0 0 24px 24px; box-shadow: 0 14px 28px -20px rgba(29,40,35,.35); }
body.grade-presa .nav-band::after, body.grade-presa .bib-trilho::after { display: none !important; }
body.grade-presa .bib-trilho { border-radius: 24px 24px 0 0 !important; }
/* 03/11 (dono): fundo bege do herbário com cantos arredondados */
#todos.herb-sec { border-radius: 28px; }
/* 03/11 (dono): sem as pontas curvas nos cantos da faixa das categorias, parada ou rolando */
body:has(.bib-trilho) .nav-band::after, .bib-trilho::after { display: none !important; }
/* 03/11 (dono): cards de todas as seções no padrão de Fitoterápicos */
.exsicata .ex-k { text-align: left; margin: 0 0 2px; }
.exsicata .ft.ft-m { aspect-ratio: 4 / 3.4; width: 100%; height: auto; border-radius: 0; overflow: hidden; }
.exsicata .ft.ft-m img.mic { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; border-radius: 0 !important; }
.ex-cx { position: relative; display: flex; flex-direction: column; }
.ex-cx .exsicata { flex: 1; }
.ex-cx .cmp { position: absolute; top: 12px; right: 12px; z-index: 2; }
.ex-cx.sel .exsicata { border-color: #1D2823; }
.in > .pilulas.obj-grade button { background: #FBF7EE !important; }
.in > .pilulas.obj-grade button.on { background: #1D2823 !important; }
#todos.herb-sec { background: #EFE6D3 !important; border-radius: 28px; }
/* 03/11 (dono): parada ou rolando, a linha de objetivos fica do mesmo jeito (botões sobre o bege da seção), mais compacta */
.in > .pilulas.obj-grade { gap: 6px !important; margin-bottom: 14px !important; }
.in > .pilulas.obj-grade button, .in > .pilulas.obj-grade.presa button { min-height: 0 !important; padding: 9px 4px 8px !important; gap: 4px !important; font-size: 11.5px !important; line-height: 1.2 !important; border-color: rgba(29,40,35,.10) !important; }
.in > .pilulas.obj-grade .og-ic { width: 18px !important; height: 18px !important; }
.in > .pilulas.obj-grade.presa { padding: 8px 0 10px !important; }
.in > .pilulas.obj-grade.presa::before { background: #EFE6D3 !important; border-radius: 0 0 20px 20px !important; box-shadow: 0 12px 20px -18px rgba(29,40,35,.35) !important; }
body.grade-presa .bib-trilho { border-radius: 0 !important; }
/* 03/11 (dono): na Biblioteca o cabeçalho não vira cápsula ao rolar (a cápsula fica só na página principal, Retrato, Biografia e Como funciona) */
html body .lp9 .nav-band .nav.flutua { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 24px !important; }
html body .lp9 .nav-band .nav.flutua ul a[aria-current] { background: none !important; color: #A85F2E !important; padding: 0 !important; border-radius: 0 !important; }
/* 03/11 (dono): a linha de objetivos ocupa a largura toda, qualquer que seja o número de objetivos da seção */
@media (min-width: 1025px) { .in > .pilulas.obj-grade { display: flex !important; } .in > .pilulas.obj-grade button:not([data-v=""]) { flex: 1 1 0; min-width: 0; } }
/* 03/11 (dono): cada objetivo numa linha só: ícone ao lado do nome, sem quebra */
@media (min-width: 1025px) {
  .in > .pilulas.obj-grade button, .in > .pilulas.obj-grade.presa button { flex-direction: row !important; justify-content: center; white-space: nowrap; padding: 9px 8px !important; gap: 6px !important; font-size: 12px !important; }
  .in > .pilulas.obj-grade button:not([data-v=""]) { flex: 1 1 auto; }
  .in > .pilulas.obj-grade .og-ic { width: 15px !important; height: 15px !important; }
}
@media (min-width: 1025px) { .in > .pilulas.obj-grade button:not([data-v=""]) { width: auto !important; display: flex !important; } }
/* 03/11 (dono): Biblioteca ocupa a largura toda da tela no computador */
@media (min-width: 1025px) {
  .in > .pilulas.obj-grade { flex-wrap: nowrap !important; }
  body:has(.bib-trilho) .lp9 > *:not(.fixa), body:has(.bib-trilho) .lp9 > section.sec:not(#fim) { max-width: none !important; }
  body:has(.bib-trilho) .lp9 .in { max-width: none !important; padding-inline: clamp(24px, 3vw, 56px) !important; }
  body:has(.bib-trilho) #todos.herb-sec { margin-inline: clamp(12px, 1.5vw, 28px) !important; }
  body:has(.bib-trilho) .herbario { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
}
@media (min-width: 1025px) { .in > .pilulas.obj-grade { overflow-x: auto; scrollbar-width: none; } .in > .pilulas.obj-grade::-webkit-scrollbar { display: none; } .in > .pilulas.obj-grade button:not([data-v=""]) { flex-shrink: 0; } }
/* 03/11 (dono): sem o bloco bege em volta da lista: só o fundo da página e os cards */
body:has(.bib-trilho) #todos, body:has(.bib-trilho) #todos.herb-sec { background: transparent !important; border-radius: 0 !important; margin-inline: 0 !important; box-shadow: none !important; }
.in > .pilulas.obj-grade.presa::before { background: #FAF5EC !important; }
/* 03/11 (dono): cabeçalho da Biblioteca na mesma proporção das outras páginas (só o conteúdo vai de ponta a ponta) */
@media (min-width: 1025px) {
  body:has(.bib-trilho) .lp9 .nav-band .in.nav, body:has(.bib-trilho) .lp9 .nav-band .in.nav.flutua { width: min(1320px, 100%) !important; max-width: 1320px !important; padding-inline: 24px !important; }
}
body:has(.bib-trilho) .bib-trilho::before { border-radius: 0 !important; }
/* ===== 03/11 (dono): opção 5 de ponta a ponta. Cabeçalho, categorias com ícone + busca, objetivos e cards na mesma margem ===== */
@media (min-width: 1025px) {
  body:has(.bib-trilho) { --bm: clamp(24px, 3vw, 56px); }
  body:has(.bib-trilho) .lp9 .nav-band .in.nav, body:has(.bib-trilho) .lp9 .nav-band .in.nav.flutua { width: 100% !important; max-width: none !important; padding-inline: var(--bm) !important; }
  body:has(.bib-trilho) .lp9 .in { padding-inline: var(--bm) !important; }
  .bib-trilho > .in { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 16px; padding-block: 10px !important; }
  .bib-trilho .bib-abas, .escuro-pg .bib-trilho .bib-abas { gap: 4px !important; }
  .bib-trilho .bib-abas .ind { display: none !important; }
  .bib-trilho .bib-abas a, .bib-trilho .bib-abas.com-ind a { display: inline-flex; align-items: center; gap: 8px; height: 40px !important; padding: 0 15px !important; border-radius: 999px !important; color: #4A5650 !important; font: 500 14.5px 'Plus Jakarta Sans', sans-serif !important; background: none !important; }
  .bib-trilho .bib-abas a:hover { background: #F4EDE0 !important; color: #1D2823 !important; }
  .bib-trilho .bib-abas a[aria-current="page"], .bib-trilho .bib-abas.com-ind a[aria-current="page"] { background: #EFE6D3 !important; color: #1D2823 !important; }
  .bib-trilho .bib-abas .ab-ind { display: inline-flex !important; }
  .bib-abas .ab-ic { width: 17px; height: 17px; flex: none; fill: none; stroke: #C98551; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .bib-trilho .busca-t { position: static !important; transform: none !important; margin-left: auto !important; width: 300px !important; height: 40px !important; }
  /* objetivos: pílulas com ícone, numa linha; o que não cabe desliza */
  .in > .pilulas.obj-grade button:not([data-v=""]) { flex: 1 0 auto !important; border-radius: 999px !important; padding: 9px 16px !important; gap: 7px !important; font-size: 13.5px !important; }
  .in > .pilulas.obj-grade .og-ic { width: 16px !important; height: 16px !important; }
  .in > .pilulas.obj-grade:not(.presa).tb-d { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); }
  .in > .pilulas.obj-grade:not(.presa).tb-e { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
  .in > .pilulas.obj-grade:not(.presa).tb-e.tb-d { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 72px), transparent); }
}
@media (max-width: 1024px) {
  .bib-abas .ab-ic { display: none; }
  /* celular e tablet: a grade de objetivos centralizada na horizontal */
  .in > .pilulas.obj-grade { justify-content: safe center !important; }
}
/* objetivo sem item nesta seção: aparece, apagado e sem clique */
.in > .pilulas.obj-grade button.sem { opacity: .42; cursor: default; }
.in > .pilulas.obj-grade button.sem:hover { border-color: rgba(29,40,35,.10) !important; }
/* 03/11 (dono): categorias em pílulas com ícone em todas as larguras da Biblioteca */
.bib-trilho .bib-abas, .escuro-pg .bib-trilho .bib-abas { gap: 4px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.bib-trilho .bib-abas .ind { display: none !important; }
.bib-trilho .bib-abas a, .bib-trilho .bib-abas.com-ind a, .escuro-pg .bib-trilho .bib-abas a { display: inline-flex !important; align-items: center; gap: 8px; height: 40px !important; padding: 0 15px !important; border-radius: 999px !important; color: #4A5650 !important; font: 500 14.5px 'Plus Jakarta Sans', sans-serif !important; background: none !important; white-space: nowrap; }
.bib-trilho .bib-abas a:hover { background: #F4EDE0 !important; color: #1D2823 !important; }
.bib-trilho .bib-abas a[aria-current="page"], .bib-trilho .bib-abas.com-ind a[aria-current="page"], .bib-trilho .bib-abas.com-ind a.ativo { background: #EFE6D3 !important; color: #1D2823 !important; }
.bib-trilho .bib-abas .ab-ind { display: inline-flex !important; }
.bib-abas .ab-ic, .bib-trilho .bib-abas .ab-ic { display: block !important; width: 17px; height: 17px; flex: none; fill: none; stroke: #C98551; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bib-trilho .bib-abas .ab-alim { font-size: 14.5px !important; }
.bib-trilho .bib-abas .ab-alim::after { content: none !important; }
@media (min-width: 761px) and (max-width: 1024px) {
  .bib-trilho > .in { display: flex !important; align-items: center; gap: 12px; padding-block: 10px !important; }
  .bib-trilho .busca-t { position: static !important; transform: none !important; margin-left: auto !important; width: 220px !important; height: 40px !important; }
}
@media (max-width: 760px) {
  .bib-trilho > .in { padding-block: 8px !important; justify-content: safe center !important; }
  .bib-trilho .bib-abas a, .bib-trilho .bib-abas.com-ind a { height: 36px !important; padding: 0 12px !important; gap: 6px; font-size: 13.5px !important; }
  .bib-trilho .bib-abas .ab-alim { font-size: 13.5px !important; }
  .bib-abas .ab-ic, .bib-trilho .bib-abas .ab-ic { width: 15px; height: 15px; }
}
/* 03/11 (dono): no celular as cinco categorias cabem centralizadas: ícone em cima do nome */
@media (max-width: 760px) {
  .bib-trilho > .in { overflow: visible !important; justify-content: center !important; }
  .bib-trilho .bib-abas, .escuro-pg .bib-trilho .bib-abas { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 2px !important; }
  .bib-trilho .bib-abas a, .bib-trilho .bib-abas.com-ind a { flex-direction: column; justify-content: center; height: auto !important; min-height: 54px; padding: 6px 2px !important; gap: 4px; border-radius: 14px !important; font-size: 11.5px !important; line-height: 1.15; text-align: center; }
  .bib-trilho .bib-abas .ab-alim { font-size: 11.5px !important; }
  .bib-abas .ab-ic, .bib-trilho .bib-abas .ab-ic { width: 18px; height: 18px; }
}
/* 03/11 (dono): no celular e no tablet a grade de objetivos tem a mesma largura dos cards */
@media (max-width: 1024px) {
  .in > .pilulas.obj-grade { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; width: 100% !important; justify-content: stretch !important; overflow: visible !important; margin-inline: 0 !important; }
  .in > .pilulas.obj-grade button:not([data-v=""]) { width: auto !important; flex: none !important; min-width: 0 !important; }
}
@media (max-width: 760px) { .in > .pilulas.obj-grade { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 760px) {
  /* cada categoria com a largura do próprio nome, espalhadas na largura toda */
  .bib-trilho .bib-abas, .escuro-pg .bib-trilho .bib-abas { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: auto; justify-content: space-between; }
  .bib-trilho .bib-abas a, .bib-trilho .bib-abas.com-ind a { padding: 6px 5px !important; font-size: 11px !important; letter-spacing: -.005em; }
  .bib-trilho .bib-abas .ab-alim { font-size: 11px !important; }
  /* texto do card inteiro (já vem curto), sem "..." */
  .ex-hist { -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important; }
}
/* 03/11 (dono): celular e tablet no padrão do computador: objetivos numa linha de pílulas com ícone que desliza (sem a grade de 12 blocos) */
@media (max-width: 1024px) {
  .in > .pilulas.obj-grade { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 6px !important; grid-template-columns: none !important; padding: 2px 0 !important; margin: 4px 0 14px !important; scrollbar-width: none; }
  .in > .pilulas.obj-grade::-webkit-scrollbar { display: none; }
  .in > .pilulas.obj-grade button:not([data-v=""]), .in > .pilulas.obj-grade.presa button:not([data-v=""]) { flex: none !important; flex-direction: row !important; align-items: center; white-space: nowrap; border-radius: 999px !important; padding: 8px 13px !important; gap: 6px !important; font-size: 13px !important; min-height: 0 !important; }
  .in > .pilulas.obj-grade .og-ic { width: 15px !important; height: 15px !important; }
  .in > .pilulas.obj-grade:not(.presa).tb-d { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .in > .pilulas.obj-grade:not(.presa).tb-e { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); }
  .in > .pilulas.obj-grade:not(.presa).tb-e.tb-d { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 48px), transparent); }
  .in > .pilulas.obj-grade.presa { padding: 8px 0 !important; }
}
@media (max-width: 760px) {
  .vitr-sec .barra-f .busca-f { height: 44px; font-size: 15px; }
}
/* 03/11 (dono): no celular as cinco categorias centralizadas na horizontal, em qualquer largura de tela */
@media (max-width: 760px) { .bib-trilho > .in { display: flex !important; justify-content: center !important; } .bib-trilho .bib-abas, .escuro-pg .bib-trilho .bib-abas { width: auto !important; margin-inline: auto !important; justify-content: center !important; gap: 4px !important; } }
/* 03/11 (dono): setas da linha de objetivos, presas nas pontas enquanto a linha desliza */
.og-seta { display: none; position: sticky; z-index: 3; flex: none; align-self: center; width: 36px; height: 36px; border-radius: 50%; background: #FCFCFC; border: 1px solid rgba(29,40,35,.16); align-items: center; justify-content: center; cursor: pointer; }
.og-seta svg { width: 16px; height: 16px; fill: none; stroke: #1D2823; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.og-seta:hover { border-color: #D9925E; }
.og-seta.e { left: 0; box-shadow: 18px 0 18px 4px #FAF5EC; margin-right: 2px; }
.og-seta.d { right: 0; box-shadow: -18px 0 18px 4px #FAF5EC; margin-left: 2px; }
@media (min-width: 1025px) {
  .pilulas.obj-grade.tb-d .og-seta.d, .pilulas.obj-grade.tb-e .og-seta.e { display: inline-flex; }
  /* no computador as setas fazem o papel do degradê */
  .in > .pilulas.obj-grade.tb-d, .in > .pilulas.obj-grade.tb-e, .in > .pilulas.obj-grade.tb-e.tb-d { -webkit-mask-image: none !important; mask-image: none !important; }
}
/* 03/11 (dono): a busca mora sempre na faixa das categorias; no celular ela desce para uma linha própria, na largura toda */
@media (max-width: 760px) {
  .bib-trilho > .in { flex-wrap: wrap !important; row-gap: 10px; }
  .bib-trilho .busca-t { position: static !important; transform: none !important; order: 3; flex: 1 1 100%; width: 100% !important; height: 44px !important; margin: 0 0 4px !important; font-size: 15px; }
}
/* 03/11 (dono): computador um pouco mais baixo; passar o mouse não imita a categoria aberta */
.bib-trilho .bib-abas a:hover:not([aria-current="page"]) { background: rgba(239,230,211,.45) !important; }
@media (min-width: 1025px) {
  .bib-trilho > .in { padding-block: 6px !important; }
  .bib-trilho .bib-abas a, .bib-trilho .bib-abas.com-ind a { height: 34px !important; padding: 0 13px !important; font-size: 14px !important; }
  .bib-trilho .busca-t { height: 36px !important; }
  .in > .pilulas.obj-grade { margin: 10px 0 12px !important; padding-block: 0 !important; }
  .in > .pilulas.obj-grade button:not([data-v=""]) { padding: 6px 14px !important; font-size: 13px !important; }
  .in > .pilulas.obj-grade .og-ic { width: 15px !important; height: 15px !important; }
  .og-seta { width: 32px; height: 32px; }
}
/* celular: categorias na largura toda; setas laterais também na linha de objetivos */
@media (max-width: 760px) {
  .bib-trilho .bib-abas, .escuro-pg .bib-trilho .bib-abas { display: grid !important; grid-auto-flow: column; grid-template-columns: repeat(5, auto) !important; width: 100% !important; justify-content: space-between !important; margin-inline: 0 !important; }
  .bib-trilho .bib-abas a, .bib-trilho .bib-abas.com-ind a { padding: 7px 6px !important; min-height: 56px; }
}
@media (max-width: 1024px) {
  .pilulas.obj-grade.tb-d .og-seta.d, .pilulas.obj-grade.tb-e .og-seta.e { display: inline-flex; }
  .og-seta { width: 34px; height: 34px; }
  .in > .pilulas.obj-grade.tb-d, .in > .pilulas.obj-grade.tb-e, .in > .pilulas.obj-grade.tb-e.tb-d { -webkit-mask-image: none !important; mask-image: none !important; }
}
/* 03/11 (dono): lupa da busca no celular (no computador e no tablet o campo fica sempre aberto) */
.busca-lupa { display: none; }
@media (max-width: 760px) {
  .bib-trilho > .in { position: relative; flex-wrap: nowrap !important; gap: 8px !important; }
  .bib-trilho .bib-abas, .escuro-pg .bib-trilho .bib-abas { width: auto !important; flex: 1 1 auto; min-width: 0; }
  .busca-lupa { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(29,40,35,.16); background: #FCFCFC; cursor: pointer; padding: 0; }
  .busca-lupa svg { width: 18px; height: 18px; fill: none; stroke: #1D2823; stroke-width: 1.8; stroke-linecap: round; }
  .bib-trilho .busca-t { display: none !important; }
  .bib-trilho > .in.busca-aberta .busca-t { display: block !important; position: absolute !important; left: 20px; right: 68px; top: 50% !important; transform: translateY(-50%) !important; width: auto !important; height: 44px !important; margin: 0 !important; z-index: 3; }
  .bib-trilho > .in.busca-aberta .bib-abas { visibility: hidden; }
}
/* 03/11 (dono): a lupa com a mesma altura e o mesmo canto das categorias */
@media (max-width: 760px) { .bib-trilho > .in { align-items: stretch !important; } .busca-lupa { align-self: stretch; height: auto; min-height: 56px; width: 48px; border-radius: 14px; } .bib-trilho > .in.busca-aberta .busca-t { top: 0 !important; bottom: 0; transform: none !important; height: auto !important; margin-block: 8px !important; } }
/* 03/11 (dono): a busca de toda a Biblioteca é uma lupa que se expande, em qualquer largura */
.bib-cab.sem-busca .bib-busca { display: none !important; }
.bib-cab.sem-busca .bib-cab-duo { grid-template-columns: 1fr !important; }
.aviso-ind { margin: 18px 0 0; }
.busca-lupa { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(29,40,35,.16); background: #FCFCFC; cursor: pointer; padding: 0; }
.busca-lupa svg { width: 17px; height: 17px; fill: none; stroke: #1D2823; stroke-width: 1.8; stroke-linecap: round; }
.busca-lupa:hover { border-color: #D9925E; }
@media (min-width: 761px) {
  .bib-trilho .busca-lupa { margin-left: 8px; }
  .bib-trilho .busca-t { display: block !important; margin-left: auto !important; width: 0 !important; padding-inline: 0 !important; border-width: 0 !important; opacity: 0; pointer-events: none; transition: width .25s ease, opacity .2s ease, padding .25s ease; }
  .bib-trilho > .in:not(.busca-aberta) .busca-lupa { margin-left: auto; }
  .bib-trilho > .in.busca-aberta .busca-t { width: 300px !important; padding-inline: 16px !important; border-width: 1px !important; opacity: 1; pointer-events: auto; }
}
@media (min-width: 1025px) { .bib-trilho .busca-lupa { width: 34px; height: 34px; } }
@media (max-width: 760px) { .busca-lupa { width: 48px; height: auto; min-height: 56px; border-radius: 14px; } .busca-lupa svg { width: 18px; height: 18px; } }
@media (max-width: 760px) { .bib-trilho > .in.busca-aberta .busca-t { top: 14px !important; bottom: 14px !important; } }
@media (max-width: 760px) { .bib-trilho > .in.busca-aberta .busca-t { top: 8px !important; bottom: 8px !important; } }
/* 03/11 (dono): busca aberta no celular: campo e × com a mesma altura e o mesmo arredondado */
@media (max-width: 760px) { .bib-trilho > .in.busca-aberta .busca-lupa { align-self: center; min-height: 0; height: 40px; width: 40px; border-radius: 999px; } .bib-trilho > .in.busca-aberta .busca-t { right: 68px !important; } }
/* 03/11 (dono): no celular a Biblioteca usa o mesmo menu que expande da página principal, sem o "Começar grátis" */
@media (max-width: 760px) { .nav:has(.bib-movel) .btn, .nav > .btn { display: none !important; } .nav:has(.bib-movel) .menu-m { display: block !important; margin-left: auto; } }
/* 03/11 (dono): categorias + lupa cabem lado a lado no celular; se a tela for estreita demais, as categorias deslizam (nunca passam por baixo da lupa) */
@media (max-width: 760px) {
  .bib-trilho > .in { gap: 6px !important; }
  .bib-trilho .bib-abas, .escuro-pg .bib-trilho .bib-abas { overflow-x: auto; scrollbar-width: none; min-width: 0; gap: 0 !important; }
  .bib-trilho .bib-abas::-webkit-scrollbar { display: none; }
  .bib-trilho .bib-abas a, .bib-trilho .bib-abas.com-ind a { padding: 6px 3px !important; font-size: 10.5px !important; letter-spacing: 0; }
  .bib-trilho .bib-abas .ab-alim { font-size: 10.5px !important; }
  .busca-lupa { width: 42px; }
}
@media (max-width: 760px) { .bib-trilho .bib-abas a, .bib-trilho .bib-abas.com-ind a { padding: 6px 2px !important; } .busca-lupa { width: 40px; } }
/* ===== 03/11 (dono): faixa das categorias com os quatro cartões com foto da versão do ar; ao rolar, presa e menor ===== */
.bib-trilho { position: sticky !important; z-index: 45; background: #FAF5EC; }
.bib-trilho > .in { align-items: center !important; }
.bib-trilho .bib-abas.cc-cats, .escuro-pg .bib-trilho .bib-abas.cc-cats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-flow: row !important; justify-content: stretch !important; gap: 12px !important; flex: 1 1 auto; width: auto !important; margin: 0 !important; overflow: visible !important; }
.bib-trilho .bib-abas.cc-cats .ab-ind { display: none !important; }
.bib-trilho .bib-abas.cc-cats a.cc-cat { display: flex !important; flex-direction: column !important; align-items: center; justify-content: flex-start !important; gap: 4px !important; height: auto !important; min-height: 0 !important; padding: 16px 12px 18px !important; border: 1px solid transparent; border-radius: 12px !important; background: none !important; color: #1d2823 !important; text-decoration: none; position: relative; transition: background .2s, border-color .2s; white-space: normal; text-align: center; }
.bib-trilho .bib-abas.cc-cats a.cc-cat:hover { background: rgba(242,234,220,.6) !important; }
.bib-trilho .bib-abas.cc-cats a.cc-cat[aria-selected="true"] { background: #F2EADC !important; border-color: rgba(217,146,94,.45) !important; }
.bib-trilho .cc-img { width: 104px; height: 104px; display: grid; place-items: center; margin-bottom: 6px; }
.bib-trilho .cc-img img, .bib-trilho .cc-img svg { width: 100%; height: 100%; object-fit: contain; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.bib-trilho .cc-cat:hover .cc-img img, .bib-trilho .cc-cat:hover .cc-img svg { transform: translateY(-6px); }
.bib-trilho .cc-nome { font: 400 21px/1.15 'Fraunces', Georgia, serif; }
.bib-trilho .cc-n { font: 400 15px/1 'Fraunces', Georgia, serif; color: #a85f2e; }
.bib-trilho .cc-d { font: 400 13px/1.3 'Plus Jakarta Sans', sans-serif; color: #5f6d67; margin-top: 2px; }
.bib-trilho:not(.presa) > .in { padding-block: 18px 16px !important; }
/* presa: em linha, foto pequena, só o nome */
.bib-trilho.presa > .in { padding-block: 6px !important; }
.bib-trilho.presa .bib-abas.cc-cats { gap: 8px !important; }
.bib-trilho.presa .bib-abas.cc-cats a.cc-cat { flex-direction: row !important; justify-content: center !important; gap: 10px !important; padding: 6px 10px !important; }
.bib-trilho.presa .cc-img { width: 34px; height: 34px; margin: 0; flex: none; }
.bib-trilho.presa .cc-nome { font-size: 17px; }
.bib-trilho.presa .cc-n, .bib-trilho.presa .cc-d { display: none; }
@media (max-width: 900px) {
  .bib-trilho .cc-img { width: 72px; height: 72px; }
  .bib-trilho .cc-nome { font-size: 17px; }
  .bib-trilho .cc-d { display: none; }
}
@media (max-width: 760px) {
  .bib-trilho .bib-abas.cc-cats, .escuro-pg .bib-trilho .bib-abas.cc-cats { gap: 4px !important; }
  .bib-trilho .bib-abas.cc-cats a.cc-cat { padding: 8px 2px 10px !important; gap: 2px !important; }
  .bib-trilho .cc-img { width: 50px; height: 50px; margin-bottom: 2px; }
  .bib-trilho .cc-nome { font-size: 12px; line-height: 1.15; }
  .bib-trilho .cc-n { font-size: 10.5px; }
  .bib-trilho:not(.presa) > .in { padding-block: 10px 8px !important; }
  .bib-trilho.presa .bib-abas.cc-cats a.cc-cat { flex-direction: column !important; justify-content: flex-start !important; gap: 2px !important; padding: 4px 2px !important; }
  .bib-trilho.presa .cc-img { width: 24px; height: 24px; }
  .bib-trilho.presa .cc-nome { font-size: 11px; line-height: 1.12; }
  .busca-lupa { align-self: center !important; min-height: 0 !important; height: 40px !important; width: 40px !important; border-radius: 999px !important; }
}
/* 03/11 (dono): sem as curvas de encaixe sob o cabeçalho na Biblioteca (uma regra de 17/10 as religava ao rolar) */
body:has(.bib-trilho) .nav-band.flutua-on::after, html body:has(.bib-trilho) .nav-band.flutua-on::after { display: none !important; }
/* ===== 03/11 (dono): botão "Objetivos" na faixa das categorias + painel com a busca e os 12 objetivos em grade. Uma linha fixa só ===== */
.busca-lupa { display: none !important; }
.bib-trilho > .in { position: relative !important; }
.obj-btn { display: inline-flex; align-items: center; gap: 8px; flex: none; align-self: center; height: 40px; padding: 0 14px 0 16px; border-radius: 999px; border: 1px solid rgba(29,40,35,.16); background: #FCFCFC; font: 500 14px 'Plus Jakarta Sans', sans-serif; color: #1D2823; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.obj-btn:hover { border-color: #D9925E; }
.obj-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.obj-btn .ob-s { width: 14px; height: 14px; transition: transform .2s; }
.obj-btn[aria-expanded="true"] .ob-s { transform: rotate(180deg); }
.obj-btn.ativo { background: #1D2823; border-color: #1D2823; color: #FAF5EC; }
.obj-btn .ob-t { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.obj-painel { display: none; position: absolute; z-index: 50; top: 100%; left: var(--bm, 20px); right: var(--bm, 20px); margin-top: 6px; padding: 18px; background: #FAF5EC; border: 1px solid rgba(29,40,35,.12); border-radius: 20px; box-shadow: 0 28px 48px -30px rgba(29,40,35,.5); max-height: calc(100vh - 200px); overflow-y: auto; }
.bib-trilho > .in.obj-aberto .obj-painel { display: block; }
.obj-painel .busca-p { display: block; position: static; width: 100%; max-width: none; height: 46px; margin: 0 0 16px; padding: 0 18px; border: 1px solid rgba(29,40,35,.16); border-radius: 999px; background: #FCFCFC; font: 400 15px 'Plus Jakarta Sans', sans-serif; color: #1D2823; opacity: 1; transform: none; pointer-events: auto; }
.obj-rot { margin: 0 0 10px; font: 600 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8A968F; }
.obj-painel .pilulas.obj-grade { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; position: static !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
.obj-painel .pilulas.obj-grade::before { display: none !important; }
.obj-painel .og-seta, .obj-painel .obj-grade button[data-v=""] { display: none !important; }
.obj-painel .obj-grade button { display: flex !important; flex-direction: column !important; align-items: center; justify-content: center; gap: 6px !important; width: auto !important; min-height: 74px !important; padding: 12px 6px !important; border: 1px solid rgba(29,40,35,.11) !important; border-radius: 14px !important; background: #FBF7EE !important; font: 500 13px/1.25 'Plus Jakarta Sans', sans-serif !important; color: #1D2823 !important; text-align: center; white-space: normal !important; cursor: pointer; flex: none !important; }
.obj-painel .obj-grade button:hover:not(.sem) { border-color: rgba(217,146,94,.55) !important; }
.obj-painel .obj-grade button.on { background: #1D2823 !important; border-color: #1D2823 !important; color: #FAF5EC !important; }
.obj-painel .obj-grade button.sem { opacity: .4; cursor: default; }
.obj-painel .og-ic { width: 20px !important; height: 20px !important; }
@media (max-width: 1024px) { .obj-painel .pilulas.obj-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .obj-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .obj-btn .ob-t, .obj-btn .ob-s { display: none; }
  .obj-btn svg.ob-i { width: 18px; height: 18px; }
  .obj-painel { left: 12px; right: 12px; padding: 14px; max-height: calc(100vh - 170px); }
  .obj-painel .pilulas.obj-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .obj-painel .obj-grade button { min-height: 66px !important; font-size: 12px !important; padding: 10px 4px !important; }
  .obj-painel .busca-p { height: 44px; margin-bottom: 12px; }
}
.obj-painel .og-ic { flex: none; fill: none !important; stroke: #C98551; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.obj-painel .obj-grade button.on .og-ic { stroke: #D9925E; }
/* 03/11 (dono): mais respiro acima do aviso no início da Biblioteca */
.aviso-ind { margin-top: 36px !important; }
@media (max-width: 760px) { .aviso-ind { margin-top: 28px !important; } }
/* 03/11 (dono): selo do objetivo principal no card do fitoterápico (como nos ativos da landing) */
.exsicata .ex-obj { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 10px; padding: 5px 10px; border: 1px solid rgba(217,146,94,.38); border-radius: 999px; font: 600 10.5px/1.2 'Plus Jakarta Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #A85F2E; }
.exsicata .ex-obj svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* 03/11 (dono): suplementos com a área da foto branca, para a borda clara dos recortes não aparecer */
.ex-cx .exsicata .ft { background: #FFFFFF !important; }
/* 03/11 (dono): o selo do objetivo fica na base do card, na mesma altura em toda a linha (celular e computador) */
.herbario > .exsicata, .herbario .ex-cx > .exsicata { height: 100%; }
.exsicata .etiqueta { flex: 1 1 auto; }
.exsicata .ex-obj { margin-top: auto !important; }
.exsicata .ex-hist + .ex-obj, .exsicata .ex-nome + .ex-obj { margin-top: auto !important; }
.exsicata .etiqueta > .ex-hist { margin-bottom: 12px; }
/* 03/11 (dono): padronização. Área da foto branca em todas as seções (os recortes têm borda clara) */
.herbario .exsicata .ft, .herbario .exsicata .ft.ft-m { background: #FFFFFF !important; }
/* 03/11 (dono): mais respiro entre o nome e o selo quando o card não tem frase */
.exsicata .ex-nome:has(+ .ex-obj) { margin-bottom: 14px; }
.exsicata .ex-hist:has(+ .ex-obj) { margin-bottom: 14px !important; }
/* 03/11 (dono): botão Comparar em alimentos, fitoterápicos e suplementos, visível sobre a foto branca */
.ex-cx > .cmp { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 9px; margin: 0; border-radius: 999px; border: 1px solid rgba(29,40,35,.16); background: rgba(250,245,236,.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 600 12px/1 'Plus Jakarta Sans', sans-serif; color: #1D2823; cursor: pointer; box-shadow: 0 6px 14px -10px rgba(29,40,35,.45); transition: background .15s, border-color .15s, color .15s; }
.ex-cx > .cmp:hover { border-color: #D9925E; }
.ex-cx > .cmp svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ex-cx > .cmp[aria-pressed="true"] { background: #1D2823; border-color: #1D2823; color: #FAF5EC; }
.ex-cx.sel > .exsicata { border-color: #1D2823 !important; }
@media (max-width: 760px) { .ex-cx > .cmp { top: 8px; right: 8px; height: 28px; padding: 0 9px 0 7px; font-size: 11px; } }
/* 03/11 (dono): o "Fechar" mora numa faixa própria no topo da folha; o texto rola só abaixo dela (a linha do botão nunca mostra conteúdo) e o botão segue a margem lateral do conteúdo */
.pn-folha > .pn-x { position: static !important; flex: none; align-self: flex-end; margin: 14px 34px 0 auto; }
.pn-folha > .pn-corpo { padding-top: 22px !important; border-top: 1px solid transparent; }
.pn-folha.rolou > .pn-corpo { border-top-color: rgba(29,40,35,.08); }
@media (max-width: 760px) {
  .pn-folha > .pn-x { margin: 20px 20px 0 auto; }
  .pn-folha > .pn-corpo { padding-top: 16px !important; }
}
/* 03/11 (dono): comparação. Os marcadores de cada coluna na mesma altura (na base da célula) e mais respiro antes do aviso */
.cp-linha > .cp-cel { display: flex; flex-direction: column; }
.cp-linha > .cp-cel > .chips { margin-top: auto; padding-top: 12px; }
.pn-cmp .pn-corpo .nota-l { margin-top: 28px !important; }
.pn-cmp .pn-corpo .aviso { margin-top: 18px !important; }
/* o Fechar centralizado na vertical da sua faixa */
.pn-folha > .pn-x { margin: 14px 34px 14px auto !important; }
.pn-folha > .pn-corpo { padding-top: 8px !important; }
@media (max-width: 760px) {
  .pn-folha > .pn-x { margin: 18px 20px 12px auto !important; }
  .pn-folha > .pn-corpo { padding-top: 6px !important; }
}
/* 03/11 (dono): marcadores da comparação começam na mesma altura (linha própria, alinhada ao topo) */
.cp-linha > .cp-cel > .chips { margin-top: 0 !important; padding-top: 0 !important; }
.cp-linha.cp-chips { margin-top: -4px; align-items: start; }
.cp-linha.cp-chips > .cp-cel { justify-content: flex-start; }
.cp-linha.cp-chips { margin-top: 12px !important; }
/* ===== 03/11 (dono): o filtro vira mais um cartão da faixa das categorias ===== */
.bib-trilho .obj-btn { position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; flex: none; align-self: stretch; width: auto !important; height: auto !important; min-width: 120px; margin-left: 12px; padding: 16px 12px 18px !important; border: 1px solid transparent; border-radius: 12px !important; background: none; color: #1d2823; font: inherit; text-align: center; cursor: pointer; transition: background .2s, border-color .2s; }
.bib-trilho .obj-btn::before { content: ""; position: absolute; left: -7px; top: 18%; bottom: 18%; width: 1px; background: rgba(29,40,35,.14); }
.bib-trilho .obj-btn:hover { background: rgba(242,234,220,.6); border-color: transparent; }
.bib-trilho .obj-btn[aria-expanded="true"] { background: #F2EADC; border-color: rgba(217,146,94,.45); }
.bib-trilho .obj-btn .ob-img { display: grid; place-items: center; }
.bib-trilho .obj-btn .ob-circ { display: grid; place-items: center; width: 64%; height: 64%; border-radius: 50%; background: #F2EADC; border: 1px solid rgba(217,146,94,.35); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.bib-trilho .obj-btn:hover .ob-circ { transform: translateY(-4px); }
.bib-trilho .obj-btn .ob-circ svg { display: block !important; width: 42%; height: 42%; fill: none; stroke: #A85F2E; stroke-width: 1.7; stroke-linecap: round; }
.bib-trilho .obj-btn .ob-t { display: inline-flex !important; align-items: center; gap: 6px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bib-trilho .obj-btn.ativo { background: none; border-color: transparent; color: #1d2823; }
.bib-trilho .obj-btn.ativo .ob-t::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #D9925E; }
.bib-trilho .obj-btn.ativo .ob-circ { background: #1D2823; border-color: #1D2823; }
.bib-trilho .obj-btn.ativo .ob-circ svg { stroke: #FAF5EC; }
.bib-trilho .obj-btn .ob-n { display: block; }
/* presa: em linha, pequeno, como os outros cartões */
.bib-trilho.presa .obj-btn { flex-direction: row !important; justify-content: center; gap: 10px; padding: 6px 12px !important; min-width: 0; }
.bib-trilho.presa .obj-btn .ob-img { width: 34px; height: 34px; margin: 0; }
.bib-trilho.presa .obj-btn .ob-circ { width: 100%; height: 100%; }
.bib-trilho.presa .obj-btn .ob-n { display: none; }
@media (max-width: 900px) { .bib-trilho .obj-btn { min-width: 92px; } }
@media (max-width: 760px) {
  .bib-trilho .obj-btn { width: auto !important; min-width: 0; margin-left: 6px; padding: 8px 4px 10px !important; gap: 2px; }
  .bib-trilho .obj-btn::before { left: -4px; }
  .bib-trilho .obj-btn .ob-img { width: 50px; height: 50px; margin-bottom: 2px; }
  .bib-trilho .obj-btn .ob-t { max-width: 64px; font-size: 12px !important; }
  .bib-trilho .obj-btn .ob-t, .bib-trilho .obj-btn .ob-n { display: inline-flex !important; }
  .bib-trilho .obj-btn .ob-n { display: block !important; font-size: 10.5px; }
  .bib-trilho.presa .obj-btn { flex-direction: column !important; justify-content: flex-start; gap: 2px; padding: 4px 4px !important; }
  .bib-trilho.presa .obj-btn .ob-img { width: 24px; height: 24px; }
  .bib-trilho.presa .obj-btn .ob-t { font-size: 11px !important; }
  .bib-trilho.presa .obj-btn .ob-n { display: none !important; }
}
/* 03/11 (dono): marcadores da comparação mais compactos, para caberem 2 por linha em cada coluna */
.cp-chips .chips { display: flex; flex-wrap: wrap; gap: 6px 6px; }
.cp-chips .chip { min-height: 0 !important; height: auto; padding: 6px 10px 6px 9px !important; font-size: 12px !important; line-height: 1.15; gap: 6px; margin: 0 !important; }
.cp-chips .chip::before, .cp-chips .chip i { width: 6px; height: 6px; }
@media (max-width: 760px) { .cp-chips .chip { padding: 5px 8px 5px 7px !important; font-size: 11.5px !important; gap: 5px; } .cp-chips .chips { gap: 5px; } }
.bib-trilho:not(.presa) .obj-btn .ob-circ { width: 78%; height: 78%; }
.bib-trilho .obj-btn .ob-circ svg { width: 44%; height: 44%; }
/* 03/11 (dono): nos cards com Comparar a foto fica menor e mais baixa, sem passar por baixo do botão */
.ex-cx .exsicata .ft img { inset: 24% 17% 8% !important; width: auto !important; height: auto !important; max-width: none; }
.ex-cx .exsicata .ft img { width: calc(100% - 34%) !important; height: calc(100% - 32%) !important; }
/* 03/11 (dono): mais espaço entre o círculo do filtro e o nome */
.bib-trilho:not(.presa) .obj-btn .ob-img { margin-bottom: 8px !important; }
@media (max-width: 760px) { .bib-trilho:not(.presa) .obj-btn .ob-img { margin-bottom: 6px !important; } }
/* 03/11 (dono): mais respiro entre a busca, o rótulo "Objetivo ou sintoma" e os botões */
.obj-painel .busca-p { margin-bottom: 20px !important; }
.obj-painel .obj-rot { margin: 0 2px 12px !important; }
@media (max-width: 760px) { .obj-painel .busca-p { margin-bottom: 18px !important; } .obj-painel .obj-rot { margin-bottom: 10px !important; } }
/* 03/11 (dono): vitrine das quatro seções no início da Biblioteca */
.vi-sec { margin-top: 40px; }
.vi-sec:first-child { margin-top: 28px; }
.vi-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.vi-cab h2 { margin: 0; font-size: 30px; line-height: 1.1; }
.vi-cab h2 small { font: 500 14px 'Plus Jakarta Sans', sans-serif; color: #8A968F; margin-left: 8px; }
.vi-ver { display: inline-flex; align-items: center; gap: 6px; font: 600 14px 'Plus Jakarta Sans', sans-serif; color: #A85F2E !important; text-decoration: none; white-space: nowrap; }
.vi-ver::after { content: "→"; transition: transform .2s; }
.vi-ver:hover::after { transform: translateX(3px); }
.vi-grade { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
#lista .vi-grade .exsicata .ft { background: #FFFFFF !important; }
@media (max-width: 1024px) { .vi-grade { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 760px) { .vi-cab h2 { font-size: 24px; } .vi-sec { margin-top: 32px; } }
#lista:has(> .vi-sec) { display: block !important; }
/* 03/11 (dono): texto de abertura do início da Biblioteca menor */
.bib-cab .pilha > .lead { font-size: 17px !important; line-height: 1.55 !important; max-width: 62ch !important; }
@media (max-width: 760px) { .bib-cab .pilha > .lead { font-size: 15.5px !important; } }

/* 03/11 (dono): na vitrine do índice as quatro colunas crescem com a tela, sem trilhos vazios à direita */
@media (min-width: 1025px) { body:has(.bib-trilho) .herbario.vi-grade { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

/* 03/11 (dono): em tela larga a Biblioteca segue a largura do resto do site (1200px): a barra das seções e o conteúdo ficam centralizados, a linha da barra continua de ponta a ponta */
@media (min-width: 1025px) { .pg > section.sec:not(.fim) > .in, html body .lp9 .bib-trilho > .in { max-width: calc(1200px * var(--larg, 1)) !important; margin-inline: auto !important; } }
/* 03/11 (dono): header da Biblioteca no padrão do design system, igual às outras páginas: logo e menu dentro da largura do site, com a mesma margem interna do conteúdo */
@media (min-width: 1025px) { html body:has(.bib-trilho) .lp9 .nav-band > header.in.nav, html body .lp9 .bib-trilho > .in, html body .lp9 .pg > section.sec:not(.fim) > .in { max-width: calc(1200px * var(--larg, 1)) !important; margin-inline: auto !important; padding-inline: 24px !important; } }
/* 03/11 (dono): na Biblioteca, depois da rolagem o header fica igual ao de antes (mesma largura do site e mesmo alinhamento do logo), sem virar cápsula */
@media (min-width: 1025px) { html body:has(.bib-trilho) .lp9 .nav-band > header.in.nav.flutua { width: calc(1200px * var(--larg, 1)) !important; max-width: 100% !important; padding-inline: 24px !important; } }
/* 03/11 (dono): bloco verde do fim da Biblioteca no padrão das outras páginas (1152px, centralizado, mesma margem interna) */
@media (min-width: 1025px) { html body:has(.bib-trilho) .lp9 .fim > .in { max-width: calc(1200px * var(--larg, 1) - 48px) !important; margin-inline: auto !important; padding: 96px 64px !important; } }
/* 04/11 (dono): bloco verde do fim mais baixo no desktop, também na Biblioteca */
@media (min-width: 1025px) { html body:has(.bib-trilho) .lp9 .fim > .in { padding-block: 72px !important; } }