/* Moramay · Nosotros · "Tres principios, un solo café." y "El camino de Moramay."
   Ilustraciones de línea animadas. Todo es visible sin JS; mmn-nosotros.js
   agrega .mmn-ready (estado inicial) y .mmn-on (animación) al entrar en pantalla. */

.mm-sec-values,
.mm-sec-historia {
  --mmn-ink: #1A1829;
  --mmn-accent: #7B4FA6;
  --mmn-honey: #C99B5C;
  --mmn-mist: #A6A2B5;
  --mmn-card: #F5F0E8;
  --mmn-bloom: cubic-bezier(.16, 1, .3, 1);
  --mmn-natural: cubic-bezier(.22, .61, .36, 1);
}

/* Trazos comunes: todos usan pathLength="1" */
.mmn-art svg, .mmn-ico svg, .mmn-dotico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mmn-art .s, .mmn-ico .s, .mmn-dotico .s {
  fill: none;
  stroke: var(--mmn-ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mmn-art .thin, .mmn-ico .thin, .mmn-dotico .thin { stroke-width: 1; }
.mmn-art .acc, .mmn-ico .acc, .mmn-dotico .acc { stroke: var(--mmn-accent); }
.mmn-ready .d {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--mmn-natural) calc(var(--mmn-delay, 0s) + var(--o, 0s));
}
.mmn-ready .f {
  opacity: 0;
  transition: opacity .9s var(--mmn-bloom) calc(var(--mmn-delay, 0s) + var(--o, 1s));
}
.mmn-on .d { stroke-dashoffset: 0; }
.mmn-on .f { opacity: 1; }

/* ───────── Tres principios ───────── */
.mm-value-card { position: relative; }
.mmn-art {
  position: absolute;
  top: 26px;
  right: 24px;
  width: 104px;
  height: 86px;
  pointer-events: none;
}

/* Entrada escalonada de las tarjetas (desde un estado visible) */
.mm-values-grid.mmn-ready .mm-value-card {
  opacity: .35;
  transform: translateY(24px);
  transition: opacity .8s var(--mmn-bloom) var(--mmn-delay, 0s),
              transform .8s var(--mmn-bloom) var(--mmn-delay, 0s),
              box-shadow .3s;
}
.mm-values-grid.mmn-ready .mm-value-card.mmn-on { opacity: 1; transform: none; }
.mm-values-grid.mmn-ready .mm-value-rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--mmn-natural) calc(var(--mmn-delay, 0s) + .5s);
}
.mm-values-grid.mmn-ready .mmn-on .mm-value-rule { transform: scaleX(1); }

/* 01 · Terroir: la niebla se desplaza despacio */
.mmn-flag { fill: var(--mmn-accent); }
.mmn-alt { font: 7.5px/1 "Komet", "Outfit", system-ui, sans-serif; letter-spacing: .08em; fill: var(--mmn-ink); opacity: .55; }
.mmn-mist { stroke: var(--mmn-mist); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.mmn-on .mmn-mist { animation: mmn-drift 9s ease-in-out calc(var(--mmn-delay, 0s) + 1.8s) infinite; }
.mmn-on .mmn-mist.b { animation-duration: 12s; animation-direction: reverse; }
@keyframes mmn-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(7px); }
}

