/* =============================================================================
   tienda.css — el estilo que comparten las páginas de la tienda.
   Salió del <style> que vivía dentro de index.html (22-sep-2026), cuando la
   tienda pasó de una sola página a varias: inicio, una por hongo y packs.
   Lo propio de mayoreo y equipos sigue en marca.css.
   ========================================================================== */
/* Los tokens de marca, el selector de opcion, la tabla y la ficha del granel
   viven ahora en assets/marca.css, porque los comparten las tres paginas.
   Aqui abajo queda SOLO lo que es propio del inicio. */
.especies{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:2rem}
.especie{border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden;background:var(--blanco)}
.especie img{width:100%;aspect-ratio:1;object-fit:cover}
.especie div{padding:1rem 1.1rem 1.25rem}
.especie h3{font-size:1.15rem;margin-bottom:.15rem}
.especie .lat{font:500 .72rem/1 var(--mono);color:var(--t3);letter-spacing:.02em}
.especie p{margin-top:.6rem;color:var(--t2);font-size:.94rem}
.envio{display:grid;gap:.6rem;margin-top:.2rem}
.envio__tit{font:600 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t2)}
.envio label{display:grid;gap:.25rem;font-size:.82rem;color:var(--t2)}
.envio input{min-height:46px;padding:0 .8rem;border:1px solid var(--linea-2);border-radius:var(--r-sm);
  font:400 1rem var(--f);color:var(--t1);background:var(--blanco)}
.envio input:focus-visible{outline:2px solid var(--accion);outline-offset:1px}
.envio__error{color:var(--alerta);font-size:.85rem;font-weight:600}
.acepto{display:flex;gap:.6rem;align-items:flex-start;margin:.2rem 0 .1rem;
  font-size:.82rem;line-height:1.45;color:var(--t2);cursor:pointer}
.acepto input{width:18px;height:18px;flex:0 0 auto;margin-top:.1rem;accent-color:var(--accion)}
.acepto a{color:var(--t1)}
/* El héroe: un frasco por cada uno del pedido, alineados por la base.
   Se igualan por ALTURA porque el frasco es el objeto más alto de cada foto;
   el ancho cambia según cuánto se extienda el polvo o el hongo que acompaña. */
.info__frascos{position:absolute;left:4%;right:4%;top:24%;height:62%;
  display:flex;align-items:flex-end;justify-content:center;gap:0}
.info__frascos img{height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 20px 18px rgba(20,24,40,.26));transition:opacity .2s}
.info__frascos img[hidden]{display:none}
.info__frascos img+img{margin-left:-3%}
@media (max-width:520px){.info__frascos{top:29%;height:52%}}
.video-lab{max-width:330px;margin:2rem auto 0}
.video-lab video{width:100%;border-radius:var(--r-lg);display:block;background:#000}
.video-lab__pie{max-width:56ch;margin:1.4rem auto 0;text-align:center;font-size:.86rem;
  color:var(--o2);line-height:1.6}
/* La promesa de composición, visible siempre y no solo en la primera foto */
.sin-nada{margin:.1rem 0 .6rem;font-size:.9rem;font-weight:600;color:var(--accion);
  display:flex;align-items:center;gap:.4rem}
.sin-nada::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--micelio);flex:0 0 auto}
/* Armador: un frasco por fila, con su foto real y sus dos elecciones. El combo
   deja escoger especie Y presentación en cada frasco, que es como se vende. */
.armador{display:grid;gap:.6rem}
.frasco{display:grid;grid-template-columns:78px 1fr;gap:.7rem;align-items:center;
  padding:.6rem;border:1px solid var(--linea);border-radius:var(--r-sm);background:var(--blanco)}
.frasco__foto{width:78px;height:78px;object-fit:contain;border-radius:calc(var(--r-sm) - 4px);background:transparent}
.frasco__sel{display:grid;gap:.4rem;min-width:0}
.frasco__tit{margin:0;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t2)}
.frasco .pres span{padding:.5rem .25rem;font-size:.82rem}
.frasco .pres small{font-size:.66rem}
@media (max-width:420px){
  .frasco{grid-template-columns:56px 1fr;gap:.55rem}
  .frasco__foto{width:56px;height:56px}
  .frasco .pres span{padding:.45rem .15rem;font-size:.74rem}
  .frasco .pres small{display:none}
}
/* Carrito de varias líneas */
.carrito__vacio{margin:0;padding:1.6rem 1.15rem;color:var(--t2);font-size:.92rem}
.carrito__falta{margin:.1rem 0 .35rem;font-size:.78rem;color:var(--t2)}
.cant{display:flex;align-items:center;gap:.3rem;margin-top:.35rem}
.cant__btn{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--linea-2);
  border-radius:999px;background:transparent;font-size:.95rem;line-height:1;cursor:pointer;color:inherit}
.cant__btn:disabled{opacity:.35;cursor:default}
.cant > span{min-width:1.4rem;text-align:center;font-weight:600;font-size:.88rem}
.cant__quitar{margin-left:.35rem;border:0;background:transparent;color:var(--t2);
  font-size:.76rem;text-decoration:underline;cursor:pointer;padding:.2rem}
.cant__btn:focus-visible,.cant__quitar:focus-visible{outline:2px solid var(--accion);outline-offset:2px}
.metodo{display:grid;gap:.45rem;border:0;padding:0;margin:0 0 .6rem}
.metodo label{position:relative;display:block;cursor:pointer}
.metodo input{position:absolute;opacity:0;inset:0;cursor:pointer}
.metodo span{display:grid;gap:.1rem;padding:.65rem .8rem;border:1.5px solid var(--linea-2);
  border-radius:var(--r-sm);font-size:.9rem}
.metodo small{color:var(--t2);font-size:.76rem}
.metodo input:checked + span{border-color:var(--accion);background:var(--accion-suave)}
.metodo input:focus-visible + span{outline:2px solid var(--accion);outline-offset:2px}
/* El micelio de la marca, muy tenue y solo en las secciones oscuras: es la firma
   visual de BIO-SETA sin robarle protagonismo al producto ni a los precios. */
.problema::after,.cierre::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;
  background:url('../img/micelio.webp') bottom center/cover no-repeat;opacity:.16;pointer-events:none;
  -webkit-mask-image:linear-gradient(0deg,#000,rgba(0,0,0,.35) 55%,transparent);
          mask-image:linear-gradient(0deg,#000,rgba(0,0,0,.35) 55%,transparent)}
.problema,.cierre{position:relative}
/* El nombre y el precio, pegados a la descripción: al elegir un Mix la página
   sube hasta aquí y todo queda en el mismo encuadre */
.panel__vivo{margin:.55rem 0 0;font-size:1.02rem;color:var(--t2)}
.panel__vivo b{color:var(--t1)}
.panel__vivo .num{font-weight:700;color:var(--t1);margin-left:.2rem}
.galeria__slide[hidden],.galeria__minis button[hidden]{display:none}
/* Llamados a la acción suaves al final de cada sección: contorno, sin gritar */
.cta-suave{margin-top:clamp(1.6rem,4vw,2.4rem);text-align:center}
.cta-suave__btn{display:inline-flex;align-items:center;gap:.45rem;padding:.72rem 1.35rem;border:1.5px solid var(--t1);
  border-radius:999px;font-weight:600;font-size:.95rem;color:var(--t1);text-decoration:none;
  transition:background .2s,color .2s,transform .2s}
.cta-suave__btn:hover{background:var(--t1);color:#fff;transform:translateY(-1px)}
.cta-suave__btn span{transition:transform .2s}
.cta-suave__btn:hover span{transform:translateX(3px)}
.os .cta-suave__btn,.gr .cta-suave__btn{border-color:rgba(255,255,255,.5);color:#fff}
.os .cta-suave__btn:hover,.gr .cta-suave__btn:hover{background:#fff;color:var(--t1)}
.paq .tag.paq__tag-izq{left:14px;right:auto}
.faq__cta{margin-top:1.4rem;text-align:center}
/* Micelio vivo: crece al deslizar, solo en las secciones verdes (assets/micelio.js).
   Detrás del texto, en el verde de la marca, y se desvanece hacia arriba. */
[data-micelio]{position:relative;overflow:hidden}
[data-micelio] > .envoltura{position:relative;z-index:1}
.micelio-vivo{position:absolute;left:0;right:0;bottom:0;height:78%;pointer-events:none;z-index:0;opacity:.22;transition:none;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.55) 45%,transparent 92%);
          mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.55) 45%,transparent 92%)}
.micelio-vivo svg{display:block;width:100%;height:100%}
.micelio-vivo g{stroke:var(--micelio);opacity:1}
.micelio-vivo--espejo{transform:scaleX(-1)}
.micelio-on .problema::after,.micelio-on .cierre::after{display:none}
/* Pago seguro, envío gratis y contra entrega: siempre en una sola fila */
.confianza ul{grid-template-columns:repeat(3,1fr) !important;gap:.6rem}
@media (max-width:520px){.confianza li{flex-direction:column;text-align:center;gap:.35rem;font-size:.76rem}}
/* El dato de 120 cápsulas solo aparece si hay un frasco en cápsulas */
[data-chip-capsulas][hidden]{display:none}
/* Cada hongo con su lugar, debajo de las cifras (fondo grafito: tonos claros) */
.tres-hongos{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:3rem;text-align:center}
.tres-hongos div{padding:1.2rem 1rem;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);background:rgba(255,255,255,.03)}
.tres-hongos b{display:block;font-size:1.25rem;letter-spacing:-.02em}
.tres-hongos span{display:block;margin-top:.3rem;color:var(--o1);font-size:.95rem}
.tres-hongos small{display:block;margin-top:.35rem;color:var(--o2);font:500 .74rem/1.4 var(--mono);letter-spacing:.03em}
.th-melena{color:#C7AEEF} .th-cordyceps{color:#F2A764} .th-ganoderma{color:#EE8E96}
/* Selector de combinación del Mix y descripción de cada frasco */
.mixes{border:0;padding:0;margin:.2rem 0 .4rem;display:grid;gap:.45rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mixes__tit{padding:0;margin-bottom:.1rem;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t2)}
.mix{position:relative;display:block;cursor:pointer}
.mix input{position:absolute;opacity:0;inset:0;cursor:pointer}
.mix span{display:grid;gap:.1rem;padding:.6rem .7rem;border:1.5px solid var(--linea-2);border-radius:var(--r-sm);transition:border-color .15s,background .15s}
.mix b{font-size:.9rem}
.mix small{font-size:.74rem;color:var(--t2)}
.mix input:checked + span{border-color:var(--accion);background:var(--accion-suave)}
.mix input:focus-visible + span{outline:2px solid var(--accion);outline-offset:2px}
.frasco__desc{margin:.1rem 0 0;font-size:.76rem;line-height:1.45;color:var(--t2)}
/* Precio de los mismos frascos comprados sueltos, tachado junto al del Mix */
.paq__precio{display:grid;justify-items:end;line-height:1.15}
.paq__precio s{font-size:.78rem;font-weight:500;color:var(--t3)}
/* Upsell del carrito: entre la lista y el pie, nunca dentro del bloque de pago */
.upsell{margin:0 1.15rem .9rem;padding:.95rem 1rem;border-radius:var(--r-md);
  background:var(--accion-suave);border:1px solid rgba(95,178,122,.45)}
.upsell__tag{font:700 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t2)}
.upsell h3{font-size:1.02rem;margin:.35rem 0 .25rem}
.upsell p{margin:0;font-size:.84rem;color:var(--t2);line-height:1.5}
.upsell__escala{margin-top:.45rem !important;font:500 .74rem/1.4 var(--mono) !important}
.upsell .btn{width:100%;min-height:44px;margin-top:.7rem;font-size:.92rem}
.upsell__otro{display:block;margin-top:.5rem;text-align:center;font-size:.8rem;color:var(--t1);
  background:none;border:0;text-decoration:underline;cursor:pointer;width:100%}
