/* bx.css — piezas compartidas del sitio Biomix (29-sep-2026).
   Sage en todas las páginas, compartir, redes en el pie, iconos de línea.
   Todo va con prefijo .bx- para no tocar ninguna regla existente. */

/* ---------- textos nuevos en los dos idiomas (sin tocar el sistema de cada página) ---------- */
html:not([lang="en"]) .l-en{display:none !important}
html[lang="en"] .l-es{display:none !important}

/* ---------- icono de menú (reemplaza el glifo ☰) ---------- */
.bx-bars{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* ---------- redes en el pie ---------- */
.bx-social{display:flex;gap:10px;margin-top:12px}
.bx-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(155,119,90,.35);display:inline-flex !important;align-items:center;justify-content:center;color:#5C5148;margin:0 !important;transition:.2s;background:#fff}
.bx-social a:hover{border-color:#3F7A2C;color:#3F7A2C}
.bx-social svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bx-social svg .f{fill:currentColor;stroke:none}
.bx-social a[aria-label^="Facebook"] svg,.bx-social a[aria-label^="TikTok"] svg{fill:currentColor;stroke:none}

/* ---------- franja de confianza compacta (páginas interiores) ---------- */
.bx-trust{border-top:1px solid rgba(155,119,90,.22);border-bottom:1px solid rgba(155,119,90,.22);background:#FCF9F1;padding:22px 0}
.bx-trust .bx-in{max-width:1160px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;font-size:.84rem;color:#5C5148;text-align:center}
.bx-trust b{color:#1B3327;font-weight:700}
.bx-trust .bx-sep{width:4px;height:4px;border-radius:50%;background:#9B775A;opacity:.6}
.bx-trust a{color:#3F7A2C;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(63,122,44,.35)}

/* ---------- Sage: botón flotante ---------- */
.bx-fab{position:fixed;right:16px;bottom:16px;z-index:58;display:flex;align-items:center;gap:10px;background:#fff;color:#1A1512;border:1px solid rgba(155,119,90,.3);border-radius:999px;padding:10px 16px 10px 10px;font:600 13.5px/1.2 'Open Sans','Helvetica Neue',Arial,sans-serif;box-shadow:0 14px 34px -14px rgba(26,21,18,.45);cursor:pointer;transition:transform .25s,opacity .25s}
.bx-fab:hover{transform:translateY(-2px)}
.bx-fab .bx-av{width:30px;height:30px}
.bx-fab-x{position:fixed;right:10px;bottom:56px;z-index:59;width:22px;height:22px;border-radius:50%;border:1px solid rgba(155,119,90,.35);background:#fff;color:#5a4a3c;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 6px 18px -8px rgba(26,21,18,.4)}
.bx-fab.bx-hide,.bx-fab-x.bx-hide{opacity:0;pointer-events:none;transform:translateY(12px)}
.bx-av{flex:0 0 auto;border-radius:50%;background:#3F7A2C;color:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 14px/1 'PT Serif',Georgia,serif}

/* móvil: el botón flotante de Sage aparece al bajar un poco, para no tapar el botón principal */
.asesora.bx-wait,.asesora.bx-wait + .asesora-x,.bx-fab.bx-wait,.bx-fab.bx-wait + .bx-fab-x{opacity:0 !important;pointer-events:none !important;transform:translateY(14px)}

/* ---------- Sage: panel ---------- */
.bx-panel{position:fixed;right:16px;bottom:16px;z-index:65;width:min(380px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 32px));display:none;flex-direction:column;background:#fff;border:1px solid rgba(155,119,90,.28);border-radius:20px;box-shadow:0 30px 70px -30px rgba(26,21,18,.55);overflow:hidden;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;color:#1A1512}
.bx-panel.bx-open{display:flex}
.bx-ph{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(155,119,90,.18);background:#FCF9F1}
.bx-ph .bx-av{width:36px;height:36px;font-size:16px}
.bx-ph .bx-who{flex:1;min-width:0}
.bx-ph .bx-who b{display:block;font:700 15px/1.2 'PT Serif',Georgia,serif}
.bx-ph .bx-who small{display:block;font-size:11.5px;color:#3F7A2C;letter-spacing:.02em}
.bx-close{width:32px;height:32px;border-radius:50%;border:1px solid rgba(155,119,90,.3);background:#fff;cursor:pointer;font-size:16px;line-height:1;color:#5C5148}
.bx-flow{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#fff;min-height:180px}
.bx-msg{display:flex;gap:8px;align-items:flex-end;max-width:100%}
.bx-msg .bx-av{width:24px;height:24px;font-size:11px}
.bx-msg.bx-user{flex-direction:row-reverse}
.bx-msg.bx-user .bx-av{background:#EFE9D8;color:#5C5148}
.bx-bub{background:#F7F3E8;border:1px solid rgba(155,119,90,.18);border-radius:16px 16px 16px 4px;padding:10px 13px;font-size:14px;line-height:1.55;max-width:84%;overflow-wrap:anywhere}
.bx-user .bx-bub{background:#EAF1E6;border-color:rgba(63,122,44,.22);border-radius:16px 16px 4px 16px}
.bx-dots{display:inline-flex;gap:4px}
.bx-dots i{width:6px;height:6px;border-radius:50%;background:#9B775A;opacity:.35;animation:bxdot 1s infinite}
.bx-dots i:nth-child(2){animation-delay:.15s}.bx-dots i:nth-child(3){animation-delay:.3s}
@keyframes bxdot{50%{opacity:1}}
.bx-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid rgba(155,119,90,.18)}
.bx-form input{flex:1;min-width:0;border:1px solid rgba(155,119,90,.35);border-radius:999px;padding:11px 14px;font:inherit;font-size:14px;background:#FCF9F1;color:#1A1512}
.bx-form input:focus{outline:2px solid #3F7A2C;outline-offset:1px}
.bx-form button{border:0;border-radius:999px;background:#3F7A2C;color:#fff;font:700 12px/1 'Open Sans',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:0 16px;cursor:pointer}
.bx-form button:disabled{opacity:.55;cursor:default}
.bx-foot{padding:0 16px 12px;font-size:11.5px;color:#6A6055;line-height:1.5}
.bx-foot a{color:#3F7A2C;font-weight:600;text-decoration:none}
@media (max-width:560px){
  .bx-panel{right:8px;left:8px;bottom:8px;width:auto;max-height:82vh;border-radius:18px}
  .bx-fab{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){.bx-dots i{animation:none;opacity:.7}.bx-fab{transition:none}}

/* ---------- compartir ---------- */
.bx-sharebtn{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(26,21,18,.18);background:#fff;color:#1A1512;border-radius:999px;padding:10px 18px;font:700 12px/1 'Open Sans',Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.2s}
.bx-sharebtn:hover{border-color:#3F7A2C;color:#3F7A2C}
.bx-sharebtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bx-sheet{position:fixed;inset:0;z-index:90;background:rgba(26,21,18,.45);display:none;align-items:flex-end;justify-content:center;padding:16px}
.bx-sheet.bx-open{display:flex}
.bx-sheet .bx-sin{background:#fff;border-radius:18px;padding:18px;width:min(420px,100%);font-family:'Open Sans',Arial,sans-serif;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.bx-sheet h4{margin:0 0 12px;font:700 16px/1.3 'PT Serif',Georgia,serif;color:#1A1512}
.bx-sheet .bx-opts{display:grid;gap:8px}
.bx-sheet .bx-opts a,.bx-sheet .bx-opts button{display:block;text-align:left;border:1px solid rgba(155,119,90,.3);background:#FCF9F1;border-radius:12px;padding:12px 14px;font:600 14px/1.2 'Open Sans',Arial,sans-serif;color:#1A1512;text-decoration:none;cursor:pointer;width:100%}
.bx-sheet .bx-cancel{margin-top:10px;background:none !important;border:0 !important;text-align:center !important;color:#6A6055 !important}

/* ---------- contraste (29-sep): verde de marca oscuro para texto pequeño y botones activos ---------- */
html.bx-sub{--leaf-deep:#35702A}
html.bx-sub .k:not([style]){color:#7E5E45}
html.bx-sub .tip.soon .lbl{color:#7E5E45}
html.bx-cat #tbeb,html.bx-cat .cnum{color:#7E5E45}
/* catálogo: el pie oscuro pasa al crema de la portada (todo el sitio va claro) */
html.bx-cat footer{background:#EFE9D8 !important;color:#5C5148 !important;border-top:1px solid rgba(155,119,90,.22)}
html.bx-cat footer .f-legal p{color:#5F584E !important}
html.bx-cat footer .f-legal b{color:#1A1512 !important}
html.bx-cat footer .bx-cfoot a{color:#1A1512 !important}
html.bx-cat footer .bx-cfoot a:hover{color:#3F7A2C !important}
html.bx-cat footer .bx-social a{background:#fff !important;border-color:rgba(155,119,90,.35) !important;color:#5C5148 !important}
html.bx-cat footer .bx-social a:hover{border-color:#3F7A2C !important;color:#3F7A2C !important}
html.bx-sub footer .legal,html.bx-sub footer .legal p,html.bx-sub footer .legal span{color:#6B645A}
html.bx-sub .pillar .num{color:#8F5E2A}
html.bx-sub .k[style*="--cafe"]{color:#7E5E45 !important}
html.bx-sub .field label{color:#7E5E45}
/* catálogo: la barra de arriba no cabía (el botón EN salía cortado y «Encuentra distribuidor» en dos líneas).
   Las 4 categorías ya están en las pestañas de abajo y en el menú: salen de la barra. */
html.bx-cat .nav .menu a[href^="#"],html.bx-cat .nav .menu > span{display:none}
html.bx-cat .nav-right,html.bx-cat .langtog{flex:0 0 auto}
html.bx-cat .nav-cta{white-space:nowrap}
@media (max-width:560px){html.bx-cat .nav-cta{display:none}}