/* ============================================================================
   MARCA BIO-SETA — lo que comparten TODAS las páginas de la tienda.
   Se carga después de pdp.css y antes de los estilos propios de cada página.

   Aquí vive lo que no puede quedar distinto entre una página y otra: los colores
   de marca, las fuentes, el logotipo de la cabecera, los selectores de opción y
   la ficha del granel. Si algo solo lo usa una página, NO va aquí.
   (Extraído del <style> de index.html el 20-sep-2026, al separar las secciones
    en páginas individuales.)
   ========================================================================== */

/* ---- Tokens de marca (manual v2) ----
   El color de compra es la TINTA #060F08, no el verde micelio: el verde es claro
   (#A0EEA2) y con texto blanco encima no alcanza el contraste mínimo. El verde
   queda donde sí luce y se lee: los números, los degradados y los acentos. */
body[data-tema="salud"]{
  --accion:#060F08; --accion-hover:#16281A; --accion-oscura:#000;
  --accion-suave:rgba(160,238,162,.18);
  --marca-a:#A0EEA2; --marca-b:#7C4CAE;
  --marca:linear-gradient(95deg,#A0EEA2 0%,#5FB27A 46%,#7C4CAE 100%);
  --micelio:#A0EEA2;
  --luz-1:rgba(160,238,162,.30); --luz-2:rgba(124,76,174,.26);
  --f:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --titulo-peso:600; --titulo-track:-.03em;
  --f-titulo:"Outfit",system-ui,sans-serif;
  --papel:#F4F6F4;
}

/* Cada especie tiene su color, y es el mismo en toda la tienda */
.esp-melena{color:#7C4CAE} .esp-cordyceps{color:#C4620A} .esp-ganoderma{color:#B23840}

/* La leyenda del Decreto 3249, art. 21: va en todas las páginas que hablen
   del producto. No es decorativa — es obligatoria. */
.legal-legenda{margin-top:.9rem;padding:.7rem .85rem;border:1px solid var(--linea);
  border-radius:var(--r-sm);background:var(--papel);font:600 .66rem/1.45 var(--mono);
  letter-spacing:.02em;text-transform:uppercase;color:var(--t2)}
.os .legal-legenda{background:rgba(255,255,255,.05);border-color:var(--linea-os);color:var(--o2)}

/* El logotipo reemplaza al nombre escrito */
.cab .logo{display:flex;align-items:center;line-height:0}
.cab .logo img{height:46px;width:auto;display:block}
@media (max-width:520px){.cab .logo img{height:36px}}

/* ---- Selector de opción (presentación, especie, tamaño) ---- */
.pres{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;border:0;padding:0;margin:0}
.pres label{position:relative;display:block;cursor:pointer}
.pres input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pres span{display:grid;gap:.15rem;text-align:center;padding:.7rem .4rem;border:1.5px solid var(--linea-2);
  border-radius:var(--r-sm);font-weight:600;font-size:.92rem;transition:border-color .15s,background .15s}
.pres small{font-weight:400;font-size:.72rem;color:var(--t2)}
.pres input:checked + span{border-color:var(--accion);background:var(--accion-suave)}
.pres input:focus-visible + span{outline:2px solid var(--accion);outline-offset:2px}
.pres__nota{margin:.55rem 0 0;font-size:.82rem;color:var(--t2)}

/* ---- Tabla del granel: en móvil se desliza sola, la página nunca se corre de lado ---- */
.tabla-envoltura{overflow-x:auto;margin-top:1.2rem;border:1px solid var(--linea);border-radius:var(--r-sm)}
.tabla-granel{border-collapse:collapse;width:100%;min-width:520px;font-size:.88rem;background:var(--blanco)}
.tabla-granel th,.tabla-granel td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid var(--linea)}
.tabla-granel thead th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t2);font-weight:700}
.tabla-granel tbody th{font-weight:650}
.tabla-granel td.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla-granel tbody tr:last-child th,.tabla-granel tbody tr:last-child td{border-bottom:0}
.tabla-granel tbody th[rowspan]{vertical-align:middle;background:#FAFCFA}

.mayoreo__reglas{max-width:52ch;margin:1.1rem auto 0;padding-left:1.1rem;font-size:.9rem}
.mayoreo__reglas li{margin:.3rem 0}

/* ---- Mayoreo: una sola ficha con variantes, en vez de 48 filas de tabla ---- */
.granel{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:1.4rem;align-items:start;margin-top:1.4rem}
.granel__foto{position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden;aspect-ratio:1}
.granel__foto img{width:100%;height:100%;object-fit:contain}
.granel__sinfoto{position:absolute;inset:0;display:grid;place-items:center;margin:0;
  background:var(--papel);color:var(--t2);font-size:.85rem}
.granel__sel{display:grid;gap:.75rem;min-width:0}
.granel__tit{padding:0;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t2)}
.granel__esp{grid-template-columns:repeat(3,1fr)}
.granel__dos{grid-template-columns:repeat(2,1fr)}
.granel__tam{grid-template-columns:repeat(4,1fr)}
.granel .pres span{padding:.5rem .3rem;font-size:.84rem}
.granel .pres input:disabled + span{opacity:.35;cursor:not-allowed}
.granel__precio{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-top:.2rem}
.granel__precio b{font-size:clamp(1.5rem,4vw,2rem);letter-spacing:-.02em}
.granel__precio span{font-size:.84rem;color:var(--t2)}
@media (max-width:640px){
  .granel{grid-template-columns:1fr}
  .granel__foto{max-width:240px;margin-inline:auto}
  .granel .pres small{display:none}
}