/* El titulo del panel cambia con la especie: una entrada corta para que el
   cambio se note como intencional y no como un salto. */
[data-dolor].cambia,[data-beneficio].cambia{animation:cambia .45s var(--ease) both}
@keyframes cambia{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){[data-dolor].cambia,[data-beneficio].cambia{animation:none}}
/* Lo que dice la ciencia */
.ciencia{max-width:1000px;margin-inline:auto}
.ciencia__intro{max-width:70ch;font-size:1rem;color:var(--t2);margin:.6rem 0 1.2rem}
.estudios{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.estudio{border:1px solid var(--linea);border-radius:var(--r-md);background:var(--blanco);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem}
.estudio p{margin:0;color:var(--t2);font-size:.9rem;line-height:1.55}
.estudio__ref{font:600 .72rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t3) !important}
.estudio__quien{color:var(--t1) !important;font-weight:600}
.estudio__nota{font-size:.82rem !important;border-left:2px solid var(--micelio);padding-left:.6rem}
.estudio__estrellas{margin-top:auto !important;padding-top:.5rem;font:600 .74rem/1.3 var(--mono) !important;letter-spacing:.04em;color:var(--t1) !important}
.estudio__estrellas span{margin-left:.3rem;letter-spacing:.05em}
.estudio__link{margin-top:.2rem;padding-top:.4rem;font-size:.84rem;font-weight:600;color:var(--t1)}
.ciencia__dosis{margin-top:1rem;font-size:.88rem;color:var(--t2)}
.precaucion{margin-top:1.2rem;padding:1rem 1.1rem;border-radius:var(--r-md);background:#FFF6E8;border:1px solid #F0D9B0}
.precaucion b{display:block;color:var(--t1);margin-bottom:.3rem}
.precaucion p{margin:0;font-size:.9rem;color:var(--t2)}
.ciencia__pie{max-width:72ch;margin:1.6rem auto 0;text-align:center;font-size:.85rem;color:var(--t2)}
/* Seccion de resenas sin resenas todavia: en vez de testimonios, lo que
   quita el riesgo. Se lee como lista, alineada a la izquierda, dentro de la
   tarjeta centrada. */
.respaldo{list-style:none;margin:1.4rem auto 0;padding:0;max-width:44ch;display:grid;gap:.85rem;text-align:left}
.respaldo li{position:relative;padding-left:1.35rem;color:var(--t2);font-size:.95rem;line-height:1.55}
.respaldo li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--micelio)}
.respaldo b{display:block;color:var(--t1)}
.respaldo a{color:var(--t1)}
.respaldo__cierre{margin-top:1.3rem !important;font-size:.88rem}
/* La foto que Luis eligio para esta seccion viene con fondo blanco. En vez
   de recortarla, se enmarca: sobre el negro se lee como una foto de estudio
   y no como un recorte a medias. Si algun dia llega sin fondo, se le quita
   la clase .foto-marco y vuelve a flotar. */
.foto-marco{border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.problema .envoltura,.cierre .envoltura{position:relative;z-index:1}


/* =============================================================================
   Las páginas nuevas (22-sep-2026): inicio, una por hongo y packs.
   ========================================================================== */

/* --- Portada del inicio: la marca antes que el producto --------------------- */
.portada-inicio{padding:clamp(40px,7vh,84px) 0 0;text-align:center}
.portada-inicio h1{font-size:clamp(2.1rem,6.2vw,3.6rem);line-height:1.04;letter-spacing:-.03em;margin:.5rem 0 0}
.portada-inicio__sub{max-width:56ch;margin:1rem auto 0;color:var(--t2);font-size:clamp(1rem,2.3vw,1.12rem);line-height:1.6}
.portada-inicio__botones{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.6rem}
.portada-inicio__botones .btn{width:auto;min-width:230px;padding-inline:1.8rem}
.portada-inicio__foto{display:block;width:min(760px,100%);height:auto;margin:clamp(1.8rem,4vw,2.8rem) auto 0}

/* --- Tarjetas: cada hongo y cada sección tienen su página ------------------- */
.tarjetas{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin-top:2rem}
/* En el celular, DOS por fila: con una sola el frasco se veía gigante y había
   que deslizar media pantalla por producto (Luis, 23-sep-2026). */
@media (max-width:640px){
  .tarjetas{grid-template-columns:1fr 1fr;gap:.7rem}
  .tarjeta img{aspect-ratio:1;object-fit:contain;padding:.5rem}
  .tarjeta > div{padding:.7rem .75rem 1rem}
  .tarjeta h3{font-size:.98rem;line-height:1.2}
  .tarjeta__lat{font-size:.62rem}
  /* en el celular la tarjeta se queda con lo esencial: foto, nombre, precio y
     botón. El latín y la pregunta larga hacían tarjetas de media pantalla */
  .tarjeta__lat,.tarjetas .tarjeta__dolor{display:none}
  .tarjeta .tarjeta__ir{display:flex;justify-content:center;margin-top:.6rem;padding:.55rem .6rem;
    border-radius:999px;background:var(--accion);color:#fff;font-size:.82rem;font-weight:600}
  .tarjeta .tarjeta__ir span{display:none}
  .tarjeta--ancha .tarjeta__dolor{display:block}
  .tarjeta__precio{margin-top:.45rem;font-size:.95rem}
  .tarjeta__precio span{display:block;font-size:.72rem}
  .tarjeta__ir{margin-top:.6rem;font-size:.82rem}
  .tarjeta--ancha img{aspect-ratio:16/9;object-fit:cover;padding:0}
}
.tarjeta{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}
.tarjeta:hover{transform:translateY(-3px);border-color:var(--linea-2);box-shadow:0 18px 40px -22px rgba(0,0,0,.35)}
.tarjeta img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--papel)}
.tarjeta > div{padding:1.1rem 1.15rem 1.3rem}
.tarjeta h3{font-size:1.2rem;letter-spacing:-.02em;margin:.15rem 0 0}
.tarjeta__lat{font:500 .72rem/1 var(--mono);color:var(--t3);margin-top:.25rem}
/* la presentación, que ahora es lo que distingue una tarjeta de otra */
.tarjeta__pres{margin-top:.2rem;font-weight:600;color:var(--t1);font-size:.92rem}
.tarjeta__dolor{margin-top:.6rem;color:var(--t2);font-size:.94rem;line-height:1.5}
.tarjeta__precio{margin-top:.7rem;font-size:1.05rem}
.tarjeta__precio span{font-size:.82rem;color:var(--t2);font-weight:400}
.tarjeta__ir{display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;font-weight:600;font-size:.92rem;color:var(--t1)}
.tarjeta__ir span{transition:transform .2s}
.tarjeta:hover .tarjeta__ir span{transform:translateX(3px)}
.tarjeta--ancha img{aspect-ratio:16/10;object-fit:cover}

/* El selector antiguo de cantidad (+ / −) quedo sin uso cuando el pedido
   paso a radios; su CSS se retiro el 12-oct para que no hubiera dos
   reglas .cuantos distintas peleando por el mismo nombre. */
/* --- «Súmale otro hongo»: el mix como oferta, no como opción inicial -------- */
.otros{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin-top:1.8rem}
.otro{display:grid;grid-template-columns:72px 1fr 18px;gap:.8rem;align-items:center;padding:.8rem;
  border:1px solid var(--linea);border-radius:var(--r-md);background:var(--blanco);color:inherit;text-decoration:none;
  transition:border-color .2s,transform .2s var(--ease)}
.otro:hover{border-color:var(--t1);transform:translateY(-2px)}
.otro img{width:72px;height:72px;object-fit:contain;border-radius:var(--r-sm);background:var(--papel)}
.otro b{display:block;font-size:1rem}
.otro small{display:block;margin-top:.15rem;color:var(--t2);font-size:.84rem}
.otro svg{color:var(--t2)}


/* =============================================================================
   PORTADAS del inicio (22-sep-2026)
   Una foto por producto. El texto va en el espacio libre de cada foto —al lado
   contrario del frasco— y NUNCA encima en el celular: ahí la foto va arriba y
   el texto debajo, sobre la tinta de la marca, que es donde siempre se lee.
   ========================================================================== */
