/* ============================================================
   MELIPONÁRIO TESSER — Componentes das abelhas
   Cards de espécie, barras sensoriais, página de detalhe, tabela
   ============================================================ */

/* --- selo de mel (amostra de cor) --- */
.honey-dot{width:34px;height:38px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);flex:none;border:1px solid rgba(46,33,20,.18)}

/* --- página índice: hero --- */
.page-hero{padding:64px 0 40px;position:relative}
.page-hero .crumb{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--txt-soft);margin-bottom:18px;display:flex;gap:10px;align-items:center}
.page-hero .crumb a:hover{color:var(--dourado)}
.page-hero .crumb i{width:8px;height:9px;background:var(--dourado);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:block}
.page-hero h1{margin:8px 0 18px;max-width:16ch}
.page-hero .lead{max-width:56ch}

/* --- filtros --- */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:38px 0 6px}
.filters .lbl{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--txt-soft);margin-right:6px}
.chip{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:13px;padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);color:var(--marrom);background:transparent;cursor:pointer;transition:.18s}
.chip:hover{border-color:var(--dourado)}
.chip.active{background:var(--marrom);color:var(--creme);border-color:var(--marrom)}

/* --- grid de espécies --- */
.bee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px}
.bee-card{background:var(--creme);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:.25s;position:relative}
.bee-card:hover{transform:translateY(-6px);box-shadow:0 28px 50px -26px rgba(46,33,20,.5)}
.bee-card .ph{position:relative;height:188px;background:var(--marrom);overflow:hidden;display:grid;place-items:center}
.bee-card .ph image-slot{position:absolute;inset:0;width:100%;height:100%;z-index:3}
.bee-card .ph .hexframe{position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='86' viewBox='0 0 56 96'><g fill='none' stroke='%23F7F1E5' stroke-width='3'><path d='M28 1 L54 16 L54 48 L28 63 L2 48 L2 16 Z'/><path d='M28 49 L54 64 L54 96 M28 49 L2 64 L2 96'/></g></svg>");background-size:50px 86px;opacity:.1;pointer-events:none}
.bee-card .ph .sym{width:84px;opacity:.9;position:relative}
.bee-card .ph .genus{position:absolute;top:14px;left:14px;font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--marrom);background:var(--dourado-2);padding:5px 11px;border-radius:999px;z-index:2}
.bee-card .ph .honey{position:absolute;bottom:14px;right:14px;display:flex;align-items:center;gap:8px;background:rgba(23,19,16,.55);backdrop-filter:blur(4px);padding:6px 12px 6px 8px;border-radius:999px;z-index:2}
.bee-card .ph .honey .sw{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(247,241,229,.5)}
.bee-card .ph .honey span{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:10px;color:var(--creme)}
.bee-card .c-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.bee-card .sci{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--dourado);margin-bottom:2px}
.bee-card h3{font-size:24px;margin-bottom:14px}
.bee-card .mini{display:grid;gap:9px;margin-bottom:18px}
.bee-card .mini .m{display:flex;align-items:center;gap:10px;font-size:12px}
.bee-card .mini .m .k{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:10.5px;color:var(--txt-soft);width:74px;flex:none}
.bee-card .more{margin-top:auto;font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--marrom);display:inline-flex;gap:8px;align-items:center}
.bee-card:hover .more{color:var(--dourado)}