/* 02 · Proceso: reloj de arena */
.mmn-sand { fill: var(--mmn-honey); }
.mmn-sand-top { transform-origin: 60px 44px; transform-box: view-box; }
.mmn-sand-bot { transform-origin: 60px 86px; transform-box: view-box; transform: scaleY(.25); }
.mmn-stream { stroke: var(--mmn-honey); stroke-width: 1.4; stroke-dasharray: .04 .06; stroke-linecap: round; fill: none; opacity: 0; }
.mmn-on .mmn-sand-top { animation: mmn-empty 10s linear calc(var(--mmn-delay, 0s) + 1.6s) infinite; }
.mmn-on .mmn-sand-bot { animation: mmn-fill 10s linear calc(var(--mmn-delay, 0s) + 1.6s) infinite; }
.mmn-on .mmn-stream { animation: mmn-fall 10s linear calc(var(--mmn-delay, 0s) + 1.6s) infinite, mmn-flow .8s linear calc(var(--mmn-delay, 0s) + 1.6s) infinite; }
@keyframes mmn-empty {
  0% { transform: scaleY(1); opacity: 1; }
  85% { transform: scaleY(.08); opacity: 1; }
  88% { transform: scaleY(.08); opacity: 0; }
  94% { transform: scaleY(1); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}
@keyframes mmn-fill {
  0% { transform: scaleY(.25); opacity: 1; }
  85% { transform: scaleY(1); opacity: 1; }
  90% { transform: scaleY(1); opacity: 0; }
  94% { transform: scaleY(.25); opacity: 0; }
  100% { transform: scaleY(.25); opacity: 1; }
}
@keyframes mmn-fall { 0%, 84% { opacity: .9; } 86%, 100% { opacity: 0; } }
@keyframes mmn-flow { to { stroke-dashoffset: -.1; } }

/* 03 · Propósito: el grano viaja de la planta a la taza */
.mmn-route { stroke: var(--mmn-accent); stroke-width: 1.2; stroke-dasharray: .02 .035; fill: none; stroke-linecap: round; }
.mmn-bean { fill: var(--mmn-accent); opacity: 0; }
.mmn-on .mmn-bean { animation: mmn-show .4s linear calc(var(--mmn-delay, 0s) + 2s) forwards; }
@keyframes mmn-show { to { opacity: 1; } }
.mmn-coffee { fill: var(--mmn-ink); }

/* ───────── El camino de Moramay ───────── */
.mm-timeline .mmn-tl-fill {
  position: absolute;
  left: 119px;
  top: 8px;
  bottom: 8px;
  width: 1.5px;
  background: var(--mmn-accent);
  transform: scaleY(0);
  transform-origin: top center;
  pointer-events: none;
}
.mm-timeline.mmn-run .mmn-tl-fill {
  transform: scaleY(1);
  transition: transform var(--mmn-dur, 3.2s) linear;
}
.mm-tl-item { position: relative; }
.mm-tl-item.mmn-has-ico > div:nth-child(3) { padding-right: 60px; }
.mmn-ico { position: absolute; right: 0; top: 0; width: 40px; height: 40px; pointer-events: none; }

/* Hitos: atenuados hasta que la línea los alcanza */
.mm-timeline.mmn-ready .mm-tl-item {
  opacity: .32;
  transition: opacity .7s var(--mmn-bloom);
}
.mm-timeline.mmn-ready .mm-tl-item > div:nth-child(3) {
  transform: translateX(12px);
  transition: transform .8s var(--mmn-bloom);
}
.mm-timeline.mmn-ready .mm-tl-item.mmn-on { opacity: 1; }
.mm-timeline.mmn-ready .mm-tl-item.mmn-on > div:nth-child(3) { transform: none; }
.mm-timeline.mmn-ready .mm-tl-dot {
  background: var(--mmn-card);
  box-shadow: inset 0 0 0 1.5px var(--mmn-accent);
  transition: background .5s var(--mmn-natural);
}
.mm-timeline.mmn-ready .mmn-on .mm-tl-dot { background: var(--mmn-accent); box-shadow: none; }
.mm-tl-dot-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--mmn-accent);
  opacity: 0;
  pointer-events: none;
}
.mmn-on .mm-tl-dot-wrap::after { animation: mmn-ring 1.4s var(--mmn-bloom) both; }
.mm-tl-item.mmn-last.mmn-on .mm-tl-dot-wrap::after { animation: mmn-ring 1.4s var(--mmn-bloom) both, mmn-pulse 3.6s ease-out 1.6s infinite; }
@keyframes mmn-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes mmn-pulse { 0% { opacity: .6; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.2); } }

/* ───────── Números que ruedan (tarjetas y años) ───────── */
/* Caja de 1.25em para que Centabel no se recorte; en reposo muestra el valor real
   y al activarse rueda desde 0 hasta su dígito. */
.mmn-odo { --h: 1.25em; display: inline-flex; height: var(--h); overflow: hidden; vertical-align: top; margin: -.125em 0; }
.mmn-col { display: block; height: var(--h); overflow: hidden; }
.mmn-strip {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--n) * -1 * var(--h)));
}
.mmn-strip > span { display: block; height: var(--h); line-height: var(--h); text-align: center; }
.mmn-on .mmn-strip {
  animation: mmn-roll 1.5s var(--mmn-bloom) calc(var(--mmn-delay, 0s) + .15s + var(--k, 0) * .12s) both;
}
@keyframes mmn-roll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(var(--n) * -1 * var(--h))); }
}
.mmn-label, .mmn-dotico { display: none; }

/* ───────── Variante A · ilustración en la esquina, número en contorno ───────── */
[data-mmn-v="a"] .mm-value-num {
  opacity: 1;
  font-size: 60px;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--mmn-accent);
  margin-bottom: -8px;
  transition: color 1.2s var(--mmn-natural) calc(var(--mmn-delay, 0s) + 1.4s);
}
[data-mmn-v="a"] .mm-value-card.mmn-on .mm-value-num { color: rgba(123, 79, 166, .1); }