.portadas{position:relative;background:var(--tinta,#060F08)}
.portadas__pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overflow-anchor:none}
.portadas__pista::-webkit-scrollbar{display:none}
.portada{position:relative;flex:0 0 100%;scroll-snap-align:start;background:#060F08;color:#fff}
/* La foto se muestra COMPLETA: el espacio libre de cada una es donde va el
   texto, y recortarla se comía justo eso (Luis, 22-sep-2026). */
.portada__foto{display:block;width:100%;height:auto}
.portada__texto{position:relative;padding:1.4rem 1.25rem 1.9rem}
/* Solo en el celular: la foto se funde con el texto y se lee como una sola
   pieza, sin la costura de dos bloques pegados. En pantallas grandes el texto
   va MONTADO sobre la foto, así que esto no aplica. */
/* EN EL CELULAR manda la foto VERTICAL (4:5) y el texto va DENTRO, en el hueco
   que cada foto deja libre: arriba, arriba-izquierda, arriba-derecha o abajo.
   Con las horizontales no se podía: al recortarlas, el titular caía sobre la
   etiqueta del frasco. */
@media (max-width:759px){
  .portada{display:block;position:relative;overflow:hidden}
  .portada picture{display:block}
  /* La portada ocupa como MEDIA pantalla, no más (Luis, 23-sep-2026, comparando
     con VitalSetas): la foto llega en 4:5 y así sobra mesón, cielo o pared. Se
     ancla abajo para conservar el frasco y se recorta todo lo de arriba. */
  .portada__foto{aspect-ratio:1/1;max-height:62vh;object-fit:cover;object-position:center bottom}
  /* todas las láminas del mismo alto: si una es más alta, el carrusel se iguala
     a ella y las demás quedan con una franja negra debajo */
  .mv-arr .portada__foto{aspect-ratio:1/1;max-height:62vh}
  .portada__texto{position:absolute;z-index:1;padding:1rem 1.15rem}
  .portada::after{content:"";position:absolute;inset:0;pointer-events:none}

  /* arriba, a lo ancho */
  .mv-arr .portada__texto{inset:0;text-align:center}
  .mv-arr::after{background:linear-gradient(180deg,rgba(6,15,8,.92) 0%,rgba(6,15,8,.72) 38%,rgba(6,15,8,.18) 62%,rgba(6,15,8,0) 80%)}
  /* arriba a la derecha */
  .mv-arr-der .portada__texto{top:0;right:0;width:66%;text-align:left}
  .mv-arr-der::after{background:linear-gradient(200deg,rgba(6,15,8,.94) 0%,rgba(6,15,8,.74) 34%,rgba(6,15,8,.16) 60%,rgba(6,15,8,0) 78%)}
  /* arriba a la izquierda */
  .mv-arr-izq .portada__texto{top:0;left:0;width:68%}
  .mv-arr-izq::after{background:linear-gradient(160deg,rgba(6,15,8,.94) 0%,rgba(6,15,8,.74) 34%,rgba(6,15,8,.16) 60%,rgba(6,15,8,0) 78%)}
  /* abajo, a lo ancho */
  .mv-abj .portada__texto{left:0;right:0;bottom:0;padding-bottom:2.2rem}
  .mv-abj::after{background:linear-gradient(0deg,#060F08 24%,rgba(6,15,8,.86) 44%,rgba(6,15,8,.3) 68%,rgba(6,15,8,0) 88%)}

  .portada__texto h2{font-size:1.02rem;line-height:1.18;margin:.18rem 0 .28rem}
  .portada .cursiva{font-size:1.32rem}
  .portada__texto p{font-size:.75rem;line-height:1.42}
  .portada__precio{margin-top:.3rem !important;font-size:.78rem !important}
  .portada__texto .btn{margin-top:.6rem;width:100%;min-width:0;font-size:.85rem;min-height:42px}
  /* Amor y Amistad: el mensaje arriba, pegado a los frascos, y el botón abajo
     del todo —sobre la mesa— para no taparles la etiqueta */
  .mv-arr .portada__texto{display:flex;flex-direction:column;justify-content:space-between;padding-bottom:1.9rem}
  .mv-arr .portada__texto .btn{width:auto;min-width:240px;align-self:center;margin-top:0}
  /* Amor y Amistad en el celular: arriba el rótulo y la frase; abajo, sobre la
     mesa, el precio y el botón. El párrafo largo se esconde: caía justo encima
     de las etiquetas de los tres frascos. */
  .mv-arr .portada__texto{justify-content:flex-start}
  .mv-arr .portada__texto p:not(.portada__precio):not(.ojo){display:none}
  .mv-arr .portada__precio{margin-top:auto !important;margin-bottom:.45rem;font-size:.82rem !important}
  .mv-arr .portada__precio b{font-size:.95rem}
  .mv-arr::after{background:linear-gradient(180deg,rgba(6,15,8,.92) 0%,rgba(6,15,8,.66) 26%,rgba(6,15,8,.1) 46%,rgba(6,15,8,0) 58%,rgba(6,15,8,.72) 82%,rgba(6,15,8,.92) 100%)}
  .portadas__puntos{bottom:.7rem}
}


.portada__texto .ojo{color:var(--micelio)}
.portada__texto h2{font-size:clamp(1.4rem,4.4vw,2.05rem);line-height:1.12;letter-spacing:-.02em;margin:.45rem 0 .55rem;color:#fff}
.portada__texto p{color:rgba(255,255,255,.82);font-size:clamp(.95rem,2.4vw,1.02rem);line-height:1.55;max-width:46ch}
.portada__precio{margin-top:.7rem !important;color:#fff !important;font-size:.95rem !important}
.portada__precio b{font-size:1.15rem}
.portada__texto .btn{margin-top:1rem;width:auto;min-width:230px;padding-inline:1.6rem;background:#fff;color:#060F08}
.portada__texto .btn:hover{background:var(--micelio);color:#060F08}
.portada__texto .btn span{display:inline-block;margin-left:.15rem;transition:transform .2s var(--ease)}
.portada__texto .btn:hover span{transform:translateX(4px)}
.portada .cursiva{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:600;
  font-size:clamp(1.9rem,6.4vw,3.1rem);letter-spacing:-.01em}

/* Desde tableta: el texto se monta sobre la foto, en su lado libre */
@media (min-width:760px){
  .portada{display:grid}
  /* La foto va dentro de un <picture> (hay una versión vertical para el celular),
     así que el elemento que ocupa la rejilla es el <picture>, no el <img>. Sin
     esto el texto dejaba de montarse y caía ARRIBA de la foto (23-sep-2026). */
  .portada picture,.portada__foto,.portada__texto{grid-area:1/1}
  .portada picture{display:block;width:100%}
  .portada__foto{width:100%;aspect-ratio:16/9;object-fit:cover;max-height:78vh}
  .portada__texto{align-self:center;justify-self:start;width:min(46%,560px);padding:clamp(1.5rem,3vw,2.6rem)}
  .portada--der .portada__texto{justify-self:end}
  .portada--pie .portada__texto{align-self:end;justify-self:start;width:min(60%,680px)}
  /* un velo desde el lado del texto: se lee sin tapar la foto */
  .portada::after{content:"";grid-area:1/1;pointer-events:none;
    background:linear-gradient(90deg,rgba(6,15,8,.86) 0%,rgba(6,15,8,.62) 34%,rgba(6,15,8,0) 62%)}
  .portada--der::after{background:linear-gradient(270deg,rgba(6,15,8,.86) 0%,rgba(6,15,8,.62) 34%,rgba(6,15,8,0) 62%)}
  .portada--pie::after{background:linear-gradient(0deg,rgba(6,15,8,.9) 0%,rgba(6,15,8,.55) 38%,rgba(6,15,8,0) 72%)}
  .portada__texto{position:relative;z-index:1}
}
.portadas__puntos{position:absolute;left:0;right:0;bottom:.9rem;display:flex;gap:.45rem;justify-content:center;z-index:2}
.portadas__puntos button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:background .2s,width .2s}
.portadas__puntos button[aria-current="true"]{background:var(--micelio);width:26px;border-radius:5px}
.portadas__puntos button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* --- Ventana: las tres presentaciones antes de entrar al producto ---------- */
.ventana{width:min(430px,calc(100% - 2rem));border:0;border-radius:var(--r-lg);padding:1.15rem 1.15rem 1.35rem;background:var(--blanco);color:var(--t1)}
.ventana::backdrop{background:rgba(6,15,8,.55);backdrop-filter:blur(3px)}
.ventana__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.ventana__cab h2{font-size:1.15rem;letter-spacing:-.02em}
.ventana__pie{margin:.35rem 0 .9rem;color:var(--t2);font-size:.86rem}
.ventana__opciones{display:grid;gap:.5rem}
.elige-pres{display:grid;grid-template-columns:62px 1fr;gap:.75rem;align-items:center;padding:.6rem;
  border:1.5px solid var(--linea-2);border-radius:var(--r-sm);text-decoration:none;color:inherit;transition:border-color .2s,background .2s}
.elige-pres:hover,.elige-pres:focus-visible{border-color:var(--accion);background:var(--accion-suave);outline:none}
.elige-pres img{width:62px;height:62px;object-fit:contain;border-radius:calc(var(--r-sm) - 4px);background:var(--papel)}
.elige-pres b{display:block;font-size:1rem}
.elige-pres small{display:block;margin-top:.15rem;color:var(--t2);font-size:.82rem;line-height:1.4}

/* --- «También en cápsulas · polvo» : las páginas hermanas de cada presentación */
.otras-pres{margin:.55rem 0 .2rem;font-size:.88rem;color:var(--t2)}
.otras-pres a{color:var(--t1);text-underline-offset:3px}

/* --- Ficha de cada presentación: cómo se toma y qué la caracteriza --------- */
.ficha-pres{max-width:760px;margin:1.8rem auto 0}
.ficha-pres__consumo{font-size:clamp(1rem,2.4vw,1.1rem);line-height:1.6;color:var(--t2);text-align:center}
.ficha-pres__consumo b{color:var(--t1)}
.ficha-pres__tabla{margin:1.6rem 0 0;display:grid;gap:0;border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden;background:var(--blanco)}
.ficha-pres__fila{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:1rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--linea)}
.ficha-pres__fila:last-child{border-bottom:0}
.ficha-pres__fila dt{font:600 .74rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.ficha-pres__fila dd{margin:0;font-size:.95rem;color:var(--t1)}
.ficha-pres__nota{margin-top:1.1rem;text-align:center;font-size:.9rem;color:var(--t2);line-height:1.55}
.ficha-pres__nota a{color:var(--t1)}
@media (max-width:480px){.ficha-pres__fila{grid-template-columns:1fr;gap:.15rem}}

/* La franja de marca: solo el titular, entre el carrusel y los productos */
.portada-inicio--franja{padding:clamp(26px,4vh,44px) 0 clamp(10px,2vh,18px)}
.portada-inicio--franja h1{font-size:clamp(1.65rem,4.4vw,2.6rem);margin:.35rem 0 0}

/* Los seis hongos bajo el titular: el nombre y la palabra que lo define.
   Los tres del frasco y los tres que hoy solo van al por mayor. */
.seis{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.5rem .9rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));max-width:1000px;margin-inline:auto}
/* en computador los seis van en UNA sola línea */
@media (min-width:900px){.seis{grid-template-columns:repeat(6,1fr)}}
.seis li{display:grid;gap:.05rem;padding:.55rem .2rem;border-top:1px solid var(--linea)}
.seis b{font-size:.95rem;letter-spacing:-.01em}
.seis span{font:600 .72rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t2)}
@media (max-width:520px){
  .seis{grid-template-columns:1fr 1fr;gap:.2rem .8rem}
  .seis b{font-size:.88rem}
  .seis span{font-size:.66rem}
}

/* =============================================================================
   LA VITRINA · el menú de productos que se desliza (24-sep-2026)
   Una fila, un producto grande a la vez, flechas en computador y puntos abajo.
   Pasa de los frascos a las bolsas al por mayor sin cambiar de página.
   ========================================================================== */
.vitrina{position:relative;margin-top:1.6rem}
.vitrina__pista{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:.2rem .2rem 1rem}
.vitrina__pista::-webkit-scrollbar{display:none}
.vprod{flex:0 0 min(78%,320px);scroll-snap-align:center;display:block}
.vprod__foto{position:relative;display:block;aspect-ratio:1;border-radius:var(--r-lg);
  background:transparent;overflow:hidden;transition:background .25s var(--ease)}
.vprod__ir:hover .vprod__foto,a.vprod:hover .vprod__foto{background:var(--accion-suave)}
/* La imagen cubre la caja entera y se muestra completa con `contain`. El aire
   lo da el `padding`, que en porcentaje se calcula contra el ANCHO —siempre
   definido— y por eso nunca se desborda. Con altura en porcentaje sí se salía:
   la caja saca su alto de un aspect-ratio y el porcentaje no encontraba contra
   qué resolverse (Luis, 28-sep-2026). */
.vprod__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9%}
/* el padding es la perilla del tamaño: menos aire, producto más grande */
#mayoreo .vprod__foto img{padding:4%}
#equipos .vprod__foto img{padding:2%}
.vprod__nom{display:block;margin-top:.85rem;text-align:center;font-size:1.05rem;font-weight:650;letter-spacing:-.01em}
.vprod__pres{display:block;margin-top:.15rem;text-align:center;font:600 .72rem/1.3 var(--mono);
  letter-spacing:.09em;text-transform:uppercase;color:var(--t2)}
.vprod__precio{display:block;margin-top:.35rem;text-align:center;font-size:1rem;font-weight:700}
.vprod__precio small{font-weight:400;color:var(--t2);font-size:.82rem}
.vitrina__flecha{position:absolute;top:calc(50% - 3rem);transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--t1);background:rgba(255,255,255,.92);
  display:none;place-items:center;cursor:pointer;color:var(--t1)}
.vitrina__flecha:hover{background:var(--t1);color:#fff}
.vitrina__flecha:disabled{opacity:.3;cursor:default}
.vitrina__flecha--izq{left:-6px}
.vitrina__flecha--der{right:-6px}
@media (min-width:760px){
  .vitrina__flecha{display:grid}
  .vprod{flex:0 0 clamp(240px,26%,300px)}
}
.vitrina__puntos{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin-top:.2rem}
.vitrina__puntos button{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:var(--linea-2);cursor:pointer;transition:background .2s,width .2s}
.vitrina__puntos button[aria-current="true"]{background:var(--accion);width:22px;border-radius:4px}
.vitrina__grupo{margin-top:.5rem;font:600 .8rem/1.3 var(--mono);letter-spacing:.08em;color:var(--t2)}
/* El pie de cada vitrina: el enlace a la sección completa. Va debajo de los
   puntos porque quien llegó al final de la fila es justamente quien quiere ver
   el resto (Luis, 24-sep-2026). */
.vitrina__pie{margin-top:1rem;text-align:center;font-size:.95rem}
.vitrina__pie a{color:var(--t1);text-underline-offset:3px}
/* La tarjeta de un equipo cuya foto todavía no llega. Se dice, en vez de
   enseñar otra máquina: la del autoclave venía repetida del ultracongelador. */
.vprod__sinfoto{display:grid;place-items:center;width:100%;height:100%;
  font:600 .78rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t2)}
/* El recuadro de la foto es --papel, igual que el fondo de una sección «pa»:
   donde se juntan, la tarjeta desaparece y el producto queda flotando en el
   aire. Dentro de esas secciones el recuadro va blanco. */
.pa .vprod__foto{background:transparent}
.pa .vprod__ir:hover .vprod__foto,.pa a.vprod:hover .vprod__foto{background:var(--accion-suave)}
/* =============================================================================
   EL SELLO DE EVIDENCIA (27-sep-2026)
   Laurel dibujado en scripts/sello_evidencia.py. La forma viene del sello tipo
   «Clinicians' Choice» que mandó Luis de referencia; la frase es nuestra y dice
   algo comprobable en esta misma página, porque un aval prestado no es un aval.
   ========================================================================== */
/* SIN CAJA Y MÁS PEQUEÑO (Luis, 28-sep-2026): «lo quiero transparente, esa
   imagen completa ocupa mucho espacio». Tenía razón — el sello venía dentro de
   un recuadro con fondo que, en celular, se apilaba y se comía media pantalla
   para decir una frase. Ahora es una tira: laurel pequeño a la izquierda, la
   frase al lado, sin fondo y sin borde. Y NO se apila en celular: el laurel se
   encoge lo suficiente para que quepan los dos en la misma línea. */
.sello-evidencia{display:flex;align-items:center;gap:.9rem;justify-content:center;
  max-width:560px;margin:1.1rem auto 0;padding:0;background:transparent;border:0}
/* el nombre va DENTRO del laurel, como en los sellos de toda la vida */
.sello__marca{position:relative;display:grid;place-items:center;color:var(--t1);flex:0 0 auto;
  width:104px;height:84px}
.sello__laurel{position:absolute;inset:0;width:100%;height:100%;margin:auto}
.sello__nombre{position:relative;font:400 .66rem/1.12 Georgia,"Times New Roman",serif;
  letter-spacing:-.01em;text-align:center;max-width:58px}
.sello__nombre span{display:block;font-size:.8em}
.sello__dice{margin:0;flex:1 1 auto;font-size:.85rem;line-height:1.48;color:var(--t2);
  text-align:left;min-width:0}
.sello__dice b{color:var(--t1)}
@media (max-width:400px){
  .sello-evidencia{gap:.6rem}
  .sello__marca{width:84px;height:68px}
  .sello__nombre{font-size:.56rem;max-width:48px}
  .sello__dice{font-size:.8rem}
}
/* Lo que aparece cuando la evidencia NO es un desfile de resultados buenos.
   Chaga no tiene un solo ensayo en personas, y decirlo es la parte que da
   confianza; el aviso de seguridad va en el mismo tono, sin letra chica. */
.ciencia__nada{max-width:62ch;margin:1.2rem auto 0;padding:1.1rem 1.25rem;border-radius:var(--r-lg);
  background:var(--papel);border-left:3px solid var(--t2)}
.ciencia__nada p{margin:0 0 .7rem;font-size:.97rem;line-height:1.62}
.ciencia__nada p:last-child{margin-bottom:0}
.ciencia__aviso{max-width:62ch;margin:1.2rem auto 0;padding:1rem 1.2rem;border-radius:var(--r-sm);
  background:#FBF3E8;border-left:3px solid #B4762A;font-size:.91rem;line-height:1.6;color:#4A3A22}
.ciencia__aviso b{color:#2F2411}
/* El estudio que se hizo SOBRE la piel y no por boca: se marca, porque usarlo
   como si respaldara lo que se come sería engañar. */
.estudio--topico{border-style:dashed}
.estudio__etiqueta{display:inline-block;margin-left:.45rem;padding:.12rem .45rem;border-radius:3px;
  background:var(--papel);border:1px solid var(--linea);font:600 .66rem/1.5 var(--mono);
  letter-spacing:.05em;text-transform:uppercase;color:var(--t2);vertical-align:1px}

/* =============================================================================
   EL SOBRESALTO (Luis, 28-sep-2026)
   «Quiero que dé la sensación de sobresalto al seleccionar o cambiar de
   producto, justo por eso pido que esté flotando cada producto.»

   Aquí se ve por qué las fotos tenían que ir sin fondo: `drop-shadow` sigue el
   CONTORNO REAL del producto —la silueta de la bolsa, del frasco— porque lee el
   canal alfa. Con el recuadro blanco que había antes, la sombra habría sido un
   cuadrado y el producto no se habría despegado de la página ni un milímetro.

   El movimiento: el producto se hunde un poco, salta por encima de su tamaño y
   se asienta. Dura 520 ms, que es lo que tarda en leerse como «cambió esto» sin
   volverse un juguete. Quien pidió menos movimiento en su sistema no lo ve.
   ========================================================================== */
.flota{filter:drop-shadow(0 14px 18px rgba(6,15,8,.16)) drop-shadow(0 3px 5px rgba(6,15,8,.10));
  transition:filter .3s var(--ease),transform .3s var(--ease)}
@keyframes sobresalto{
  0%   {transform:translateY(7px) scale(.94); filter:drop-shadow(0 4px 6px rgba(6,15,8,.10))}
  45%  {transform:translateY(-9px) scale(1.05); filter:drop-shadow(0 26px 26px rgba(6,15,8,.22))}
  72%  {transform:translateY(2px) scale(.99)}
  100% {transform:translateY(0) scale(1); filter:drop-shadow(0 14px 18px rgba(6,15,8,.16))}
}
.salta{animation:sobresalto .52s var(--ease) both}
@media (prefers-reduced-motion:reduce){
  .salta{animation:none}
  .flota{transition:none}
}

/* =============================================================================
   EL PRODUCTO DEL CENTRO SALE AL FRENTE (Luis, 28-sep-2026)
   «Que salga hacia el frente el producto cada vez que se vaya deslizando en el
   menú principal, y que los demás queden atrás.»

   Los de atrás se achican y se apagan; el del centro crece y proyecta sombra.
   La sombra va sobre la IMAGEN, no sobre la tarjeta: `drop-shadow` sigue la
   silueta real de la bolsa o del frasco porque lee el canal alfa — por eso las
   fotos tenían que ir sin fondo.
   ========================================================================== */
.vprod{transform:scale(.9);opacity:.5;
  transition:transform .42s var(--ease),opacity .42s var(--ease)}
.vprod__foto img{transition:filter .42s var(--ease)}
.vprod--frente{transform:scale(1);opacity:1}
.vprod--frente .vprod__foto img{
  filter:drop-shadow(0 20px 24px rgba(6,15,8,.20)) drop-shadow(0 5px 8px rgba(6,15,8,.12))}
/* el nombre y el precio de los de atrás pesan menos, para que el ojo no dude */
.vprod__nom,.vprod__pres,.vprod__precio{transition:opacity .42s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .vprod{transform:none;opacity:1;transition:none}
  .vprod__foto img{transition:none}
}
/* El aviso de que abajo hay mayoreo y equipos. Va discreto a propósito: el
   protagonista del inicio es el frasco, pero quien busca kilos tiene que saber
   en el primer vistazo que también están (28-sep-2026). */
.vitrina__otros{margin-top:.5rem;text-align:center;font-size:.9rem;color:var(--t2)}
.vitrina__otros a{color:var(--t1)}
/* Los SEIS hongos en la franja verde (28-sep-2026): cada uno dice dónde se
   consigue, para qué es, qué compuesto lo marca y en qué presentaciones. Antes
   solo salían tres y quien quería Chaga no se enteraba de que existe. */
.seis-tit{margin:0 0 .9rem;text-align:center;font:600 .78rem/1.3 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;opacity:.75}
.tres-hongos--seis{grid-template-columns:1fr}
@media (min-width:560px){.tres-hongos--seis{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.tres-hongos--seis{grid-template-columns:repeat(3,1fr)}}
.tres-hongos--seis > div{text-align:left}
.tres-hongos--seis i{display:block;margin:.15rem 0 .35rem;font:600 .62rem/1.3 var(--mono);
  font-style:normal;letter-spacing:.09em;text-transform:uppercase;opacity:.6}
.tres-hongos--seis em{display:block;margin-top:.35rem;font-style:normal;font-size:.76rem;
  line-height:1.45;opacity:.72}
.seis-nota{max-width:62ch;margin:1.3rem auto 0;text-align:center;font-size:.86rem;line-height:1.6;
  opacity:.8}

/* =============================================================================
   LAS ESTRELLAS (Luis, 28-sep-2026)
   Doradas y RELLENAS, debajo del producto, sin una sola palabra. El cliente las
   pone. («Las quiero doradas por dentro, no vacías», 28-sep.)

   Como ya están llenas, el relleno no puede ser la señal de «elegiste tantas».
   La señal es el TONO: en reposo van en un dorado tranquilo, y las que el
   cliente marca —al pasar por encima y al soltar— pasan a un dorado fuerte y
   suben un pelo. Las que quedan por fuera se apagan. Así se sabe qué eligió sin
   tener que vaciar ninguna.
   ========================================================================== */
.estrellas{display:flex;justify-content:center;gap:.14rem;margin-top:.5rem}
.estrellas button{padding:0 .05rem;border:0;background:none;cursor:pointer;line-height:1;
  font-size:1.12rem;color:#E3C15C;transition:color .12s,transform .12s}
.estrellas button:focus-visible{outline:2px solid var(--accion);outline-offset:2px;border-radius:3px}

/* al pasar por encima: se encienden esta y las anteriores, se apagan las de después */
.estrellas:hover button{color:#C9971F;transform:translateY(-1px)}
.estrellas button:hover ~ button{color:#EFE3C2;transform:none}

/* ya calificado: se queda encendido lo que eligió, apagado lo demás */
.estrellas[data-puesta] button{color:#EFE3C2}
.estrellas[data-puesta="1"] button:nth-child(-n+1),
.estrellas[data-puesta="2"] button:nth-child(-n+2),
.estrellas[data-puesta="3"] button:nth-child(-n+3),
.estrellas[data-puesta="4"] button:nth-child(-n+4),
.estrellas[data-puesta="5"] button:nth-child(-n+5){color:#C9971F}
.estrellas[data-puesta]{pointer-events:none}
@media (prefers-reduced-motion:reduce){.estrellas button{transition:color .12s;transform:none}}

/* La tarjeta de frascos y mayoreo dejó de ser un enlace (el enlace va dentro,
   para dejarle sitio a las estrellas), pero la de EQUIPOS sigue siéndolo: esos
   no se califican, se cotizan por WhatsApp. Las dos formas se peinan igual. */
.vprod__ir,a.vprod{display:block;text-decoration:none;color:inherit}

/* =============================================================================
   EL CÓDIGO DE DESCUENTO EN EL CARRITO
   Discreto a propósito. Un campo de cupón grande y con luces le dice a quien NO
   tiene código que se está perdiendo algo, y eso es una razón para cerrar la
   página e irse a buscarlo a Google. Aquí se ve, se usa, y no grita.
   ========================================================================== */
.cupon{display:flex;gap:.5rem;flex-wrap:wrap;margin:.9rem 0 .2rem}
.cupon__campo{flex:1;min-width:140px;margin:0}
.cupon__campo input{width:100%;min-height:42px;padding:0 .8rem;font:inherit;font-size:.92rem;
  border:1.5px solid var(--linea);border-radius:10px;background:#fff;color:inherit;
  text-transform:uppercase;letter-spacing:.04em}
.cupon__campo input::placeholder{text-transform:none;letter-spacing:0;color:var(--t2)}
.cupon__btn{flex:0 0 auto;min-height:42px;padding:0 1.1rem;border:1.5px solid var(--linea);
  background:#fff;border-radius:10px;font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;
  color:inherit}
.cupon__btn:hover{border-color:var(--tinta)}
.cupon__btn:disabled{opacity:.5;cursor:default}
.cupon__aviso{flex:1 0 100%;margin:.1rem 0 0;font-size:.84rem;color:var(--t2)}
.cupon__aviso.bien{color:var(--ok);font-weight:600}
.cupon__aviso.mal{color:var(--alerta)}
/* aplicado: el campo se bloquea y se marca, para que se vea que ya está puesto */
.cupon--puesto .cupon__campo input{border-color:var(--ok);background:var(--ok-suave);font-weight:700}

/* =============================================================================
   LA VENTANA DEL CORREO
   Pequeña y abajo a la derecha en escritorio, y una lámina al pie en celular.
   No tapa la página entera a propósito: una ventana que ocupa toda la pantalla
   para pedir un correo se cierra sin leerse.

   YA NO ES UN <dialog> (29-sep-2026). En el teléfono de Luis no aparecía ni
   forzándola, en varios navegadores, y sin poder reproducir ese teléfono lo
   sensato era dejar de depender de <dialog> en vez de seguir adivinando qué le
   pasa ahí. Una capa fija con una clase funciona en todo lo que tenga CSS.
   ========================================================================== */
.bienve-capa{position:fixed;inset:0;z-index:200;display:none;
  background:rgba(6,15,8,.28)}
.bienve-capa.on{display:block}
.bienve{position:absolute;right:1rem;bottom:1rem;width:min(340px,calc(100% - 2rem));
  border:1px solid var(--linea);border-radius:var(--r-lg);background:#fff;color:inherit;
  padding:1.3rem 1.3rem 1.1rem;box-shadow:0 18px 50px rgba(6,15,8,.18);
  max-height:calc(100% - 2rem);overflow:auto}
.bienve .ojo{margin:0 0 .35rem}
.bienve h2{margin:0 0 .4rem;font-size:1.22rem;line-height:1.18;letter-spacing:-.02em}
.bienve__sub{margin:0 0 .9rem;font-size:.88rem;line-height:1.5;color:var(--t2)}
.bienve__form{display:grid;gap:.5rem}
.bienve__form input{width:100%;min-height:46px;padding:0 .9rem;font:inherit;font-size:.95rem;
  border:1.5px solid var(--linea);border-radius:10px;background:#fff;color:inherit}
.bienve__form .btn{width:100%;justify-content:center}
.bienve__aviso{margin:.7rem 0 0;font-size:.88rem;line-height:1.45}
.bienve__aviso.bien{color:var(--ok)}
.bienve__aviso.mal{color:var(--alerta)}
.bienve__legal{margin:.7rem 0 0;font-size:.72rem;line-height:1.45;color:var(--t2)}
.bienve__legal a{color:inherit}
.bienve__acepto{display:flex;gap:.55rem;align-items:flex-start;margin:.2rem 0 .8rem;font-size:.8rem;line-height:1.4;color:var(--t2);cursor:pointer}
.bienve__acepto input{flex:none;width:18px;height:18px;margin:.1rem 0 0;accent-color:var(--tinta,#060F08)}
.bienve__x{position:absolute;top:.5rem;right:.6rem;width:32px;height:32px;border:0;background:none;
  font-size:1.5rem;line-height:1;color:var(--t2);cursor:pointer;border-radius:50%}
.bienve__x:hover{background:var(--papel);color:var(--t1)}
@media (max-width:520px){
  /* lámina pegada al pie, de lado a lado */
  .bienve{right:0;left:0;bottom:0;width:100%;max-width:100%;
    max-height:calc(100% - 2.5rem);
    border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0;
    padding-bottom:calc(1.1rem + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:no-preference){
  .bienve-capa.on .bienve{animation:bienve-sube .32s var(--ease)}
  @keyframes bienve-sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
/* los cuatro campos de la ventana del correo */
.bienve__gancho{margin:0 0 .9rem;padding:.6rem .75rem;background:var(--papel);border-radius:8px;
  font-size:.82rem;line-height:1.45;color:var(--t2)}
.bienve__fila{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.bienve__campo{display:grid;gap:.22rem;margin:0}
.bienve__campo>span{font:500 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--t2)}
.bienve__campo input{width:100%;min-height:44px;padding:0 .8rem;font:inherit;font-size:.94rem;
  border:1.5px solid var(--linea);border-radius:10px;background:#fff;color:inherit}
.bienve__campo input:focus-visible{outline:2px solid var(--accion);outline-offset:1px}
/* Nota explicativa al pie de una sección. Existe porque estos párrafos venían
   usando .vitrina__grupo, que es monoespaciada: sirve para una etiqueta de tres
   palabras y se vuelve ilegible en un texto de tres líneas. */
.nota{max-width:60ch;margin:1.1rem auto 0;font-size:.88rem;line-height:1.55;color:var(--t2)}
.nota b{color:var(--t1)}
.nota--centro{text-align:center}
/* el puente a los programas, encima del botón de pagar */
.ir-programas{margin:.2rem 0 .9rem;padding:.75rem .85rem;background:var(--papel);
  border-radius:10px;font-size:.88rem;line-height:1.45;text-align:center}
.ir-programas a{color:inherit;font-weight:650}

/* =============================================================================
   AJUSTES SOLO PARA PANTALLA GRANDE  (Luis, 29-sep-2026)
   «Organiza todo que se vea bien en la PC; en celular no modifiques nada.»

   Por eso TODO lo de aquí vive dentro de un @media de ancho mínimo: en celular
   no se aplica ni una línea. Lo que se arregla es lo que solo se rompe cuando
   hay sitio de sobra — que es el problema contrario al de siempre: los bloques
   pensados para 390 px se estiran a 1.200 y se vuelven ilegibles.
   ========================================================================== */
@media (min-width:900px){
  /* Una tabla de 1.180 px con cinco columnas obliga a recorrer el ojo medio
     metro para juntar «7–9 frascos» con «ganas $124.600». Acotada a 860 se lee
     de una sola pasada. */
  .tabla-envoltura{max-width:860px;margin-inline:auto}

  /* La nota que explica la tabla se alinea CON la tabla, no con la página:
     suelta al borde izquierdo de un contenedor de 1.180 px parecía de otra
     sección. */
  .nota{max-width:860px}

  /* .btn--xl es «ancho completo» porque nació para el carrito, que mide 440 px.
     Suelto en una página se estira a 1.180 y deja de parecer un botón. */
  .cap .btn--xl{width:auto;min-width:280px;padding-inline:2.4rem}

  /* El texto de las portadas cortas no debe cruzar la pantalla entera: por
     encima de unos 70 caracteres por línea el ojo pierde el renglón al volver. */
  .portada--corta .envoltura>p{max-width:62ch}
}

/* =============================================================================
   LA TIRA DE PROGRAMAS SOBRE LA BARRA FIJA
   Va pegada encima de la barra de abajo y SOLO en páginas de mayoreo. Quien
   está mirando kilos es quien puede estar comprando para revender sin saber que
   hay un programa con mejor precio, y este es el sitio donde mira todo el rato.

   Su altura NO se adivina: la barra mide distinto en celular (franja de lado a
   lado) que en escritorio (pastilla centrada de 640 px), y con un número fijo la
   tira se montaba encima. El alto real lo mide pdp.js y lo deja en --fija-alto.
   ========================================================================== */
.fija__programas{position:fixed;left:0;right:0;bottom:var(--fija-alto,62px);z-index:69;margin:0;
  padding:.55rem .9rem;background:var(--tinta);color:#EFF4F0;text-align:center;
  font-size:.82rem;line-height:1.35;
  transform:translateY(200%);transition:transform .3s var(--ease)}
.fija__programas.on{transform:none}
.fija__programas a{color:#A0EEA2;text-decoration:none;font-weight:600}
.fija__programas a:hover{text-decoration:underline}
@media (min-width:900px){
  /* En escritorio la barra es una pastilla centrada: la tira se le acomoda
     encima con el mismo ancho, o se vería una franja de pared a pared sobre un
     botón de 640 px. */
  .fija__programas{left:50%;right:auto;width:min(640px,calc(100% - 2rem));
    border-radius:var(--r-pill);transform:translate(-50%,240%)}
  .fija__programas.on{transform:translate(-50%,0)}
}
@media (prefers-reduced-motion:reduce){.fija__programas{transition:none}}
/* Cuando en la barra queda un solo botón —porque la foto y el texto se esconden
   para que quepan dos acciones— ese botón se quedaba arrinconado a la izquierda
   con media barra vacía al lado. Si es el único, ocupa el ancho. */
.fija .btn:only-of-type{flex:1;justify-content:center}

/* --- la campaña de temporada -------------------------------------------- */
/* Se esconde por defecto y la muestra assets/campana.js solo si la fecha cae
   dentro de la ventana. Al revés —visible por defecto y que el script la
   quite— bastaría un error de JS para dejar colgada una promoción vencida. */
[data-campana]{display:none!important}

/* La franja: lo primero que se ve, y lo único que de verdad hace que un código
   se use. Va en los colores que ya existen en el manual —el naranja del
   Cordyceps y el violeta de la Melena— sobre la tinta de la marca. */
.franja{background:var(--tinta,#060F08);color:#F0F5F1;position:relative;overflow:hidden;
  border-bottom:1px solid rgba(160,238,162,.22)}
.franja__fondo{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(120% 180% at 12% 120%,rgba(247,127,32,.45),transparent 55%),
             radial-gradient(120% 180% at 88% -20%,rgba(173,128,221,.42),transparent 55%)}
.franja__fila{position:relative;display:flex;align-items:center;justify-content:center;
  gap:.9rem;flex-wrap:wrap;padding:.62rem 1rem;text-align:center}
.franja b{color:#A0EEA2}
.franja__codigo{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;
  letter-spacing:.09em;border:1px dashed rgba(160,238,162,.65);border-radius:.4rem;
  padding:.16rem .5rem;white-space:nowrap}
.franja__texto{font-size:.84rem;line-height:1.35;margin:0}
.franja__hasta{font-size:.76rem;opacity:.72;white-space:nowrap}
@media (max-width:759px){
  .franja__fila{gap:.5rem;padding:.55rem .8rem}
  .franja__texto{font-size:.79rem;width:100%}
  .franja__hasta{font-size:.72rem}
}

/* Los dos caminos del pie: pagar ya, o hablar. Va en flex y no con una media
   query porque la media query mide la VENTANA, y este pie vive dentro de una
   columna que se estrecha antes que la pantalla: el enlace se partia por la
   mitad en un movil ancho. Con `flex-wrap`, cuando no caben los dos, cada uno
   baja ENTERO. El separador no es decorativo: sin el, los dos enlaces seguidos
   se leen como uno solo. */
.vitrina__pie--dos{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:center;gap:.15rem .1rem}
.vitrina__o{color:var(--t2,#5D675F);font-size:.85em;opacity:.7;margin:0 .55rem}

/* --- la promoción del mes, en /promociones ------------------------------- */
/* Los precios van tachado → nuevo porque es un descuento real y temporal: el
   precio de antes se cobró de verdad hasta ayer y vuelve a cobrarse el 1 de
   noviembre. Si fuera un precio inflado para parecer rebaja, esto no podría
   mostrarse así (y en Colombia la SIC lo sanciona). */
.codigo-mes{max-width:34rem;margin:1.6rem auto 0;border:1px solid var(--linea,#DDE4DE);
  border-radius:1rem;padding:1.5rem 1.4rem;background:#fff;text-align:center}
.codigo-mes__rotulo{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--t2,#5D675F);margin:0 0 .5rem}
.codigo-mes__valor{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;
  font-size:1.9rem;letter-spacing:.1em;margin:0 0 1.2rem;color:var(--t1,#060F08)}
.codigo-mes__precios{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.codigo-mes__precios li{display:flex;align-items:baseline;justify-content:space-between;
  gap:.6rem;border-top:1px solid var(--linea,#DDE4DE);padding-top:.55rem}
.codigo-mes__precios li:first-child{border-top:0;padding-top:0}
.codigo-mes__precios span{color:var(--t2,#5D675F);font-size:.92rem}
.codigo-mes__precios s{color:var(--t2,#5D675F);opacity:.65;margin-left:auto;font-size:.9rem}
.codigo-mes__precios b{font-size:1.05rem;min-width:5.6rem;text-align:right}
@media (max-width:519px){
  .codigo-mes{padding:1.2rem 1rem}
  .codigo-mes__valor{font-size:1.55rem}
}


/* --- el aviso de campaña, dentro de la cinta de siempre ------------------ */
/* No es otra barra: es el primero de los mensajes que ya rotaban ahí. Así
   arriba hay UNA sola franja, que ya era fija al hacer scroll y ya rotaba
   sola (7-oct, pedido de Luis tras la nota del distribuidor). */
.anuncio li[data-campana]{display:none}
.anuncio__codigo{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;
  letter-spacing:.07em;color:var(--micelio,#A0EEA2);white-space:nowrap}

/* El código en la portada de campaña: se nombra, no se grita. Mono y pequeño,
   detrás del precio — quien lo busca lo ve, y a quien no le interesa no le
   salta encima (8-oct). */
.portada__codigo{display:inline-block;margin-left:.15rem;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.78em;
  letter-spacing:.06em;opacity:.72}

/* `overflow-anchor:none` en la pista, arriba, no es un adorno: la portada de
   campaña nace oculta y la enciende `campana.js`. Al aparecer POR DELANTE de
   las demás, el navegador «ancla» el scroll para que sigas viendo la lámina
   que ya tenías delante — y el carrusel abría en la segunda en vez de en la
   primera. Sin anclaje, abre donde debe (8-oct). */

/* --- la portada de fondo claro ------------------------------------------ */
/* Todas las portadas son oscuras menos la de la calabaza, que va sobre hueso.
   En ESCRITORIO el texto cae a la izquierda, sobre el fondo claro, y el blanco
   de las demás ahí no se lee: se invierte a tinta.
   En CELULAR no, y esa es la trampa: ahí el texto va ENCIMA de la foto, y
   arriba lo que hay debajo no es el fondo claro sino la calabaza. Con tinta,
   el titular desaparecía. Así que en celular esta portada se comporta como las
   demás —texto claro sobre el velo oscuro de siempre— y solo cambia de
   escritorio para arriba (8-oct). */
@media (min-width:760px){
  .portada--clara .portada__texto h2,
  .portada--clara .portada__texto p{color:var(--tinta,#060F08)}
  .portada--clara .portada__texto .ojo{color:#2F6B34}
  .portada--clara .portada__texto .portada__precio b{color:var(--tinta,#060F08)}
  .portada--clara .portada__codigo{opacity:.8}
  .portada--clara .portada__texto .btn{background:var(--tinta,#060F08);color:#F0F5F1}
}

/* --- menos aire entre «Hongos de verdad» y la vitrina de frascos --------- */
/* Luis, 8-oct: «queda muy separado, se pierde demasiado espacio». Entre la
   lista de los seis hongos y «Escoge tu hongo y presentación ideales» había
   tres espacios sumándose: el de abajo de la franja, el de arriba de la
   sección y el del encabezado. Se recortan los tres, sin juntarlos: la lista
   y el título siguen leyéndose como dos bloques distintos. */
.portada-inicio--franja{padding-bottom:clamp(4px,1vh,10px)}
.portada-inicio--franja + .cap{padding-top:clamp(12px,1.8vh,22px)}
.portada-inicio--franja + .cap > .envoltura > .cab-sec{margin-bottom:clamp(.9rem,2vw,1.3rem)}
.seis{margin-top:.85rem}
/* El titular de ESTA vitrina baja de 4,4rem a 2,9rem. Es el único que cae
   justo debajo de la lista de los seis hongos, y a tamaño de portada no se
   leía como un título de sección sino como un segundo grito. Los demás
   titulares de la página no se tocan. */
.portada-inicio--franja + .cap .cab-sec h2{font-size:clamp(1.8rem,4.6vw,2.9rem);margin-top:.3rem}
.portada-inicio--franja + .cap .vitrina__grupo{margin-top:.25rem}


/* --- TAMAÑOS DE PORTADA EN CELULAR -------------------------------------- */
/* Van AL FINAL del archivo a propósito. Las mismas reglas estaban más arriba,
   dentro del bloque de celular, pero la declaración general de `.portada__texto
   h2` viene después y, con la misma especificidad, gana la última: por eso los
   titulares seguían saliendo grandes por mucho que se bajaran allí. Aquí, al
   final, ya no hay nada detrás que las pise.
   Luis, 8-oct: «están ocupando demasiado espacio y quitan protagonismo al
   producto». */
@media (max-width:759px){
  .portada__texto h2{font-size:1.02rem!important;line-height:1.2;
    letter-spacing:-.01em;margin:.18rem 0 .3rem}
  .portada .cursiva{font-size:1.3rem!important}
  .portada__texto p{font-size:.76rem;line-height:1.45}
  .portada__texto .ojo{font-size:.62rem;letter-spacing:.16em}
  .portada__precio{font-size:.78rem!important;margin-top:.3rem!important}
  .portada__texto .btn{font-size:.82rem;min-height:40px;padding-inline:1rem}

  /* y que nada se salga del cuadro, pase lo que pase con el texto */
  .portada__texto h2,
  .portada__texto p,
  .portada__precio{overflow-wrap:break-word;hyphens:auto}
}

/* --- el encuadre de Ganoderma en celular -------------------------------- */
/* En celular la foto se recorta a cuadrado, y esta es la única vertical cuyo
   producto está en el tercio ALTO: con el recorte centrado le cortaba la tapa.
   Se mueve el punto de encaje hacia arriba y el frasco cabe entero.
   Es una sola propiedad y no toca la altura de nada: intentar resolverlo
   cambiándole la proporción hizo crecer la pista del carrusel y les dejó una
   banda negra a TODAS las demás portadas (8-oct). */
@media (max-width:759px){
  #portada-ganoderma .portada__foto{object-position:50% 30%}
}

/* --- REPARTO DEL ESPACIO EN CELULAR ------------------------------------- */
/* Luis, 8-oct, con el reparto dibujado encima de la pantalla: el producto a un
   lado y el texto contenido en el otro, sin invadirlo. Antes el texto cruzaba
   por delante del frasco y se perdía espacio por los dos lados.
   Va al final del archivo porque las reglas equivalentes están más arriba y,
   con la misma especificidad, gana la última. */
@media (max-width:759px){

  /* La primera portada: todo centrado, incluido el precio, que se quedaba
     pegado al borde izquierdo mientras el resto iba al centro. */
  .mv-arr .portada__texto{text-align:center}
  .mv-arr .portada__texto .ojo,
  .mv-arr .portada__precio{text-align:center;width:100%}
  .mv-arr .portada__texto .btn{align-self:center}

  /* Las de producto a la izquierda: el texto se queda en la mitad derecha y
     no la pasa. 56 % deja ver el frasco entero y da renglones legibles. */
  .mv-arr-der .portada__texto{left:auto;right:0;width:56%;text-align:left;
    padding:1.1rem 1.05rem 1.1rem 0}
  .mv-arr-der .portada__texto .btn{width:100%;min-width:0;padding-inline:.7rem;
    font-size:.78rem}
  .mv-arr-der::after{background:linear-gradient(260deg,
    rgba(6,15,8,.93) 0%, rgba(6,15,8,.78) 30%, rgba(6,15,8,.28) 55%, rgba(6,15,8,0) 74%)}

  /* Y las de producto a la derecha, lo mismo pero al revés. */
  .mv-arr-izq .portada__texto{right:auto;left:0;width:56%;text-align:left;
    padding:1.1rem 0 1.1rem 1.05rem}
  .mv-arr-izq .portada__texto .btn{width:100%;min-width:0;padding-inline:.7rem;
    font-size:.78rem}
}

/* --- centrado real y reparto vertical en celular ------------------------- */
/* OCTUBRE no quedaba centrado aunque su texto sí lo estuviera: el bloque de la
   portada es `flex` en columna, y ahí un hijo no ocupa el ancho entero — el
   rótulo medía 274 px dentro de 368 y se iba 47 px a la izquierda. Se centra
   por el CONTENEDOR (`align-items`), que no depende de que cada hijo acierte
   con su ancho.
   Y el texto de las laterales se reparte en el alto de su mitad en vez de
   apelotonarse arriba dejando un vacío debajo: así los espacios quedan
   parejos, que es lo que pidió Luis el 8-oct con el reparto dibujado. */
@media (max-width:759px){
  .mv-arr .portada__texto{align-items:center}
  .mv-arr .portada__texto > *{max-width:100%}

  .mv-arr-der .portada__texto,
  .mv-arr-izq .portada__texto{display:flex;flex-direction:column;
    justify-content:center;gap:.1rem}
  .mv-arr-der .portada__texto > *,
  .mv-arr-izq .portada__texto > *{width:100%}

  /* El velo cubre la mitad del texto de arriba abajo, no solo su esquina:
     con el texto repartido en todo el alto, un velo en diagonal corta dejaba
     el precio sobre la foto a pelo. */
  .mv-arr-der::after{background:linear-gradient(270deg,
    rgba(6,15,8,.94) 0%, rgba(6,15,8,.86) 26%, rgba(6,15,8,.45) 48%,
    rgba(6,15,8,.12) 62%, rgba(6,15,8,0) 75%)}
  .mv-arr-izq::after{background:linear-gradient(90deg,
    rgba(6,15,8,.94) 0%, rgba(6,15,8,.86) 26%, rgba(6,15,8,.45) 48%,
    rgba(6,15,8,.12) 62%, rgba(6,15,8,0) 75%)}
}

/* El bloque lateral tiene que OCUPAR todo el alto de la portada; si no, se
   encoge hasta su contenido y `justify-content` no tiene sobre qué repartir:
   el texto se quedaba arriba con un vacío debajo. Con `top:0;bottom:0` el
   bloque abarca la mitad entera y el texto se centra de verdad en ella. */
@media (max-width:759px){
  .mv-arr-der .portada__texto,
  .mv-arr-izq .portada__texto{top:0;bottom:0;height:auto}
}

/* --- llévate más de uno, debajo de las fotos ----------------------------- */
/* Vive pegado a la galería porque es donde el cliente ya está mirando el
   producto; el selector de paquetes de más abajo sigue existiendo y es el que
   manda — esto solo lleva hasta allí con el radio ya marcado (12-oct). */
.llevaDos{margin:1.1rem 0 0;padding:1rem 1.05rem 1.05rem;border:1px solid var(--linea,#DDE4DE);
  border-radius:1rem;background:var(--papel,#F4F6F4)}
.llevaDos__gancho{margin:0 0 .85rem;font-size:.92rem;line-height:1.5;color:var(--t2,#5D675F)}
.llevaDos__gancho b{color:var(--t1,#060F08);font-weight:600}
.llevaDos__opciones{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.llevaDos__op{position:relative;display:grid;gap:.1rem;padding:.85rem .8rem;
  border:1px solid var(--linea,#DDE4DE);border-radius:.8rem;background:#fff;
  text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.llevaDos__op:hover{border-color:var(--t1,#060F08);transform:translateY(-1px)}
.llevaDos__op--mejor{border-color:#A0EEA2;box-shadow:0 0 0 1px #A0EEA2 inset}
.llevaDos__sello{position:absolute;top:-.55rem;left:.7rem;background:#A0EEA2;color:#060F08;
  font:600 .6rem/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.07em;
  text-transform:uppercase;padding:.3rem .45rem;border-radius:.3rem}
.llevaDos__n{font-weight:600;font-size:1rem}
.llevaDos__dias{font:500 .68rem/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t2,#5D675F);margin-bottom:.35rem}
.llevaDos__precio{font-variant-numeric:tabular-nums;font-size:.95rem}
.llevaDos__precio s{color:var(--t2,#5D675F);opacity:.6;font-size:.82em;margin-right:.25rem}
.llevaDos__precio b{font-weight:700}
.llevaDos__cu{font-size:.72rem;color:var(--t2,#5D675F);line-height:1.35}
.llevaDos__pie{margin:.8rem 0 0;font-size:.76rem;color:var(--t2,#5D675F)}
@media (max-width:519px){
  .llevaDos{padding:.9rem .85rem}
  .llevaDos__gancho{font-size:.86rem}
  .llevaDos__opciones{gap:.5rem}
  .llevaDos__op{padding:.75rem .6rem}
  .llevaDos__n{font-size:.92rem}
  .llevaDos__precio{font-size:.88rem}
}

/* Las miniaturas de la ficha, apagadas: ese sitio lo ocupa ahora la promoción
   de 2 y 3 frascos, que es lo que mueve la compra. La galería se sigue
   navegando con sus flechas y deslizando (12-oct). */
.galeria__minis--off{display:none}

/* Con dos sellos, las tarjetas necesitan aire arriba para que no se monten
   sobre el borde ni sobre el texto. */
.llevaDos__opciones{margin-top:.75rem}
.llevaDos__sello--dos{background:var(--t1,#060F08);color:#F0F5F1}
.llevaDos__op--dos{border-color:#C9D3CB}
@media (max-width:519px){
  .llevaDos__sello{font-size:.54rem;padding:.26rem .36rem;left:.5rem}
}

/* --- el selector de frascos, ahora debajo de la foto --------------------- */
/* Más compacto que cuando vivía dentro del panel: aquí compite por la primera
   pantalla, así que cada píxel cuenta (Luis, 12-oct: «sé cauto con los
   tamaños, consumes mucho espacio»). */
/* Tres pastillas en una fila, no tres tarjetas con foto. Las tarjetas de
   «Combo de 2» y «Combo de 3» ocupaban media pantalla en el celular y
   repetían la foto del frasco que ya está arriba (Luis, 12-oct: «elimina los
   combos 2 y 3 de la página individual»). La venta de 2 y 3 no se pierde: el
   precio y el envío gratis se leen aquí, y al agregar al carrito la
   microventana lo vuelve a ofrecer con un clic. */
.cuantos{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;border:0;padding:0;margin:.9rem 0 0}
.cuantos__op{position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.5rem .35rem .6rem;border:1.5px solid #D7DFD8;border-radius:.75rem;cursor:pointer;
  background:#fff;text-align:center;transition:border-color .18s,box-shadow .18s,background .18s}
.cuantos__op input{position:absolute;opacity:0;width:0;height:0}
.cuantos__op:hover{border-color:#A9BBAD}
.cuantos__op:has(input:checked){border-color:var(--t1,#060F08);background:#F4F8F4;
  box-shadow:0 0 0 1px var(--t1,#060F08) inset}
.cuantos__op:has(input:focus-visible){outline:2px solid var(--v1,#2F6B41);outline-offset:2px}
/* El título es lo primero que se lee: es la razón para subir de cantidad, no un pie de foto */
.cuantos__titulo{display:block;min-height:2.1em;font-size:.63rem;line-height:1.25;font-weight:600;
  letter-spacing:.01em;color:var(--t2,#5D675F);text-wrap:balance}
.cuantos__titulo--sube{color:var(--v1,#2F6B41)}
/* Los frascos de ESTE hongo, repetidos: dos para el combo de dos y tres para
   el de tres (Luis, 12-oct). Antes iban las fotos de combo del catálogo, que
   mezclan hongos distintos y traen el polvo delante; aquí lo que tiene que
   quedar claro es cuántos frascos se lleva, no qué hay dentro. */
.cuantos__foto{display:flex;justify-content:center;align-items:flex-end;height:62px;
  margin:.1rem 0 .05rem;width:100%}
.cuantos__foto img{height:100%;width:auto;object-fit:contain;margin-inline:-3%}
.cuantos__foto img:first-child{margin-left:0}
.cuantos__foto img:last-child{margin-right:0}
.cuantos__n{font-size:.82rem;line-height:1.1;font-weight:600;letter-spacing:-.01em}
.cuantos__pre{font-size:.95rem;font-weight:600;line-height:1.2}
/* El recuadro con sello necesita su propio aire: si no, la cinta cae encima
   del título y se leen las dos cosas a la vez. */
.cuantos__op:has(.cuantos__sello){padding-top:.95rem}
.cuantos__sello{position:absolute;top:-.5rem;left:50%;transform:translateX(-50%);
  background:var(--t1,#060F08);color:#F0F5F1;font-size:.54rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.2rem .4rem;border-radius:.3rem;white-space:nowrap}
@media (max-width:519px){
  .cuantos{gap:.35rem}
  .cuantos__op{padding:.45rem .22rem .5rem}
  .cuantos__titulo{font-size:.58rem;min-height:2.3em}
  .cuantos__foto{height:48px}
  .cuantos__foto img{margin-inline:-5%}
  .cuantos__n{font-size:.74rem}
  .cuantos__pre{font-size:.84rem}
}

/* El puente a la tabla por cantidad, pegado a la opción de 3 frascos: a quien
   ya está mirando el combo más grande es a quien le sirve saber que desde 5
   el descuento sigue subiendo solo (12-oct). */
.paq__mas{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.3rem;margin:.65rem 0 0;font-size:.76rem;line-height:1.45;text-align:center}
.paq__mas i{font-style:normal;color:var(--t2,#5D675F)}
@media (max-width:519px){.paq__mas{font-size:.68rem;gap:.22rem}}
.paq__mas a{color:var(--t1,#060F08);text-underline-offset:3px;font-weight:500}
.paq__mas span{display:inline-block;transition:transform .2s}
.paq__mas a:hover span{transform:translateX(2px)}

/* --- las tres posologías, una al lado de otra ---------------------------- */
/* Quien duda entre cápsulas y polvo decide aquí; antes tenía que salir a otra
   página para comparar, justo cuando estaba a punto de comprar (12-oct). */
.dosis{margin:1.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--linea,#DDE4DE)}
.dosis__titulo{font:500 .72rem/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t2,#5D675F);margin:0 0 .85rem}
.dosis__tabla{width:100%;border-collapse:collapse;font-size:.86rem;text-align:left}
.dosis__tabla th{font:500 .66rem/1.3 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t2,#5D675F);padding:0 .5rem .5rem 0;font-weight:500;
  border-bottom:1px solid var(--t1,#060F08)}
.dosis__tabla td{padding:.65rem .5rem .65rem 0;border-bottom:1px solid var(--linea,#DDE4DE);
  vertical-align:top;line-height:1.4}
.dosis__tabla tr:last-child td{border-bottom:0}
.dosis--esta td{background:var(--papel,#F4F6F4)}
.dosis--esta td:first-child{box-shadow:inset 3px 0 0 #A0EEA2}
.dosis__pie{margin:.85rem 0 0;font-size:.78rem;line-height:1.45;color:var(--t2,#5D675F)}
@media (max-width:519px){
  .dosis__tabla{font-size:.78rem}
  .dosis__tabla th:last-child,
  .dosis__tabla td:last-child{display:none}
  .dosis__tabla td{padding:.55rem .4rem .55rem 0}
}

/* --- las tres posologías, en vertical ------------------------------------ */
/* Una tarjeta por presentación, apiladas. En tabla de tres columnas había que
   esconder una en celular —y la que sobraba era justo el «cómo se toma», que
   es lo que resuelve la duda— (Luis, 12-oct: «más clara y en vertical»).
   El estilo de la tabla anterior sigue más arriba pero ya no alcanza a nada. */
.dosis__lista{display:grid;gap:.5rem}
.dosis__item{border:1px solid var(--linea,#DDE4DE);border-radius:.7rem;padding:.75rem .85rem}
.dosis__item.dosis--esta{border-color:#A0EEA2;background:var(--papel,#F4F6F4);
  box-shadow:0 0 0 1px #A0EEA2 inset}
.dosis__pres{margin:0 0 .3rem;font-weight:600;font-size:.9rem;line-height:1.25}
.dosis__aqui{font:500 .58rem/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;
  text-transform:uppercase;color:#2F6B34;background:#DEF9DE;padding:.22rem .36rem;
  border-radius:.28rem;margin-left:.3rem;vertical-align:.08rem;white-space:nowrap}
.dosis__cuanto{margin:0 0 .2rem;font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}
.dosis__como{margin:0;font-size:.8rem;line-height:1.42;color:var(--t2,#5D675F)}

/* Los dos caminos bajo las presentaciones: ver la ficha completa o pasar a
   kilos. Van como enlaces y no como botones para que no compitan con el de
   comprar, que es el que manda en esta página. */
.bajo-pres{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;margin:.9rem 0 0;font-size:.82rem}
.bajo-pres a{color:var(--t1,#060F08);text-underline-offset:3px;font-weight:500}
.bajo-pres span{display:inline-block;transition:transform .2s}
.bajo-pres a:hover span{transform:translateX(2px)}

/* El realce que acompaña al salto hacia el dolor-beneficio cuando se elige
   cuántos frascos. Dos segundos y se apaga; sin movimiento, solo luz. */
@keyframes enfoqueSuave{
  0%{background:rgba(160,238,162,0)}
  18%{background:rgba(160,238,162,.22)}
  100%{background:rgba(160,238,162,0)}
}
.panel--enfoque [data-dolor],
.panel--enfoque [data-beneficio]{animation:enfoqueSuave 2s ease-out 1;border-radius:.5rem;
  box-decoration-break:clone}
@media (prefers-reduced-motion:reduce){
  .panel--enfoque [data-dolor],
  .panel--enfoque [data-beneficio]{animation:none}
}

/* ===== microventana del carrito: escalera de precio y «súmale otro hongo» ===
   Luis, 12-oct: «añade la etiqueta de 2 en 170.000 y envío gratis y 3 en
   249.000 y envío gratis, persuadiendo igual a la compra, junto a la
   microventana que se abre al seleccionar Añadir al carrito». */
.upsell__escalera{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:.6rem 0 .7rem}
.upsell__peldano{display:flex;flex-direction:column;gap:.1rem;padding:.45rem .5rem;
  border:1px solid rgba(255,255,255,.22);border-radius:.55rem;background:rgba(255,255,255,.07)}
.upsell__peldano b{font:600 .8rem/1.15 inherit}
.upsell__peldano small{font-size:.62rem;line-height:1.25;opacity:.8}
.upsell__peldano--este{border-color:rgba(160,238,162,.8);background:rgba(160,238,162,.16)}

.suma{padding:.85rem 1rem 1rem;border-top:1px solid #E3EAE4;background:#F7FAF7}
.suma__titulo{margin:0;font:600 .95rem/1.25 inherit}
.suma__sub{margin:.2rem 0 .6rem;font-size:.74rem;line-height:1.45;color:var(--t2,#5D675F)}
.suma__hongo{margin-top:.4rem;border:1.5px solid #D7DFD8;border-radius:.7rem;background:#fff;overflow:hidden}
.suma__hongo--abierto{border-color:var(--t1,#060F08)}
.suma__btn{display:flex;align-items:center;gap:.6rem;width:100%;padding:.5rem .6rem;
  border:0;background:none;cursor:pointer;text-align:left;font:inherit}
.suma__btn img{width:40px;height:40px;flex:0 0 40px;border-radius:.45rem;object-fit:cover}
.suma__texto{flex:1;display:flex;flex-direction:column;gap:.05rem;min-width:0}
.suma__texto b{font:600 .88rem/1.2 inherit}
.suma__texto small{font-size:.68rem;line-height:1.3;color:var(--t2,#5D675F)}
.suma__mas{flex:0 0 26px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:var(--t1,#060F08);color:#F0F5F1;font-size:1rem;line-height:1}
.suma__pres{padding:.1rem .6rem .65rem}
/* Antes de elegir: cuánto vale, cómo va el envío y qué le deja el hongo. Las
   presentaciones van despues y son lo que manda (Luis, 12-oct). */
.suma__valor{display:flex;align-items:center;gap:.4rem;margin:0 0 .15rem}
.suma__valor b{font:600 1rem/1 inherit}
.suma__envio{font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;padding:.16rem .36rem;
  border-radius:.3rem;background:#ECF1EC;color:var(--t2,#5D675F)}
.suma__envio--si{background:#A0EEA2;color:var(--t1,#060F08);font-weight:600}
.suma__corto{margin:0 0 .5rem;font-size:.76rem;line-height:1.4;color:var(--t1,#060F08)}
.suma__pres-tit{margin:0 0 .35rem;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--t2,#5D675F)}
.suma__enlaces{display:flex;flex-direction:column;gap:.22rem;margin:.55rem 0 0}
.suma__enlaces a{font-size:.74rem;line-height:1.35;color:var(--t1,#060F08);font-weight:500;
  text-underline-offset:3px}
.suma__pres-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.suma__op{display:flex;flex-direction:column;gap:.1rem;padding:.4rem .3rem;border:1.5px solid #D7DFD8;
  border-radius:.55rem;background:#fff;cursor:pointer;text-align:center;font:inherit;
  transition:border-color .15s,background .15s}
.suma__op:hover{border-color:var(--t1,#060F08);background:#F4F8F4}
.suma__op b{font:600 .74rem/1.2 inherit}
.suma__op small{font-size:.6rem;line-height:1.2;color:var(--t2,#5D675F)}
@media (max-width:519px){
  .upsell__escalera{grid-template-columns:1fr}
  .suma__op b{font-size:.7rem}
}
.suma__porque{margin:.1rem 0 .4rem;font-size:.68rem;line-height:1.4;color:var(--t2,#5D675F)}

/* Las dos salidas al pie de la ventana de presentaciones */
.ventana__enlaces{display:flex;flex-direction:column;gap:.3rem;margin:.9rem 0 0;
  padding-top:.75rem;border-top:1px solid var(--linea-2,#E3EAE4)}
.ventana__enlaces a{font-size:.82rem;line-height:1.4;color:var(--t1,#060F08);font-weight:500;
  text-underline-offset:3px}
.ventana__enlaces a::before{content:"– ";color:var(--t2,#5D675F)}
/* El remate del combo de 3: lo que gana y el envío, debajo del precio */
.cuantos__info{margin-top:.2rem;font-size:.62rem;line-height:1.3;color:var(--t2,#5D675F)}
@media (max-width:519px){.cuantos__info{font-size:.56rem}}

/* ===== la tabla de las tres presentaciones =================================
   Luis, 12-oct: «en esta sección sigue siendo protagonista solo las cápsulas;
   necesito una tabla con las 3 presentaciones». La columna de la presentación
   que se está viendo va marcada, para no perder de vista en qué página está
   uno mientras compara. */
.tabla-pres__caja{margin:1.1rem 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--linea-2,#E3EAE4);border-radius:.9rem;background:#fff}
.tabla-pres{width:100%;border-collapse:collapse;font-size:.78rem;line-height:1.35}
.tabla-pres th,.tabla-pres td{padding:.5rem .55rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--linea-2,#E3EAE4)}
.tabla-pres tbody tr:last-child th,.tabla-pres tbody tr:last-child td{border-bottom:0}
.tabla-pres thead th{font-size:.74rem;font-weight:600;line-height:1.2;
  border-bottom:1.5px solid var(--t1,#060F08);background:#F7FAF7}
.tabla-pres thead th span{display:block}
.tabla-pres thead th b{display:block;margin-top:.12rem;font-size:.58rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--v1,#2F6B41)}
/* la primera columna: el nombre del dato, no un valor */
.tabla-pres tbody th{width:7.2rem;font-size:.7rem;font-weight:600;color:var(--t2,#5D675F);
  background:#FBFDFB}
.tabla-pres .pres--esta{background:#F1F8F2}
.tabla-pres thead .pres--esta{background:#E4F3E6}
@media (max-width:519px){
  .tabla-pres{font-size:.68rem}
  .tabla-pres th,.tabla-pres td{padding:.4rem .36rem}
  .tabla-pres tbody th{width:5.2rem;font-size:.62rem}
  .tabla-pres thead th{font-size:.66rem}
}

/* El título del recuadro puede llevar dos líneas (el combo de 3): el salto
   viene del texto, así que la hoja tiene que respetarlo. */
.cuantos__titulo{white-space:pre-line}

/* Lo que cuesta cada frasco, dentro de la ventana de presentaciones */
.ventana__precios{margin:.9rem 0 0;padding-top:.75rem;border-top:1px solid var(--linea-2,#E3EAE4)}
.ventana__precios summary{cursor:pointer;font-size:.85rem;font-weight:600;list-style:none;
  display:flex;align-items:center;gap:.4rem}
.ventana__precios summary::-webkit-details-marker{display:none}
.ventana__precios summary::before{content:"+";display:grid;place-items:center;width:18px;height:18px;
  border-radius:50%;background:var(--t1,#060F08);color:#F0F5F1;font-size:.8rem;line-height:1;flex:0 0 18px}
.ventana__precios[open] summary::before{content:"−"}
.escalera{width:100%;border-collapse:collapse;margin:.6rem 0 0;font-size:.78rem}
.escalera th,.escalera td{padding:.33rem .4rem;text-align:left;border-bottom:1px solid var(--linea-2,#E3EAE4)}
.escalera th{font-weight:500}
.escalera td.num{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.escalera tr:last-child th,.escalera tr:last-child td{border-bottom:0}
.escalera td:last-child{font-size:.66rem;color:var(--v1,#2F6B41);text-align:right;white-space:nowrap}
.escalera__pie{margin:.4rem 0 0;font-size:.68rem;line-height:1.4;color:var(--t2,#5D675F)}

/* La opción de presentación como BOTÓN (cuando la ventana agrega al carrito en
   vez de llevar a la ficha): mismo aspecto que el enlace, sin estilos de form. */
button.elige-pres{width:100%;font:inherit;text-align:left;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.ventana__pie--vivo{font-weight:600;color:var(--t1,#060F08)}

/* Lo que ya llevas, al abrir la ficha de otro producto */
.llegada{display:flex;gap:.45rem;align-items:flex-start;margin:.8rem 0 0;padding:.55rem .7rem;
  border:1px solid #BFE3C4;border-radius:.6rem;background:#F1F8F2;
  font-size:.76rem;line-height:1.45}
.llegada svg{flex:0 0 16px;margin-top:.15rem;color:var(--v1,#2F6B41)}
/* Los combos debajo de la foto (22-oct): de a dos por fila, como una cuadrícula
   pareja (cuatro opciones en el Combo de 2, dos en el de 3). */
.galeria__minis--off + .mixes-caja .mixes{grid-template-columns:repeat(2,1fr)}