/* =========================================================================
   Cartilla de plantas · Plantae SC — pantalla completa
   La página es solo la revista. Ocupa todo el alto y el ancho de la pantalla (también en celular, con las
   zonas seguras del iPhone) y abajo queda una barra chica: pantalla completa · ‹ página › · pedido.
   Usa las variables y piezas del sitio (styles.css): botones, etiquetas, carrito, cartelito.
   ========================================================================= */

/* ---------- Pantalla completa ---------- */
:root{--dock:68px;--gap:clamp(8px,1.6vmin,22px)}
/* En esta página no se usa el zoom de 75 % de las notebooks: la revista mide justo lo que hay en pantalla */
html.ct-full{zoom:1!important;height:100%;overflow:hidden;scroll-behavior:auto;overscroll-behavior:none}
html.ct-full body{height:100%;overflow:hidden;overscroll-behavior:none;padding:0!important;
  background:radial-gradient(70% 60% at 50% 42%,rgba(56,168,99,.13),transparent 72%),linear-gradient(180deg,#F6F9F4 0%,#EAF2EC 100%)}
.ct-app{position:fixed;inset:0;height:100vh;height:100dvh;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
.mag-stage{flex:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;padding:var(--gap);overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* Sombra de la revista: una caja fija DEBAJO de las hojas (no un filtro sobre toda la revista,
   que obligaba al celular a redibujar todo en cada cuadro mientras se da vuelta una hoja) */
.mag{position:relative;flex:none;isolation:isolate}
.mag::before{content:"";position:absolute;top:0;bottom:0;left:var(--sh-l,0);right:var(--sh-r,0);z-index:-1;border-radius:3px;pointer-events:none;
  box-shadow:0 2px 3px rgba(20,40,25,.10),0 22px 36px -14px rgba(20,40,25,.32)}
.ct-fail{color:var(--ink-soft);text-align:center;padding:2rem}

/* ---------- Barra de abajo ---------- */
.ct-dock{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem;
  height:calc(var(--dock) + env(safe-area-inset-bottom,0px));padding:0 calc(var(--gap) + 4px) env(safe-area-inset-bottom,0px)}
.ct-dock-side{display:flex;align-items:center;gap:.5rem;min-width:0}
.ct-dock-side.end{justify-content:flex-end}
.mag-nav{display:flex;align-items:center;justify-content:center;gap:.5rem}
.mag-btn,.ct-ic-btn,.ct-cart,.mag-pg{height:48px;border-radius:999px;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mag-btn{display:inline-flex;align-items:center;gap:.4rem;padding:0 1.15rem;border:1.5px solid rgba(20,20,20,.12);
  background:#fff;color:var(--brown);font-weight:600;font-size:.95rem;transition:border-color .2s,color .2s,opacity .2s;box-shadow:0 6px 16px -12px rgba(20,40,25,.5)}
.mag-btn:hover:not(:disabled){border-color:var(--green-d);color:var(--green-d)}
.mag-btn:disabled{opacity:.35;cursor:not-allowed}
.mag-btn .ic{font-size:20px}
.mag-pg{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:8.5rem;padding:0 1.1rem;border:0;
  background:var(--mint);color:var(--green-d);font-weight:600;font-size:.9rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.ct-ic-btn{width:48px;display:grid;place-items:center;border:1.5px solid rgba(20,20,20,.12);background:#fff;color:var(--brown);transition:border-color .2s,color .2s}
.ct-ic-btn:hover{border-color:var(--green-d);color:var(--green-d)}
.ct-ic-btn .ic{font-size:20px}
/* Volver al índice (barra de abajo). Cuando ya se está en el índice queda marcado */
.ct-idx{display:inline-flex;align-items:center;gap:.4rem;height:48px;padding:0 1.1rem 0 .95rem;border-radius:999px;font:inherit;cursor:pointer;
  border:1.5px solid rgba(20,20,20,.12);background:#fff;color:var(--brown);font-weight:600;font-size:.95rem;white-space:nowrap;
  box-shadow:0 6px 16px -12px rgba(20,40,25,.5);transition:border-color .2s,color .2s,background .2s;-webkit-tap-highlight-color:transparent}
.ct-idx:hover{border-color:var(--green-d);color:var(--green-d)}
.ct-idx .ic{font-size:20px}
.ct-idx.is-here{background:var(--mint);border-color:transparent;color:var(--green-d)}
.mag-btn:focus-visible,.mag-pg:focus-visible,.ct-ic-btn:focus-visible,.ct-cart:focus-visible,.ct-idx:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* Stock en vivo: un puntito dentro del número de página */
.ct-live{display:inline-flex}
.ct-live .dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--green)}
/* Latido hecho con transform y opacidad: lo mueve la placa de video, sin redibujar la barra */
.ct-live .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:ctPulse 2.2s infinite;will-change:transform,opacity}
.ct-live.off .dot{background:#E3A008}
.ct-live.off .dot::after{display:none}
@keyframes ctPulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.8);opacity:0}}

/* Pedido: bolsita con cantidad; cuando hay plantas se pone verde y muestra el total */
.ct-cart{display:inline-flex;align-items:center;gap:.6rem;padding:0 1rem 0 .35rem;border:1.5px solid rgba(20,20,20,.12);background:#fff;color:var(--brown);
  text-align:left;max-width:100%;transition:background .25s,color .25s,border-color .25s;box-shadow:0 6px 16px -12px rgba(20,40,25,.5)}
.ct-cart-ic{position:relative;flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--green-d)}
.ct-cart-ic .ic{font-size:20px}
.ct-cart .badge{top:-4px;right:-6px;border:2px solid #fff}
.ct-cart:not(.has) .badge{display:none}
.ct-cart-t{display:flex;flex-direction:column;line-height:1.15;min-width:0;white-space:nowrap}
.ct-cart-t small{font-size:.72rem;color:var(--ink-soft)}
.ct-cart-t b{font-size:.98rem;overflow:hidden;text-overflow:ellipsis}
.ct-cart.has{background:var(--green-d);border-color:var(--green-d);color:#fff}
.ct-cart.has .ct-cart-ic{background:#fff}
.ct-cart.has .ct-cart-t small{color:rgba(255,255,255,.82)}
.ct-cart.has .badge{background:var(--orange,#E8742A)}

/* Cartelito de "Agregada": arriba en celular (no tapa la barra), arriba de la barra en compu */
html.ct-full .toast{bottom:calc(var(--dock) + env(safe-area-inset-bottom,0px) + 10px)}

/* Tablet y celular acostado */
@media (max-width:760px),(max-height:560px){
  :root{--dock:60px}
  .mag-btn span{display:none}
  .mag-btn{width:48px;justify-content:center;padding:0}
  .mag-pg{min-width:6.5rem;padding:0 .9rem}
  .ct-idx span{display:none}
  .ct-idx{width:48px;justify-content:center;padding:0}
}
/* Celular */
@media (max-width:520px){
  :root{--dock:62px;--gap:8px}
  .ct-dock{gap:.4rem;padding-inline:10px}
  .mag-nav{gap:.35rem}
  .mag-btn,.ct-ic-btn,.mag-pg{height:46px}
  .mag-btn,.ct-ic-btn,.ct-idx{width:46px}
  .ct-idx{height:46px}
  .ct-dock-side{gap:.4rem}
  .mag-pg{min-width:0;padding:0 .8rem;font-size:.84rem}
  .ct-cart{height:46px;padding:0;width:46px;justify-content:center;border-radius:50%}
  .ct-cart-ic{width:100%;height:100%;background:none}
  .ct-cart.has .ct-cart-ic{background:none;color:#fff}
  .ct-cart-t{display:none}
  html.ct-full .toast{top:calc(10px + env(safe-area-inset-top,0px));bottom:auto}
}
@media (max-width:360px){
  /* Muy angosto: se saca pantalla completa, pero "Índice" queda */
  #ctFs{display:none}
}
/* Pantallas muy bajitas (celular acostado): barra más fina */
@media (max-height:440px){
  :root{--dock:52px;--gap:6px}
  .mag-btn,.ct-ic-btn,.mag-pg,.ct-cart{height:40px}
  .mag-btn,.ct-ic-btn,.ct-idx{width:40px}
  .ct-idx{height:40px}
  .ct-cart-ic{width:32px;height:32px}
}

/* ---------- Piezas de cada planta ---------- */
/* Cartel de stock: mismo estilo de etiqueta que "Agotado" u "oferta" */
.flag.ct-st{font-weight:600}
.flag.ct-st.ok{background:#fff;color:var(--green-d)}
.flag.ct-st.few{background:#FFF1D2;color:#8A4B00}
.flag.ct-st.one{background:#C2410C;color:#fff}
/* Tilde de elegida */
.ct-tick{position:absolute;z-index:3;border-radius:50%;display:grid;place-items:center;
  background:var(--green-d);color:#fff;border:3px solid #fff;box-shadow:0 8px 18px -10px rgba(0,0,0,.5);scale:0;transition:scale .3s cubic-bezier(.3,1.6,.5,1)}
.card.ct-on .ct-tick{scale:1}
/* "La quiero" y cantidad */
.ct-want{width:100%;justify-content:center}
.ct-step{display:flex;width:100%;justify-content:space-between;border-color:var(--green);background:var(--mint)}
.ct-step button{background:#fff;box-shadow:0 2px 6px -3px rgba(20,40,25,.35)}
.ct-step button:disabled{opacity:.35;cursor:not-allowed}
.ct-step span{display:flex;flex-direction:column;align-items:center;line-height:1.05;min-width:0}
.ct-step span b{color:var(--green-d)}
.ct-step span small{font-weight:500;color:var(--green-d);white-space:nowrap}
.ct-limit{font-weight:600;color:#8A4B00;text-align:center}
.ct-out{border-radius:999px;background:var(--beige);color:var(--ink-soft);text-align:center;font-weight:500}

@media (prefers-reduced-motion:reduce){
  .ct-live .dot::after{animation:none;display:none}
  .mg-item .mg-pic .photo{transition:none}
  .ct-tick{transition:none}
}

/* Para que StPageFlip reciba el toque en el botón y no en el ícono de adentro */
.mag button *,.mag a *{pointer-events:none}

/* ---------- Página ---------- */
.mg-page{container-type:size;position:relative;overflow:hidden;background:#FFFDF8;color:var(--brown);box-sizing:border-box}
.mg-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:6.5cqw 6cqw 8cqw;box-sizing:border-box}
/* Sombra del lomo: oscurece apenas el borde que va hacia el centro de la revista */
.mg-page.is-left::before,.mg-page.is-right::before{content:"";position:absolute;top:0;bottom:0;width:9cqw;pointer-events:none;z-index:4}
.mg-page.is-left::before{right:0;background:linear-gradient(270deg,rgba(0,0,0,.10),transparent)}
.mg-page.is-right::before{left:0;background:linear-gradient(90deg,rgba(0,0,0,.10),transparent)}
.mg-run{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:2.6cqw;color:var(--ink-soft);
  padding-bottom:2.4cqw;margin-bottom:3cqw;border-bottom:1px solid var(--line)}
.mg-run span{display:flex;align-items:center;gap:1.4cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-run img{width:4.4cqw;height:4.4cqw;border-radius:50%}
/* "‹ Índice" en el renglón de arriba de cada página de plantas */
.mg-run .mg-run-idx{flex:none;display:inline-flex;align-items:center;gap:.25em;margin:-1.2cqw 0 -1.2cqw -1.6cqw;padding:.45em .95em .45em .6em;
  min-height:clamp(28px,7.5cqw,40px);border:0;border-radius:999px;background:var(--mint);color:var(--green-d);
  font:inherit;font-size:clamp(11px,3cqw,14px);font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s}
.mg-run .mg-run-idx:hover{background:var(--green-d);color:#fff}
.mg-run .mg-run-idx .ic{font-size:1.15em}
.mg-run .mg-run-idx:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.mg-folio{position:absolute;bottom:3cqw;font-size:2.8cqw;font-weight:600;color:var(--ink-soft)}
.mg-page.is-left .mg-folio{left:6cqw}
.mg-page.is-right .mg-folio{right:6cqw}

/* Título de sección */
.mg-sec{display:flex;align-items:center;gap:4cqw;padding:3.5cqw 4cqw;margin-bottom:3.5cqw;border-radius:5cqw;background:var(--mint)}
.mg-sec-pic{flex:none;width:16cqw;height:16cqw;border-radius:50%;overflow:hidden;position:relative;background:#fff;border:1cqw solid #fff}
.mg-sec-pic .photo{width:100%;height:100%;object-fit:cover}
.mg-sec h2{font-size:7.2cqw;font-weight:700;line-height:1.02;letter-spacing:-.02em;color:var(--brown)}
.mg-sec p{margin-top:1cqw;font-size:3.3cqw;color:var(--green-d);font-weight:500}

/* Plantas de la página
   Cada planta es una fila: foto a la izquierda y datos a la derecha.
   La foto siempre tiene la forma de las fotos del vivero (3 : 4, vertical), así se ve la planta entera,
   sin recortes ni "zoom". Su ancho lo calcula cartilla.js (--photo-w) para que sea igual en todas
   las páginas; cuántas plantas entran por página sale del alto que hay en cada pantalla.
   Adentro de cada tarjeta las medidas van en "cqw" (ancho de la tarjeta) con topes en px:
   en celular y en compu las letras y botones quedan proporcionados a la foto. */
.mg-items{flex:1;min-height:0;display:grid;gap:3.5cqw;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(var(--rows,2),minmax(0,1fr))}
.mg-items.first{align-content:center}
.mg-item{width:auto;min-width:0;min-height:0;container-type:size;display:flex;flex-direction:row;align-items:center;gap:5cqw}
.mg-item .mg-pic{flex:none;width:min(var(--photo-w,50cqw),50cqw,75cqh);aspect-ratio:3/4;height:auto;padding:0;
  border-radius:clamp(12px,3.6cqw,22px);box-shadow:0 14px 26px -18px rgba(30,40,20,.55);cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.mg-item .mg-pic svg{position:absolute;inset:14% 10% 4%;width:80%;height:82%}
.mg-item .mg-pic .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .3s}
/* Zoom suave solo con mouse; en celular la foto se toca para verla grande */
.card.mg-item:hover .pic svg,.card.mg-item:hover .pic .photo{transform:none}
@media (hover:hover) and (pointer:fine){ .card.mg-item .mg-pic:hover .photo{transform:scale(1.035)} }
.mg-item .mg-pic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);pointer-events:none;z-index:2}
.mg-item .flags{top:clamp(6px,2cqw,12px);left:clamp(6px,2cqw,12px)}
.mg-item .flag{font-size:clamp(9px,2.9cqw,13.5px);padding:.32em .85em}
.mg-item .ct-tick{right:clamp(6px,2cqw,12px);top:clamp(6px,2cqw,12px);width:clamp(26px,7.5cqw,40px);height:clamp(26px,7.5cqw,40px);border-width:clamp(2px,.7cqw,3px)}
.mg-item .ct-tick .ic{font-size:clamp(13px,3.8cqw,20px)}
.mg-item.ct-on .mg-pic{box-shadow:inset 0 0 0 3px var(--green),0 14px 26px -18px rgba(30,40,20,.55)}
.mg-item.ct-on .mg-pic::after{box-shadow:inset 0 0 0 3px var(--green)}
/* Precio: etiqueta pegada sobre la foto, como en las revistas de catálogo */
.mg-price{position:absolute;right:clamp(6px,2cqw,12px);bottom:clamp(6px,2cqw,12px);z-index:3;display:flex;flex-direction:column;align-items:flex-end;line-height:1.05;
  padding:.4em .75em;border-radius:.55em;background:var(--green-d);color:#fff;rotate:-3deg;box-shadow:0 6px 14px -8px rgba(0,0,0,.55);font-size:clamp(11.5px,4.8cqw,23px)}
.mg-price b{font-size:1em;font-weight:700;white-space:nowrap}
.mg-price s{font-size:.6em;opacity:.85}
.mg-price.sale{background:var(--red)}
/* Datos */
.mg-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0}
.mg-info h3{font-size:clamp(13px,5.2cqw,26px);line-height:1.18;font-weight:700;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mg-info .sci{font-size:clamp(10.5px,3.3cqw,16px);margin-top:.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-info .ct-act{margin-top:clamp(8px,3.4cqw,20px);max-width:300px}
.mg-info .ct-want{min-height:clamp(36px,12cqw,54px);font-size:clamp(12.5px,4.2cqw,18px);padding:0 .8em;gap:.45em;white-space:nowrap}
.mg-info .ct-want .ic{font-size:1.15em}
.mg-info .ct-step{height:clamp(40px,13cqw,58px);padding:0 clamp(3px,1cqw,6px)}
.mg-info .ct-step button{width:clamp(30px,10.5cqw,46px);height:clamp(30px,10.5cqw,46px)}
.mg-info .ct-step button .ic{font-size:clamp(15px,4.4cqw,20px)}
.mg-info .ct-step span b{font-size:clamp(17px,5.4cqw,24px)}
.mg-info .ct-step span small{font-size:clamp(10px,2.9cqw,12.5px)}
.mg-info .ct-limit{font-size:clamp(11px,3cqw,13.5px);margin-top:.5em}
.mg-info .ct-out{padding:.75em 1em;font-size:clamp(12.5px,3.6cqw,15px)}
/* "Consultar" por WhatsApp: debajo de "La quiero" / la cantidad, más liviano para no competir con el botón principal */
.ct-ask{display:flex;align-items:center;justify-content:center;gap:.4em;width:100%;margin-top:clamp(6px,2cqw,10px);
  min-height:clamp(32px,10cqw,46px);padding:0 .8em;border-radius:999px;border:1.5px solid #25D366;background:#fff;
  color:#128C4A;font-weight:700;font-size:clamp(11.5px,3.7cqw,16px);white-space:nowrap;text-decoration:none;
  transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent}
.ct-ask:hover{background:#25D366;color:#fff}
.ct-ask .ic{font-size:1.2em}
.ct-ask span{overflow:hidden;text-overflow:ellipsis}
.ct-ask:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.mg-item.is-out .photo{filter:grayscale(.7)}
/* Tarjetas angostas (celular acostado): sin ícono en el botón y sin nombre científico, para que todo entre en una línea */
@container (max-width:260px){
  .ct-ask .ic{display:none}
  .mg-info .ct-want .ic{display:none}
  .mg-info .sci{display:none}
  .mg-info .ct-step span small{display:none}
}

/* (La foto a pantalla completa ahora está en styles.css: la usan también el catálogo y la portada) */

/* ---------- Tapa ---------- */
.mg-cover{background:var(--green-d);color:#fff}
.mg-cover .mg-in,.mg-back .mg-in,.mg-note .mg-in{padding:0}
.mg-cover-pic{position:absolute;inset:0}
.mg-cover-pic .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mg-cover-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,40,24,.75) 0%,rgba(14,40,24,.15) 38%,rgba(14,40,24,.25) 62%,rgba(14,40,24,.9) 100%)}
.mg-cover-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;padding:8cqw 7cqw}
.mg-cover-brand{display:flex;align-items:center;gap:2.4cqw;font-size:4.6cqw;font-weight:600}
.mg-cover-brand img{width:10cqw;height:10cqw;border-radius:50%;border:.8cqw solid #fff}
.mg-cover-brand b{color:#8FDCA9;font-weight:600}
.mg-cover-title{margin-top:5cqw;font-size:17cqw;font-weight:800;line-height:.9;letter-spacing:-.04em;text-shadow:0 1cqw 5cqw rgba(0,0,0,.35)}
.mg-cover-title span{display:block;font-size:8.4cqw;font-weight:600;letter-spacing:-.02em;margin-top:1.6cqw}
.mg-cover-ed{margin-top:3cqw;font-size:3.8cqw;font-weight:500;opacity:.92}
.mg-sticker{position:absolute;right:7cqw;top:42%;width:22cqw;height:22cqw;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:#F6C343;color:#3B2A05;font-weight:800;font-size:4.2cqw;line-height:1.05;rotate:12deg;box-shadow:0 2cqw 5cqw -2cqw rgba(0,0,0,.6);
  border:1cqw dashed rgba(255,255,255,.7);outline:1.2cqw solid #F6C343}
.mg-cover-foot{margin-top:auto;font-size:4.4cqw;font-weight:600;max-width:24ch;line-height:1.25}

/* ---------- Índice ---------- */
.mg-index-t{font-size:8cqw;font-weight:700;letter-spacing:-.02em;margin-bottom:3cqw}
.mg-toc{list-style:none;display:grid;gap:.2cqw;min-height:0;overflow:hidden}
.mg-toc button{width:100%;display:flex;align-items:baseline;gap:2cqw;line-height:1.25;padding:calc(var(--fs,4cqw) * .38) 1cqw;border:0;background:none;cursor:pointer;font:inherit;color:var(--brown);text-align:left;border-radius:2cqw}
.mg-toc button:hover{background:var(--mint)}
.mg-toc span{font-size:var(--fs,4cqw);font-weight:600}
.mg-toc i{flex:1;border-bottom:.5cqw dotted rgba(20,20,20,.3);transform:translateY(-1cqw)}
.mg-toc b{font-size:var(--fs,4cqw);color:var(--green-d)}
.mg-toc-tip{margin-top:auto;font-size:3cqw;color:var(--ink-soft)}
.mg-how{margin-top:auto;padding:4cqw;border-radius:4cqw;background:var(--green-d);color:#fff}
.mg-how h3{font-size:4.6cqw;font-weight:700;margin-bottom:2cqw}
.mg-how ol{list-style:none;display:grid;gap:1.8cqw}
.mg-how li{display:flex;align-items:center;gap:2.6cqw;font-size:3.4cqw;line-height:1.3}
.mg-how li span{flex:none;width:6.4cqw;height:6.4cqw;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--green-d);font-weight:700}
.mg-how b{color:#FFE08A}

/* ---------- Página de cierre y contratapa ---------- */
.mg-note .mg-in{justify-content:center}
.mg-note-in{text-align:center;padding:0 6cqw}
.mg-note-in .ic{font-size:14cqw;color:var(--green-d)}
.mg-note-in h3{margin-top:3cqw;font-size:6cqw;line-height:1.15}
.mg-note-in p{margin-top:2.4cqw;font-size:3.8cqw;color:var(--ink-soft)}
.mg-back{background:var(--green-d);color:#fff}
.mg-back .mg-in{justify-content:center}
.mg-back-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:3cqw;padding:0 4cqw}
.mg-back-logo{width:24cqw;height:24cqw;border-radius:50%;border:1.4cqw solid #fff}
.mg-back h2{font-size:9cqw;font-weight:700;letter-spacing:-.02em}
.mg-back p{font-size:4cqw;line-height:1.4;opacity:.92;max-width:30ch}
.mg-back-go{background:#fff;color:var(--green-d);min-height:12cqw;padding:0 8cqw;font-size:4.4cqw}
.mg-back-small{font-size:3cqw!important;opacity:.7!important}

/* =========================================================================
   Terminación editorial
   Solo cambia cómo se ve (colores, líneas, tipografía, sombras): las medidas de las hojas,
   las fotos y las filas de plantas son las mismas de arriba.
   ========================================================================= */

/* Mesa de fondo: luz suave arriba y un leve viñeteado */
html.ct-full body{background:
  radial-gradient(90% 70% at 50% 0%,rgba(255,255,255,.9),transparent 60%),
  radial-gradient(70% 60% at 50% 45%,rgba(56,168,99,.10),transparent 70%),
  radial-gradient(140% 120% at 50% 50%,transparent 55%,rgba(20,60,35,.10) 100%),
  linear-gradient(180deg,#F5F8F3 0%,#E6EFE8 100%)}

/* Papel: un tono cálido, apenas más claro al centro */
/* Papel con grano: el grano va dentro del mismo fondo (antes era una capa más encima de cada hoja) */
.mg-page{background:#FDFBF5 url("../img/grano-papel.png") 0 0/160px repeat}   /* un solo dibujo: color + grano (el degradé encima costaba el doble al girar) */
.mg-page.is-left::before{background:linear-gradient(270deg,rgba(0,0,0,.13),rgba(0,0,0,.03) 40%,transparent)}
.mg-page.is-right::before{background:linear-gradient(90deg,rgba(0,0,0,.13),rgba(0,0,0,.03) 40%,transparent)}

/* Renglón de arriba: marca y sección, en versalitas */
.mg-run{font-size:2.3cqw;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#8A8F87;border-bottom:1px solid rgba(20,40,25,.10)}
.mg-run img{box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.mg-run .mg-run-sec{color:var(--green-d);position:relative;padding-left:2.4cqw}
.mg-run .mg-run-sec::before{content:"";width:1.2cqw;height:1.2cqw;border-radius:50%;background:var(--green);position:absolute;left:0;top:50%;translate:0 -50%}

/* Pie de página: número de página y edición */
.mg-folio{display:flex;align-items:center;gap:2cqw;font-size:2.2cqw;font-weight:500;color:#9A9E96;letter-spacing:.04em}
.mg-folio b{font-size:2.9cqw;font-weight:700;color:var(--brown);font-variant-numeric:tabular-nums}
.mg-folio span{white-space:nowrap}
.mg-folio::before{content:"";order:1;width:6cqw;height:1px;background:rgba(20,40,25,.2)}
.mg-folio span{order:2}
.mg-page.is-right .mg-folio{flex-direction:row-reverse}
.mg-page.is-right .mg-folio::before{order:1}

/* Etiqueta chica (Sección 01, Edición…) */
.mg-kicker{display:block;font-size:2.3cqw;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green-d)}

/* Apertura de sección */
.mg-sec{position:relative;overflow:hidden;flex-wrap:wrap;row-gap:2.6cqw;
  background:linear-gradient(135deg,#EAF6EE 0%,#DDEFE3 100%);box-shadow:inset 0 0 0 1px rgba(43,138,80,.10)}
.mg-sec-n{position:absolute;right:2.5cqw;bottom:-5.5cqw;font-size:22cqw;font-weight:800;line-height:1;letter-spacing:-.06em;
  color:rgba(43,138,80,.075);pointer-events:none}
.mg-sec-pic{position:relative;z-index:1;box-shadow:0 1.4cqw 3cqw -1.6cqw rgba(20,60,35,.45)}
.mg-sec-txt{position:relative;z-index:1;min-width:0;flex:1}
.mg-sec h2{margin-top:.6cqw}
.mg-sec p{color:#3E6B4E;font-weight:500}
.mg-sec p b{color:var(--green-d);font-weight:700}
.mg-sec-care{position:relative;z-index:1;flex-basis:100%;margin:0;padding-top:2.6cqw;border-top:1px dashed rgba(43,138,80,.25)}
.mg-sec-care{font-size:2.5cqw}
.mg-sec-care li{background:rgba(255,255,255,.75)}

/* Cuidados: chips chicos con ícono */
.mg-care{list-style:none;display:flex;flex-wrap:wrap;gap:.4em;margin-top:.7em;font-size:clamp(10px,2.75cqw,13px)}
.mg-care li{display:inline-flex;align-items:center;gap:.35em;padding:.28em .7em .28em .55em;border-radius:999px;background:#F1F4EC;color:#4A5A48;font-weight:500;line-height:1.2;white-space:nowrap}
.mg-care li .ic{font-size:1.15em;color:#C88A12}
.mg-care li.easy .ic,.mg-care li.cat .ic{color:var(--green-d)}
.mg-care li.easy{background:#E7F4EC;color:var(--green-d)}
@container (max-width:260px){ .mg-info .mg-care{display:none} }

/* Plantas: línea fina entre filas, como en un catálogo impreso */
.mg-item{position:relative}
.mg-item + .mg-item::before{content:"";position:absolute;left:0;right:0;top:calc(-1.75cqw - .5px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(20,40,25,.12) 12%,rgba(20,40,25,.12) 88%,transparent)}
.mg-item .mg-pic{background:#EEF2E6;box-shadow:0 1px 2px rgba(20,40,25,.10),0 16px 28px -18px rgba(30,40,20,.6)}
.mg-item.ct-on .mg-pic{box-shadow:0 1px 2px rgba(20,40,25,.10),0 16px 28px -18px rgba(30,40,20,.6)}
/* Cartel de stock con puntito de color */
.mg-item .flag{display:inline-flex;align-items:center;gap:.4em;font-weight:600;box-shadow:0 4px 10px -6px rgba(0,0,0,.4);
}
.mg-item .flag.ct-st.ok{background:rgba(255,255,255,.92)}
.mg-item .flag.ct-st::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor;flex:none}
.mg-item .flag.ct-st.ok::before{background:var(--green)}
.mg-item .flag.ct-st.few::before{background:#E3A008}
.mg-item .flag.ct-st.one::before{background:#fff}
/* Precio: etiqueta con borde punteado, como pegada a mano */
.mg-price{rotate:-2.5deg;background:linear-gradient(180deg,#30995A,#26804A);
  box-shadow:inset 0 0 0 .14em var(--green-d),inset 0 0 0 .2em rgba(255,255,255,.45),0 6px 14px -8px rgba(0,0,0,.6)}
.mg-price b{letter-spacing:-.01em}
.mg-price.sale{background:linear-gradient(180deg,#E0393F,#C22027);box-shadow:inset 0 0 0 .14em #C22027,inset 0 0 0 .2em rgba(255,255,255,.45),0 6px 14px -8px rgba(0,0,0,.6)}
/* Datos */
.mg-info h3{color:#151915;letter-spacing:-.015em}
.mg-info .sci{color:#7A8076}
.mg-info .ct-want{background:linear-gradient(180deg,#3DB06A,#2E9558);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 18px -12px rgba(43,138,80,.9);
  transition:transform .15s,box-shadow .2s,filter .2s}
.mg-info .ct-want:hover{filter:brightness(1.05);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 14px 22px -12px rgba(43,138,80,.95)}
.mg-info .ct-want:active{transform:scale(.97)}
.mg-info .ct-step{background:#EAF6EE;border:1.5px solid rgba(43,138,80,.35)}
.mg-item.is-out .mg-info h3{color:#7A8076}

/* Índice */
.mg-index .mg-kicker{margin-bottom:1cqw}
.mg-toc{gap:0}
.mg-toc li + li button{border-top:1px solid rgba(20,40,25,.07);border-radius:0}
.mg-toc em{font-style:normal;font-size:calc(var(--fs,4cqw) * .78);font-weight:600;color:#A3A89F;min-width:2.2em;font-variant-numeric:tabular-nums}
.mg-toc i{border-bottom-color:rgba(20,40,25,.18)}
.mg-toc button:hover{background:#EAF6EE;border-radius:2cqw}
.mg-toc button:hover span{color:var(--green-d)}
.mg-how{background:linear-gradient(135deg,#2E9558,#22744A);box-shadow:0 2cqw 4cqw -2.4cqw rgba(20,60,35,.7)}

/* Página de cierre y contratapa */
.mg-note-in .ic{opacity:.9}
.mg-back{background:radial-gradient(90% 70% at 50% 30%,#33A061 0%,#227346 100%)}
.mg-back-go{box-shadow:0 2cqw 4cqw -2cqw rgba(0,0,0,.45)}

/* ---------- Barra de abajo: botones agrupados ---------- */
.mag-nav{gap:0;padding:4px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid rgba(20,40,25,.08);
  box-shadow:0 1px 2px rgba(20,40,25,.06),0 12px 28px -16px rgba(20,40,25,.45)}
.mag-nav .mag-btn{height:40px;border:0;box-shadow:none;background:transparent;padding:0 1rem}
.mag-nav .mag-btn:hover:not(:disabled){background:#F1F6F2;color:var(--green-d)}
.mag-nav .mag-pg{height:40px;margin:0 .25rem}
.ct-ic-btn,.ct-cart{border:1px solid rgba(20,40,25,.08);background:rgba(255,255,255,.88);
  box-shadow:0 1px 2px rgba(20,40,25,.06),0 12px 28px -16px rgba(20,40,25,.45)}
.ct-cart.has{background:linear-gradient(180deg,#30995A,#26804A);border-color:transparent;box-shadow:0 12px 26px -12px rgba(43,138,80,.9)}
@media (max-width:760px),(max-height:560px){ .mag-nav .mag-btn{width:40px;padding:0} }
@media (max-width:520px){
  .mag-nav .mag-btn{width:36px;height:36px} .mag-nav .mag-pg{height:36px}
  .mag-nav{padding:4px}
}
@media (max-height:440px){ .mag-nav .mag-btn,.mag-nav .mag-pg{height:32px} .mag-nav .mag-btn{width:32px} }

/* =========================================================================
   Fluidez en celulares y tablets
   Mientras una hoja se da vuelta, el celular redibuja esa hoja en cada cuadro. Todo lo que tiene
   desenfoque (sombras muy difusas, vidrio esmerilado) cuesta mucho redibujarlo: en pantallas táctiles
   se usan sombras más cortas, que se ven casi igual y pesan mucho menos.
   ========================================================================= */
@media (hover:hover) and (pointer:fine){
  .mag-nav,.ct-ic-btn,.ct-cart:not(.has){-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
@media (pointer:coarse){
  .mag-nav,.ct-ic-btn,.ct-cart:not(.has){background:#fff}
  .mg-item .mg-pic,.mg-item.ct-on .mg-pic{box-shadow:0 1px 2px rgba(20,40,25,.12),0 8px 14px -10px rgba(30,40,20,.5)}
  .mg-item .flag{box-shadow:0 2px 4px -2px rgba(0,0,0,.3)}
  .mg-price,.mg-price.sale{box-shadow:inset 0 0 0 .14em rgba(0,0,0,.12),inset 0 0 0 .2em rgba(255,255,255,.45),0 3px 6px -3px rgba(0,0,0,.5)}
  .mg-info .ct-want{box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 10px -8px rgba(43,138,80,.9)}
  .mg-sec-pic{box-shadow:0 3px 6px -3px rgba(20,60,35,.45)}
  .mg-how{box-shadow:none}
  .mag::before{box-shadow:0 2px 3px rgba(20,40,25,.10),0 16px 24px -12px rgba(20,40,25,.3)}
  .mg-item .mg-pic .photo{transition:none}
}

/* =========================================================================
   Sin parpadeos en ningún celular
   ========================================================================= */
/* La cartilla es siempre clara: algunos navegadores (Samsung Internet, Chrome con "modo oscuro forzado")
   oscurecían la página por su cuenta y, en cada hoja nueva, se veía un instante clara y después oscura. */
html.ct-full{color-scheme:light only}
/* Las hojas comunes se dan vuelta en 2D: sin espacio 3D, algunas placas de video (Adreno, Mali) dejaban
   de titilar. Solo la tapa y la contratapa (hojas duras) giran en 3D. */
.stf__item.--soft{transform-style:flat;-webkit-backface-visibility:visible;backface-visibility:visible}
/* Cada hoja se pinta aparte, sin que el resto de la página se entere */
.mg-page{contain:paint}

/* ---------- Modo liviano (se activa solo si el celular va lento, ver cartilla.js) ---------- */
html.ct-lite .mg-page{background:#FDFBF5}
html.ct-lite .mg-page.is-left::before,html.ct-lite .mg-page.is-right::before{width:6cqw}
html.ct-lite .mag::before{box-shadow:0 10px 18px -12px rgba(20,40,25,.35)}
html.ct-lite .mg-item .mg-pic,html.ct-lite .mg-item.ct-on .mg-pic,html.ct-lite .mg-sec-pic,html.ct-lite .mg-item .flag,
html.ct-lite .mg-info .ct-want,html.ct-lite .mg-how,html.ct-lite .mg-back-go{box-shadow:none}
html.ct-lite .mg-price,html.ct-lite .mg-price.sale{box-shadow:inset 0 0 0 .2em rgba(255,255,255,.35)}
html.ct-lite .mg-sec{background:#E4F2E8}
html.ct-lite .mg-info .ct-want{background:#34A462}
html.ct-lite .mg-price{background:var(--green-d)}
html.ct-lite .mg-price.sale{background:var(--red)}
html.ct-lite .ct-live .dot::after{animation:none;display:none}

/* "Volver al índice" en la página de nota y en la contratapa */
.mg-to-idx{display:inline-flex;align-items:center;gap:.35em;margin-top:4cqw;padding:.6em 1.2em .6em .9em;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line,rgba(20,20,20,.15));background:transparent;color:var(--green-d);font:inherit;font-weight:600;font-size:clamp(12px,3.6cqw,16px);
  transition:background .2s,color .2s,border-color .2s}
.mg-to-idx:hover{background:var(--green-d);border-color:var(--green-d);color:#fff}
.mg-to-idx .ic{font-size:1.15em}
.mg-to-idx.light{border-color:rgba(255,255,255,.55);color:#fff}
.mg-to-idx.light:hover{background:#fff;border-color:#fff;color:var(--green-d)}
.mg-to-idx:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.mg-note-in .mg-to-idx .ic{font-size:1.15em;color:inherit}
.mg-back-in .mg-to-idx{margin-top:0}
/* Tarjetas bajitas (celular acostado): nombre en hasta 2 renglones y botones más finos,
   así "La quiero" y "Consultar" entran sin tocar el número de página */
@container (max-height:230px){
  .mg-info h3{-webkit-line-clamp:2;font-size:clamp(13px,4.8cqw,22px)}
  .mg-info .ct-act{margin-top:6px}
  .mg-info .ct-want{min-height:32px}
  .mg-info .ct-step{height:36px}
  .mg-info .ct-step button{width:28px;height:28px}
  .mg-info .ct-limit{display:none}
  .ct-ask{min-height:27px;margin-top:4px;font-size:12px;border-width:1.25px}
}

/* Contratapa: en el modo liviano (celulares) se pisaba el fondo verde y el texto blanco no se veía */
html.ct-lite .mg-back{background:#227346}
.mg-back-credit{font-size:3cqw;color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:.4em;cursor:pointer;padding:1cqw 2cqw}
.mg-back-credit b{font-weight:600;color:#fff}
.mg-back-credit:hover{color:#fff}

/* Tamaño de flor (Coronas de Cristo) y enlace a la guía en la sección */
.mg-care li.flor{background:#FBEFE6;color:#9A4A16}
.mg-care li.flor .ic{color:#E8742A}
.mg-guia{display:inline-flex;align-items:center;gap:.4em;margin-top:.6em;font-size:clamp(10px,2.75cqw,13px);font-weight:600;color:var(--green-d);text-decoration:underline;text-underline-offset:.25em;cursor:pointer}

/* Salir de la cartilla: la X en la barra de abajo (también con la tecla Esc) */
.ct-x{text-decoration:none;box-shadow:0 6px 16px -12px rgba(20,40,25,.5)}
.ct-x:hover{border-color:#C9452F;color:#C9452F}
/* Celulares: no entran 3 botones a la izquierda; la pantalla completa se oculta (la X y el índice quedan) */
@media (max-width:520px){ #ctFs{display:none} }