/* ───────── Variante B · ilustración protagonista, etiqueta 01 / 03 ───────── */
[data-mmn-v="b"] .mm-value-card { padding-top: 28px; }
[data-mmn-v="b"] .mm-value-num { display: none; }
[data-mmn-v="b"] .mmn-art {
  order: -1;
  position: static;
  width: 100%;
  max-width: 176px;
  height: 128px;
  margin: 0 auto 26px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(123, 79, 166, .16);
}
[data-mmn-v="b"] .mmn-label {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: "Komet", "Outfit", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--mmn-accent);
  margin-bottom: 12px;
}
[data-mmn-v="b"] .mmn-label-of { color: var(--mmn-mist); }
[data-mmn-v="b"] .mmn-ico { display: none; }
[data-mmn-v="b"] .mm-tl-item.mmn-has-ico > div:nth-child(3) { padding-right: 0; }
[data-mmn-v="b"] .mm-tl-dot { display: none; }
[data-mmn-v="b"] .mmn-dotico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--mmn-card);
  box-shadow: inset 0 0 0 1.2px var(--mmn-mist);
  transition: box-shadow .6s var(--mmn-natural);
}
[data-mmn-v="b"] .mmn-dotico svg { width: 24px; height: 24px; }
[data-mmn-v="b"] .mmn-on .mmn-dotico { box-shadow: inset 0 0 0 1.5px var(--mmn-accent); }
[data-mmn-v="b"] .mm-tl-dot-wrap::after { width: 38px; height: 38px; margin-left: -19px; top: -8px; }
/* aire entre el círculo con ícono y el título del hito */
[data-mmn-v="b"] .mm-tl-item > div:nth-child(3) { padding-left: 8px; }

/* ───────── Variante C · tipográfica, el número es protagonista ───────── */
[data-mmn-v="c"] .mmn-art,
[data-mmn-v="c"] .mmn-ico { display: none; }
[data-mmn-v="c"] .mm-tl-item.mmn-has-ico > div:nth-child(3) { padding-right: 0; }
[data-mmn-v="c"] .mm-value-num {
  opacity: 1;
  font-size: 92px;
  color: var(--mmn-accent);
  margin-bottom: 10px;
}
[data-mmn-v="c"] .mm-value-rule { background: var(--mmn-honey); }
[data-mmn-v="c"] .mm-values-grid.mmn-ready .mm-value-rule { width: 64px; }

@media (max-width: 768px) {
  /* celular: círculo con ícono más pequeño y con aire a ambos lados */
  [data-mmn-v="b"] .mmn-dotico { width: 30px; height: 30px; margin-top: -4px; }
  [data-mmn-v="b"] .mmn-dotico svg { width: 19px; height: 19px; }
  [data-mmn-v="b"] .mm-tl-dot-wrap::after { width: 30px; height: 30px; margin-left: -15px; top: -4px; }
  [data-mmn-v="b"] .mm-tl-item > div:nth-child(3) { padding-left: 10px; }
  [data-mmn-v="b"] .mm-tl-year { padding-right: 6px; }
  [data-mmn-v="c"] .mm-value-num { font-size: 72px; }
  [data-mmn-v="b"] .mmn-art { height: 108px; max-width: 150px; }
  .mm-timeline .mmn-tl-fill { left: 79px; }
  .mm-tl-item.mmn-has-ico > div:nth-child(3) { padding-right: 0; padding-top: 0; }
  .mmn-ico { display: none; }
  .mmn-art { width: 84px; height: 70px; top: 22px; right: 18px; }
}

/* Movimiento reducido: todo en su estado final, sin bucles */
@media (prefers-reduced-motion: reduce) {
  .mmn-ready .d, .mmn-ready .f,
  .mm-values-grid.mmn-ready .mm-value-card,
  .mm-values-grid.mmn-ready .mm-value-rule,
  .mm-timeline.mmn-ready .mm-tl-item,
  .mm-timeline.mmn-ready .mm-tl-item > div:nth-child(3),
  .mm-timeline.mmn-ready .mm-tl-dot,
  .mm-value-num, .mmn-dotico, .mm-timeline .mmn-tl-fill { transition: none !important; }
  .mmn-strip { animation: none !important; }
  .mmn-mist, .mmn-sand-top, .mmn-sand-bot, .mmn-stream, .mmn-bean,
  .mm-tl-dot-wrap::after { animation: none !important; }
  .mmn-bean { opacity: 0 !important; }
}