/* Moramay · Productores · cifras que ruedan, fotos de la finca que se revelan y
   ilustraciones animadas en "El tiempo como herramienta." (mismo lenguaje que Nosotros, variante B).
   Todo es visible sin JS; mmr-productores.js agrega .mmr-ready y .mmr-on. */

.mm-prodpg {
  --mmr-ink: var(--ink, #1F1739);
  --mmr-honey: var(--honey, #C99B5C);
  --mmr-rubi: var(--rubi, #7A1F2B);
  --mmr-mist: var(--ink-30, #A6A2B5);
  --mmr-line: var(--ink-08, #E9E7EE);
  --mmr-bone: var(--bone, #FBF8F2);
  --mmr-unripe: #A9B08C;
  --mmr-bloom: cubic-bezier(.16, 1, .3, 1);
  --mmr-natural: cubic-bezier(.22, .61, .36, 1);
}

/* ───────── Números que ruedan ───────── */
.mmr-odo { --h: 1.25em; display: inline-flex; align-items: flex-start; height: var(--h); overflow: hidden; vertical-align: top; margin: -.125em 0; }
.mmr-col { display: block; height: var(--h); overflow: hidden; }
.mmr-fix { display: block; height: var(--h); line-height: var(--h); }
.mmr-strip { display: flex; flex-direction: column; transform: translateY(calc(var(--n) * -1 * var(--h))); }
.mmr-strip > span { display: block; height: var(--h); line-height: var(--h); text-align: center; }
.mmr-on .mmr-strip { animation: mmr-roll 1.6s var(--mmr-bloom) calc(var(--mmr-delay, 0s) + .15s + var(--k, 0) * .1s) both; }
@keyframes mmr-roll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(var(--n) * -1 * var(--h))); }
}

/* Cifras del inicio: entran una tras otra */
.mm-pp-stats.mmr-ready .mm-pp-stat-l {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .8s var(--mmr-bloom) calc(var(--mmr-delay, 0s) + .9s),
              transform .8s var(--mmr-bloom) calc(var(--mmr-delay, 0s) + .9s);
}
.mm-pp-stats.mmr-ready .mmr-on .mm-pp-stat-l { opacity: 1; transform: none; }

/* ───────── Fotos de la finca: se revelan de abajo hacia arriba ───────── */
.mm-pp-finca-grid.mmr-ready .mm-pp-finca-img {
  clip-path: inset(100% 0 0 0 round 12px);
  transition: clip-path 1.3s var(--mmr-bloom) var(--mmr-delay, 0s);
}
.mm-pp-finca-grid.mmr-ready .mm-pp-finca-img.mmr-on { clip-path: inset(0 0 0 0 round 12px); }
.mm-pp-finca-grid.mmr-ready .mm-pp-finca-img img {
  transform: scale(1.1);
  transition: transform 1.8s var(--mmr-natural) var(--mmr-delay, 0s);
}
.mm-pp-finca-grid.mmr-ready .mm-pp-finca-img.mmr-on img { transform: scale(1); }
.mm-pp-finca-grid.mmr-ready .mm-pp-finca-img.mmr-on:hover img { transform: scale(1.06); transition-duration: .6s; transition-delay: 0s; }
.mm-pp-finca-grid.mmr-ready .mm-pp-finca-cap {
  opacity: 0;
  transition: opacity .8s var(--mmr-bloom) calc(var(--mmr-delay, 0s) + .9s);
}
.mm-pp-finca-grid.mmr-ready .mmr-on .mm-pp-finca-cap { opacity: 1; }

/* ───────── El tiempo como herramienta ───────── */
.mmr-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mmr-art .s { fill: none; stroke: var(--mmr-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mmr-art .thin { stroke-width: 1; }
.mmr-art .hon { stroke: var(--mmr-honey); }
.mmr-ready .mmr-art .d {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--mmr-natural) calc(var(--mmr-delay, 0s) + var(--o, 0s));
}
.mmr-ready .mmr-art .f { opacity: 0; transition: opacity .9s var(--mmr-bloom) calc(var(--mmr-delay, 0s) + var(--o, 1s)); }
.mmr-on .mmr-art .d { stroke-dashoffset: 0; }
.mmr-on .mmr-art .f { opacity: 1; }

.mm-pp-value-card { display: flex; flex-direction: column; }
.mmr-art {
  order: -1;
  width: 100%;
  max-width: 176px;
  height: 124px;
  margin: -12px auto 24px;
  padding: 8px 14px 12px;
  border-bottom: 1px solid var(--mmr-line);
  pointer-events: none;
}
.mm-pp-values-grid[data-mmr] .mm-pp-value-num { display: none; }
.mmr-label {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--mmr-honey);
  margin-bottom: 12px;
}
.mmr-label-of { color: var(--mmr-mist); }

/* Entrada escalonada de las tarjetas */
.mm-pp-values-grid.mmr-ready .mm-pp-value-card {
  opacity: .35;
  transform: translateY(24px);
  transition: opacity .8s var(--mmr-bloom) var(--mmr-delay, 0s), transform .8s var(--mmr-bloom) var(--mmr-delay, 0s);
}
.mm-pp-values-grid.mmr-ready .mm-pp-value-card.mmr-on { opacity: 1; transform: none; }

/* 01 · Cosecha selectiva: maduran las cerezas y se marca la elegida */
.mmr-art .mmr-cherry { fill: var(--mmr-unripe); }
.mmr-ready .mmr-art .mmr-cherry {
  fill: var(--mmr-unripe);
  transition: opacity .9s var(--mmr-bloom) calc(var(--mmr-delay, 0s) + var(--o, 1s)),
              fill 2s var(--mmr-natural) calc(var(--mmr-delay, 0s) + var(--o, 1s) + .5s);
}
.mmr-on .mmr-art .mmr-cherry.ripe { fill: var(--mmr-rubi); }
.mmr-pick { stroke: var(--mmr-honey); stroke-width: 1.3; stroke-dasharray: .06 .04; fill: none; }
.mmr-on .mmr-pick { animation: mmr-turn 14s linear calc(var(--mmr-delay, 0s) + 2.4s) infinite; }
@keyframes mmr-turn { to { stroke-dashoffset: -1; } }
.mmr-sway { transform-origin: 60px 22px; transform-box: view-box; }
.mmr-on .mmr-sway { animation: mmr-sway 7s ease-in-out calc(var(--mmr-delay, 0s) + 2.6s) infinite; }
@keyframes mmr-sway { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(2deg); } 70% { transform: rotate(-1.5deg); } }

/* 02 · Fermentación artesanal: burbujas y aguja que recorre de 72 a 120 h */
.mmr-liquid { fill: var(--mmr-honey); fill-opacity: .28; transform: scaleY(0); transform-origin: 46px 86px; transform-box: view-box; transition: transform 1.8s var(--mmr-bloom) calc(var(--mmr-delay, 0s) + .7s); }
.mmr-on .mmr-liquid { transform: scaleY(1); }
.mmr-bubble { fill: var(--mmr-bone); stroke: var(--mmr-ink); stroke-width: 1; opacity: 0; }
.mmr-on .mmr-bubble { animation: mmr-rise 3.6s var(--mmr-natural) calc(var(--mmr-delay, 0s) + 2.2s + var(--b, 0s)) infinite; }
@keyframes mmr-rise { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; transform: translateY(-28px); } }
.mmr-needle { stroke: var(--mmr-honey); stroke-width: 1.6; stroke-linecap: round; transform-origin: 94px 46px; transform-box: view-box; transform: rotate(-60deg); }
.mmr-on .mmr-needle { animation: mmr-gauge 6s ease-in-out calc(var(--mmr-delay, 0s) + 1.6s) infinite alternate; }
@keyframes mmr-gauge { from { transform: rotate(-60deg); } to { transform: rotate(60deg); } }
.mmr-gtxt { font: 6.5px/1 "Komet", "Outfit", system-ui, sans-serif; letter-spacing: .06em; fill: var(--mmr-ink); opacity: .6; }

/* 03 · Origen con nombre: la ruta une la finca con la etiqueta de la bolsa */
.mmr-route { stroke: var(--mmr-honey); stroke-width: 1.2; stroke-dasharray: .02 .035; fill: none; stroke-linecap: round; }
.mmr-dot { fill: var(--mmr-honey); opacity: 0; }
.mmr-on .mmr-dot { animation: mmr-show .4s linear calc(var(--mmr-delay, 0s) + 2s) forwards; }
@keyframes mmr-show { to { opacity: 1; } }
.mmr-pin { fill: var(--mmr-rubi); }

@media (max-width: 768px) {
  .mmr-art { height: 104px; max-width: 150px; }
}

/* Movimiento reducido: todo en su estado final, sin bucles */
@media (prefers-reduced-motion: reduce) {
  .mmr-ready .mmr-art .d, .mmr-ready .mmr-art .f, .mmr-art .mmr-cherry, .mmr-liquid,
  .mm-pp-values-grid.mmr-ready .mm-pp-value-card,
  .mm-pp-stats.mmr-ready .mm-pp-stat-l,
  .mm-pp-finca-grid.mmr-ready .mm-pp-finca-img,
  .mm-pp-finca-grid.mmr-ready .mm-pp-finca-img img,
  .mm-pp-finca-grid.mmr-ready .mm-pp-finca-cap { transition: none !important; }
  .mmr-strip, .mmr-pick, .mmr-sway, .mmr-bubble, .mmr-needle, .mmr-dot { animation: none !important; }
  .mmr-dot { opacity: 0 !important; }
}