/* ============================================================================
   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; --tinta:#060F08;
  --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}
}

/* Luis, 21-sep-2026: menos espacio muerto entre el borde de cada sección y su
   título. Antes arrancaban con hasta 150 px de aire. */
.cap{padding-block:clamp(40px,6vh,72px)}
.cab-sec{margin-bottom:clamp(1.4rem,3.5vw,2.2rem)}

/* En la página de un hongo, el selector de ESPECIE sigue en el HTML —ya marcado—
   para que mayoreo.js no cambie, pero no se ve. La FORMA y la CANTIDAD sí se
   eligen ahí (Luis, 23-sep-2026). */
[data-granel-fijo] .granel__esp{display:none}

/* El índice de las once páginas de mayoreo */
.lista-mayoreo{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.5rem}
.lista-mayoreo li{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;justify-content:space-between;
  padding:.7rem .9rem;border:1px solid var(--linea);border-radius:var(--r-sm);background:var(--blanco)}
.lista-mayoreo b{font-size:1rem}
.lista-mayoreo a{color:var(--t1);font-size:.92rem}

/* La vitrina del mayoreo: una tarjeta por hongo y forma, cada una con su página */
.mayos{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));margin-top:2rem}
.mayo{display:block;border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden;background:var(--blanco);
  color:inherit;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.mayo:hover{transform:translateY(-3px);border-color:var(--linea-2);box-shadow:0 18px 40px -22px rgba(0,0,0,.35)}
.mayo img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;padding:.4rem}
.mayo > div{padding:.9rem 1rem 1.1rem}
.mayo h3{font-size:1.1rem;letter-spacing:-.02em}
.mayo__forma{margin-top:.15rem;color:var(--t2);font-size:.9rem}
.mayo__precio{margin-top:.6rem;font-size:1rem}
.mayo__precio span{color:var(--t2);font-size:.85rem;font-weight:400}
.mayo__tallas{margin-top:.25rem;font:500 .74rem/1.4 var(--mono);color:var(--t3);letter-spacing:.03em}
.mayo__ir{display:inline-flex;align-items:center;gap:.35rem;margin-top:.8rem;font-weight:600;font-size:.9rem;color:var(--t1)}
.mayo__ir span{transition:transform .2s}
.mayo:hover .mayo__ir span{transform:translateX(3px)}
@media (max-width:640px){
  /* una tarjeta por fila: con dos por fila, y dos fotos dentro de cada una, las
     bolsas quedaban del tamaño de una estampilla (Luis, 23-sep-2026) */
  .mayos{grid-template-columns:1fr;gap:.8rem}
  .mayo > div{padding:.7rem .75rem 1rem}
  .mayo h3{font-size:.98rem}
  .mayo__forma{font-size:.8rem}
  .mayo__precio{font-size:.92rem}
  .mayo__tallas{display:none}
  .mayo__ir{margin-top:.6rem;font-size:.82rem}
}

/* Los beneficios de cada hongo, en la portada de su página de mayoreo */
.benes{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.6rem;max-width:56ch}
.benes li{position:relative;padding-left:1.3rem;font-size:.95rem;line-height:1.5}
.benes li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--micelio)}
.benes b{display:block;color:var(--t1)}
.benes span{color:var(--t2)}
/* La nota de venta al por mayor: condiciones, no letra pequeña escondida */
.nota-mayoreo{margin-top:1.2rem;padding:.95rem 1.1rem;border-radius:var(--r-sm);background:var(--papel);
  border-left:3px solid var(--micelio);font-size:.88rem;line-height:1.6;color:var(--t2)}
.nota-mayoreo b{color:var(--t1)}

/* Las dos formas de pagar un pedido al por mayor, una al lado de la otra */
.pago-mayor{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:1.6rem}
.pago-mayor__op{padding:1.1rem 1.2rem;border:1px solid var(--linea);border-radius:var(--r-md);background:var(--blanco)}
.pago-mayor__op:first-child{border-color:var(--accion);box-shadow:inset 0 0 0 1px var(--accion)}
.pago-mayor__op b{display:block;font-size:1.02rem}
.pago-mayor__op p{margin-top:.45rem;color:var(--t2);font-size:.92rem;line-height:1.55}
.pago-mayor__envio{margin-top:1.1rem;text-align:center;font-size:.92rem;color:var(--t2)}
.mayo__lat{font:500 .7rem/1 var(--mono);color:var(--t3);margin-top:.2rem}
.portada--corta{padding-bottom:clamp(14px,2vh,26px)}

/* Las dos presentaciones en la misma tarjeta: entero y polvo, cada uno con su foto */
.mayo__fotos{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--linea)}
.mayo__fotos img{width:100%;aspect-ratio:3/4;object-fit:contain;background:#fff;padding:.5rem}
.mayo__fotos img:only-child{grid-column:1/-1;aspect-ratio:3/2}