/* ============================================================================
   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:transparent;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:transparent;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:.4rem;background:transparent}
.mayo__fotos img{width:100%;aspect-ratio:3/4;object-fit:contain;background:transparent;padding:.5rem}
.mayo__fotos img:only-child{grid-column:1/-1;aspect-ratio:3/2}
/* «¿Esto es para mí?»: el público del hongo, debajo de sus beneficios. Va aquí
   y no en la portada, donde competía con el beneficio y lo repetía. */
.benes__para{margin-top:.9rem;font-size:.95rem;color:var(--t2)}
.benes__para::first-letter{text-transform:uppercase}
/* Riesgo documentado en personas, en la página del hongo que lo tiene. Va con
   el mismo peso que el resto: esconderlo en letra chica sería peor que no
   ponerlo (28-sep-2026). */
.aviso-mayoreo{margin-top:.8rem;padding:.95rem 1.1rem;border-radius:var(--r-sm);background:#FBF3E8;
  border-left:3px solid #B4762A;font-size:.88rem;line-height:1.6;color:#4A3A22}
.aviso-mayoreo b{color:#2F2411}
/* ===========================================================================
   LOS PROGRAMAS PARA MAYORISTAS (28-sep-2026)
   Cuatro tarjetas, no una lista: quien llega aquí no está leyendo, está
   buscando cuál de las cuatro se parece a su negocio.
   ======================================================================== */
.programas{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:1.6rem}
.programa{padding:1.3rem 1.4rem;border:1px solid var(--linea);border-radius:var(--r-lg);background:#fff}
.programa__n{margin:0 0 .5rem;font:600 .78rem/1 var(--mono);letter-spacing:.12em;color:var(--micelio-osc,#2E7D46)}
.programa h3{margin:0 0 .5rem;font-size:1.08rem;letter-spacing:-.01em}
.programa p{margin:0 0 .6rem;font-size:.94rem;line-height:1.55;color:var(--t2)}
.programa p:last-child{margin-bottom:0}
.programa__para{padding-top:.6rem;border-top:1px solid var(--linea);font-size:.86rem;font-style:italic}
/* La tabla de maquila: son cifras y se leen comparando, así que van alineadas
   a la derecha y con cifras de ancho fijo. */
.maquila__como{max-width:64ch;margin:1.2rem auto 0;text-align:center;font-size:1rem;line-height:1.6}
.maquila__tit{margin:1.8rem 0 .2rem;font-size:1.02rem}
.maquila__tit span{font-weight:400;color:var(--t2)}
.tabla--maquila th.num{text-align:right}
.tabla--maquila td.num{white-space:nowrap}
/* ===========================================================================
   NOSOTROS (28-sep-2026)
   El texto de marca de Luis. Pide aire: medida de lectura corta, interlínea
   larga y nada que compita al lado.
   ======================================================================== */
.nos__parrafo{font-size:1.02rem;line-height:1.72;margin:0 0 1.1rem}
.principios{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:1.6rem}
.principio{padding:1.4rem 1.5rem;border-radius:var(--r-lg);background:#fff;border:1px solid var(--linea)}
.principio h3{margin:0 0 .7rem;font-size:1.06rem;letter-spacing:.04em;text-transform:uppercase;
  font:600 .82rem/1.3 var(--mono);color:var(--t2)}
.principio p{margin:0;font-size:.97rem;line-height:1.68}
/* El cierre: la frase que Luis quiere como eslogan evolutivo. Va grande y sola,
   porque su fuerza está en el silencio que la rodea. */
.nos__cierre{margin:2.6rem 0 .8rem;text-align:center;font-size:clamp(2rem,6vw,3.1rem);
  line-height:1.06;letter-spacing:-.03em;font-weight:700}
.nos__cierre i{font-weight:400}
.nos__cierre-pie{max-width:46ch;margin:0 auto;text-align:center;font-size:.95rem;color:var(--t2);line-height:1.6}
/* La oferta de los planes, dentro de la página donde se eligen cantidades.
   Va con el verde de la marca porque es una oferta, no una advertencia. */
.planes-aviso{margin-top:1.4rem;padding:1.1rem 1.25rem;border-radius:var(--r-md);
  background:#EFF7F1;border:1px solid #CBE6D3}
.planes-aviso__ojo{margin:0 0 .2rem;font:600 .72rem/1.3 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:#2E7D46}
.planes-aviso__tit{display:block;font-size:1.05rem;margin-bottom:.45rem;letter-spacing:-.01em}
.planes-aviso b{color:var(--t1)}
.planes-aviso p{margin:0 0 .8rem;font-size:.93rem;line-height:1.58;color:var(--t2)}
.planes-aviso__ir{display:inline-block;font-weight:600;font-size:.94rem;color:var(--t1)}
.planes-aviso__ir span{display:inline-block;transition:transform .2s var(--ease)}
.planes-aviso__ir:hover span{transform:translateX(3px)}