/* --- mini barra (8 segmentos) --- */
.segbar{display:flex;gap:3px;flex:1}
.segbar i{height:8px;flex:1;border-radius:2px;background:rgba(46,33,20,.12)}
.segbar i.on{background:var(--dourado)}
.segbar.warn i.on{background:#9a4a2f}

/* ============== PÁGINA DE DETALHE ============== */
.detail-hero{padding:56px 0 60px;position:relative}
.detail-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.dh-meta .crumb{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--txt-soft);margin-bottom:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dh-meta .crumb a:hover{color:var(--dourado)}
.dh-meta .crumb i{width:8px;height:9px;background:var(--dourado);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:block}
.dh-meta .genus-tag{display:inline-block;font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--marrom);background:var(--dourado-2);padding:6px 14px;border-radius:999px;margin-bottom:14px}
.dh-meta h1{font-size:clamp(46px,7vw,84px);margin:0 0 6px}
.dh-meta .sci{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,28px);color:var(--dourado)}
.dh-meta .tagline{font-family:var(--serif);font-size:21px;color:var(--txt-soft);margin-top:22px;max-width:42ch}
.dh-meta .honey-line{display:flex;align-items:center;gap:14px;margin-top:26px}
.dh-meta .honey-line .sw{width:46px;height:52px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border:1px solid rgba(46,33,20,.2)}
.dh-meta .honey-line .t{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.dh-meta .honey-line .t b{display:block;color:var(--marrom);font-size:16px}
.dh-meta .honey-line .t span{color:var(--txt-soft);font-size:12px}
.dh-photo{position:relative;display:grid;place-items:center}
.dh-photo .frame{width:100%;max-width:440px;aspect-ratio:1/1.06;background:var(--marrom);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;position:relative;overflow:hidden}
.dh-photo .frame image-slot{position:absolute;inset:0;width:100%;height:100%;z-index:3}
/* estado vazio dos slots sobre fundo escuro — prompt em creme */
.dh-photo .frame image-slot,.bee-card .ph image-slot{color:rgba(247,241,229,.72)}
.dh-photo .frame image-slot::part(frame),.bee-card .ph image-slot::part(frame){background:transparent}
.dh-photo .frame image-slot::part(ring),.bee-card .ph image-slot::part(ring){border-color:rgba(247,241,229,.34)}
.dh-photo .frame image-slot::part(empty){justify-content:flex-end;padding-bottom:30px}
.bee-card .ph image-slot::part(empty){justify-content:flex-end;padding-bottom:12px}
.dh-photo .frame .sym{width:54%;opacity:.92;position:relative}
.dh-photo .frame .pat{position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='86' viewBox='0 0 56 96'><g fill='none' stroke='%23F7F1E5' stroke-width='3'><path d='M28 1 L54 16 L54 48 L28 63 L2 48 L2 16 Z'/><path d='M28 49 L54 64 L54 96 M28 49 L2 64 L2 96'/></g></svg>");background-size:50px 86px;opacity:.07}

/* "sobre a abelha" — tiles */
.about-bee{background:var(--creme-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-bee .wrap{padding-top:0;padding-bottom:0}
.about-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.fact{padding:40px 30px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.fact:last-child{border-right:none}
.fact .k{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--dourado)}
.fact .v{font-family:var(--display);font-size:24px;color:var(--marrom);line-height:1.1;text-transform:uppercase}
.fact .s{font-size:14px;color:var(--txt-soft)}

.curio{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.curio .cu-card{background:var(--marrom);color:var(--creme);border-radius:22px;padding:42px 44px;position:relative;overflow:hidden}
.curio .cu-card .eyebrow{color:var(--dourado-2)}
.curio .cu-card p{font-family:var(--serif);font-size:23px;line-height:1.5;margin-top:14px;color:rgba(247,241,229,.92)}
.curio .cu-card .bee{position:absolute;right:-30px;bottom:-30px;width:180px;opacity:.12}

/* o mel */
.mel-sec .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.mel-jar{display:grid;place-items:center}
.jar2{width:230px;height:320px;border-radius:22px 22px 26px 26px;border:1px solid var(--line);position:relative;box-shadow:0 30px 60px -30px rgba(46,33,20,.5);overflow:hidden;background:linear-gradient(180deg,#fff,#f3ead6)}
.jar2 .lid{position:absolute;top:0;left:0;right:0;height:42px;background:var(--marrom)}
.jar2 .fill{position:absolute;left:14px;right:14px;bottom:14px;top:62px;border-radius:10px}
.jar2 .lbl{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:74%;text-align:center;background:var(--creme);border:2px solid var(--dourado);border-radius:10px;padding:14px 8px}
.jar2 .lbl img{width:54px;margin:0 auto 4px}
.jar2 .lbl .nm{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--marrom);line-height:1}
.jar2 .lbl .sm{font-size:10px;color:var(--txt-soft);text-transform:uppercase;letter-spacing:.06em;margin-top:4px;font-family:var(--display)}
.mel-props{display:grid;gap:0}
.mel-props .mp{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line)}
.mel-props .mp:first-child{padding-top:0}
.mel-props .mp .hx{flex:none;width:34px;height:38px;background:var(--dourado);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:var(--marrom);font-weight:700;font-size:15px;margin-top:2px}
.mel-props .mp .k{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--dourado);display:block}
.mel-props .mp .v{font-size:18px;color:var(--marrom);font-weight:500}
.mel-props .marca-mel{background:var(--creme-2);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-top:22px;font-family:var(--serif);font-size:18px;color:var(--marrom);font-style:italic}

/* perfil sensorial — barras grandes */
.profile-sec{background:var(--marrom);color:var(--creme)}
.profile-sec h2,.profile-sec h3{color:var(--creme)}
.profile-sec .eyebrow{color:var(--dourado-2)}
.profile-sec .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.profile-sec .intro p{color:rgba(247,241,229,.78);margin-top:16px;font-size:17px}
.profile-sec .legend{margin-top:26px;display:grid;gap:8px}
.profile-sec .legend .lg{display:flex;align-items:center;gap:12px;font-size:13.5px;color:rgba(247,241,229,.66)}
.profile-sec .legend .lg b{color:var(--dourado-2);font-family:var(--display);width:36px;text-align:right}
.bars{display:grid;gap:22px}
.bar-row{display:grid;grid-template-columns:150px 1fr 44px;align-items:center;gap:20px}
.bar-row .name{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:15px;color:var(--creme)}
.bar-track{height:14px;border-radius:999px;background:rgba(247,241,229,.12);overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--dourado),var(--dourado-2));width:0;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.bar-fill.warn{background:linear-gradient(90deg,#8a4127,#b3623c)}
.bar-row .val{font-family:var(--display);font-size:22px;color:var(--dourado-2);text-align:right}

/* navegação prev/next + cta */
.bee-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.bee-nav a{display:flex;align-items:center;gap:16px;padding:24px 26px;border:1px solid var(--line);border-radius:18px;transition:.2s;background:var(--creme)}
.bee-nav a:hover{border-color:var(--dourado);background:var(--creme-2)}
.bee-nav a.next{justify-content:flex-end;text-align:right}
.bee-nav .dir{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--txt-soft)}
.bee-nav .nm{font-family:var(--display);text-transform:uppercase;font-size:20px;color:var(--marrom)}
.bee-nav .ar{font-size:26px;color:var(--dourado)}

.cta-band{background:var(--preto);color:var(--creme);text-align:center}
.cta-band h2{color:var(--creme);margin-bottom:18px}
.cta-band p{color:rgba(247,241,229,.7);max-width:48ch;margin:0 auto 30px}
.cta-band .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ============== TABELA DE COMPARAÇÃO ============== */
.cmp-tools{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:32px 0 8px}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--creme)}
table.cmp{border-collapse:collapse;width:100%;min-width:880px}
table.cmp th,table.cmp td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.cmp thead th{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--txt-soft);background:var(--creme-2);position:sticky;top:0;cursor:pointer;white-space:nowrap;user-select:none}
table.cmp thead th:hover{color:var(--dourado)}
table.cmp thead th.sorted{color:var(--marrom)}
table.cmp thead th .ar{font-size:10px;margin-left:4px;opacity:.6}
table.cmp tbody tr:hover{background:var(--creme-2)}
table.cmp .sp{display:flex;align-items:center;gap:12px}
table.cmp .sp .sw{width:14px;height:14px;border-radius:50%;flex:none;border:1px solid rgba(46,33,20,.2)}
table.cmp .sp .nm{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:15px;color:var(--marrom)}
table.cmp .sp .sci{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--dourado)}
table.cmp td.num{font-family:var(--display);font-size:15px;color:var(--marrom)}
table.cmp .cell-bar{display:flex;align-items:center;gap:10px}
table.cmp .cell-bar .mt{width:62px;height:8px;border-radius:999px;background:rgba(46,33,20,.1);overflow:hidden;flex:none}
table.cmp .cell-bar .mf{height:100%;background:var(--dourado);border-radius:999px}
table.cmp .cell-bar.warn .mf{background:#9a4a2f}

/* comparador lado a lado */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.vs-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--creme)}
.vs-card .vh{padding:22px 24px;background:var(--marrom);color:var(--creme);display:flex;align-items:center;gap:14px}
.vs-card .vh .sw{width:24px;height:27px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border:1px solid rgba(247,241,229,.3)}
.vs-card .vh select{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:18px;background:transparent;color:var(--creme);border:0;border-bottom:1.5px solid var(--dourado-2);padding:4px 2px;cursor:pointer;width:100%}
.vs-card .vh select option{color:var(--marrom)}
.vs-body{padding:24px}
.vs-body .vrow{display:grid;grid-template-columns:120px 1fr 34px;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.vs-body .vrow:last-child{border-bottom:none}
.vs-body .vrow .nm{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:12px;color:var(--txt-soft)}
.vs-body .vrow .tk{height:10px;border-radius:999px;background:rgba(46,33,20,.1);overflow:hidden}
.vs-body .vrow .fl{height:100%;background:linear-gradient(90deg,var(--dourado),var(--dourado-2));border-radius:999px;transition:width .6s}
.vs-body .vrow .fl.warn{background:linear-gradient(90deg,#8a4127,#b3623c)}
.vs-body .vrow .vv{font-family:var(--display);font-size:16px;color:var(--marrom);text-align:right}

/* você sabia */
.didyou{background:var(--verde);color:#fff}
.didyou h2{color:#fff}
.didyou .eyebrow{color:#e9efd9}
.dy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px}
.dy{display:flex;gap:18px;align-items:flex-start;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:24px 26px}
.dy .hx{flex:none;width:42px;height:48px;background:#fff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:var(--verde);font-family:var(--display);font-weight:700;font-size:18px}
.dy p{font-size:17px;color:rgba(255,255,255,.92);line-height:1.5}

@media(max-width:980px){
  .bee-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr 1fr}
  .fact:nth-child(2){border-right:none}
  .fact{border-bottom:1px solid var(--line)}
}
@media(max-width:880px){
  .detail-hero .wrap,.mel-sec .wrap,.profile-sec .wrap,.curio{grid-template-columns:1fr;gap:38px}
  .dh-photo{order:-1}
  .bee-grid{grid-template-columns:1fr}
  .versus{grid-template-columns:1fr}
  .bar-row{grid-template-columns:120px 1fr 36px;gap:12px}
  .dy-grid{grid-template-columns:1fr}
}