/* =============================================================================
   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:#fff}
.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}
  .tarjetas--secciones{grid-template-columns:1fr}
  .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)}
.tarjetas--secciones{margin-top:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tarjeta--ancha img{aspect-ratio:16/10;object-fit:cover}

/* --- Cuántos frascos, en la página de un hongo ------------------------------ */
.cuantos{display:flex;align-items:center;gap:.6rem;margin:.2rem 0 .4rem}
.cuantos__btn{width:42px;height:42px;display:grid;place-items:center;border:1.5px solid var(--linea-2);
  border-radius:999px;background:var(--blanco);font-size:1.25rem;line-height:1;cursor:pointer;color:var(--t1)}
.cuantos__btn:disabled{opacity:.35;cursor:default}
.cuantos__btn:focus-visible{outline:2px solid var(--accion);outline-offset:2px}
.cuantos__n{min-width:2.2rem;text-align:center;font-size:1.2rem;font-weight:700}
.cuantos__pie{color:var(--t2);font-size:.85rem}

/* --- «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}
.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.5rem;line-height:1.08;margin:.25rem 0 .35rem}
  .portada .cursiva{font-size:1.85rem}
  .portada__texto p{font-size:.86rem;line-height:1.45}
  .portada__precio{margin-top:.4rem !important;font-size:.88rem !important}
  .portada__texto .btn{margin-top:.7rem;width:100%;min-width:0;font-size:.92rem;min-height:46px}
  /* 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.55rem,5.4vw,2.5rem);line-height:1.08;letter-spacing:-.025em;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}
  .portada__foto,.portada__texto{grid-area:1/1}
  .portada__foto{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}}