/* ==========================================================================
   ¿CÓMO PREPARARLO? — tres pasos, tres escenas, cada una con su animación en bucle (solo CSS):
   01 Disolver: el stickpack real entra, se abre (la tira se desprende), se inclina y vierte el polvo en el vaso de 100 mL.
   02 Mezclar: el mezclador remueve en círculos; el agua se ladea, vórtice, burbujas; el líquido toma el color de la fórmula.
   03 Consumir: el vaso se alza e inclina, el nivel baja y aparece el check. Luego vuelve a llenarse y repite.
   El JS (howto.ts) activa .is-playing con la sección en pantalla y cambia --c / el sobre según la fórmula elegida.
   ========================================================================== */
.prep { --c: var(--p-fortix); padding: var(--s-11) 0; background: var(--ink-900); border-top: 1px solid var(--line); position: relative; overflow: clip; }
.prep__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-8); }
.prep__head .lead { max-width: 40ch; }
.prep__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-8); }
.pstep { display: grid; gap: var(--s-4); justify-items: start; }
.pstep__stage { position: relative; width: min(100%, 22rem); aspect-ratio: 1; isolation: isolate; }
.prep__glow { position: absolute; inset: -8%; z-index: -1; pointer-events: none; border-radius: 50%; opacity: 0.85;
  background: radial-gradient(42% 42% at 50% 60%, color-mix(in oklab, var(--c) 20%, transparent), transparent 70%); }
.prep__svg { position: absolute; inset: -5%; width: 110%; height: 110%; overflow: visible; }
.pstep__text { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-4); row-gap: var(--s-1); align-items: baseline; }
.pstep__n { grid-row: 1 / span 2; align-self: start; font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; color: var(--c); text-shadow: 0 0 28px color-mix(in oklab, var(--c) 45%, transparent); }
.pstep__t { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.pstep__p { font-size: var(--fs-small); color: var(--fg-muted); max-width: 30ch; margin: 0; }

/* --- Vaso común --- */
.prep__shadow { fill: #000; opacity: 0.45; filter: blur(5px); transform-origin: 200px 342px; }
.prep__glass { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 2; stroke-linejoin: round; }
.prep__rim { stroke: rgb(255 255 255 / 0.7); stroke-width: 2; stroke-linecap: round; }
.prep__gloss { fill: none; stroke: rgb(255 255 255 / 0.35); stroke-width: 4.5; stroke-linecap: round; }
.prep__mark line { stroke: var(--fg-muted); stroke-width: 1.5; stroke-linecap: round; }
.prep__mark text { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.08em; fill: var(--fg-muted); }
.prep__w0 { stop-color: color-mix(in oklab, var(--brand-blue) 55%, #fff); stop-opacity: 0.35; }
.prep__w1 { stop-color: var(--brand-blue); stop-opacity: 0.55; }
.pstep__stage--2 .prep__w0, .pstep__stage--3 .prep__w0 { stop-color: color-mix(in oklab, var(--c) 60%, #fff); stop-opacity: 0.6; }
.pstep__stage--2 .prep__w1, .pstep__stage--3 .prep__w1 { stop-color: var(--c); stop-opacity: 0.85; }
.prep__wave { fill: rgb(255 255 255 / 0.18); animation: prep-wave 3.2s ease-in-out infinite; }
@keyframes prep-wave { 50% { transform: translateX(-20px); } }
.prep__cup, .prep__liquid { transform-box: view-box; }

/* Paso a paso: solo la escena activa (.is-on) se anima; las demás quedan en reposo y atenuadas */
.pstep:not(.is-on) .pstep__stage * { animation: none !important; }
.pstep:not(.is-on) .prep__stick { animation: none !important; }
.pstep__stage { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), filter 600ms; }
.pstep:not(.is-on) .pstep__stage { opacity: 0.45; transform: scale(0.96); filter: saturate(0.5); }
.pstep__n { transition: color var(--dur-base), text-shadow var(--dur-base); }
.pstep:not(.is-on) .pstep__n { color: var(--fg-subtle); text-shadow: none; }
.pstep__t { transition: color var(--dur-base); }
.pstep:not(.is-on) .pstep__t { color: var(--fg-muted); }
/* barra de progreso del paso activo */
.pstep__text { position: relative; padding-top: var(--s-3); }
.pstep__text::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--line); }
.pstep__text::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; }
.pstep.is-on .pstep__text::after { animation: p-bar var(--dur, 5s) linear both; }
.pstep.is-seen .pstep__text::after { transform: scaleX(1); opacity: 0.45; }
@keyframes p-bar { to { transform: scaleX(1); } }
.pstep { cursor: pointer; }

/* ===================== 01 · DISOLVER (ciclo 7 s) =====================
   0–22 % el agua cae y llena el vaso hasta la marca de 100 mL · 24–42 % entra el sobre, late la línea de corte y la tira se
   desprende con un destello · 44–82 % se inclina y vierte: chorro de polvo, salpicaduras, ondas y nube de color · 86–100 % sale. */
.pstep__stage--1 { --cycle: 7s; }
.pstep__stage--1 .prep__liquid { transform: translateY(170px); animation: p1-fill var(--cycle) cubic-bezier(0.3, 0, 0.2, 1) infinite; }
@keyframes p1-fill { 0%, 4% { transform: translateY(170px); } 22%, 100% { transform: translateY(0); } }
.prep__stream { fill: color-mix(in oklab, var(--brand-blue) 45%, #fff); opacity: 0; transform-origin: 200px -40px; animation: p1-stream var(--cycle) ease-in-out infinite; }
@keyframes p1-stream { 0%, 2% { opacity: 0; transform: scaleY(0); } 5% { opacity: 0.85; transform: scaleY(1); } 19% { opacity: 0.85; transform: scaleY(1); } 23%, 100% { opacity: 0; transform: scaleY(0.2); } }
.prep__mark { animation: p1-mark var(--cycle) linear infinite; }
.prep__mark line { stroke: var(--fg-muted); stroke-width: 1.5; stroke-linecap: round; }
.prep__mark text { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.08em; fill: var(--fg-muted); }
@keyframes p1-mark { 0%, 18% { opacity: 0.55; } 22%, 28% { opacity: 1; filter: drop-shadow(0 0 5px var(--c)); } 34%, 100% { opacity: 0.8; filter: none; } }
.prep__stick { position: absolute; width: 18.7%; aspect-ratio: 441 / 1138; left: 70%; top: 10%; transform-origin: 50% 0; z-index: 2; opacity: 0;
  animation: p1-stick var(--cycle) ease-in-out infinite; }
.prep__stick picture { position: absolute; inset: 0; display: block; }
.prep__stick img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 16px rgb(0 0 0 / 0.55)); }
.prep__stick-body { clip-path: inset(7.5% 0 0 0); }
.prep__stick-tear { clip-path: inset(0 0 92.5% 0); transform-origin: 0 100%; animation: p1-tear var(--cycle) ease-out infinite; }
.prep__cut { position: absolute; left: 4%; right: 4%; top: 7.5%; height: 0; border-top: 2px dashed var(--c); opacity: 0; filter: drop-shadow(0 0 4px var(--c)); animation: p1-cut var(--cycle) linear infinite; }
.prep__spark { position: absolute; left: 92%; top: 7.5%; width: 26%; height: 2px; background: var(--c); border-radius: 2px; transform-origin: 0 50%; opacity: 0; transform: rotate(var(--a)) scaleX(0); animation: p1-spark var(--cycle) ease-out infinite; }
@keyframes p1-stick {
  0%, 22% { opacity: 0; left: 70%; top: 18%; transform: rotate(0deg); }
  28%, 40% { opacity: 1; left: 70%; top: 10%; transform: rotate(0deg); }
  50%, 82% { opacity: 1; left: 52.75%; top: 23.6%; transform: rotate(-128deg); }
  92%, 100% { opacity: 0; left: 66%; top: 2%; transform: rotate(-110deg); }
}
@keyframes p1-tear { 0%, 36% { transform: none; opacity: 1; } 40% { transform: rotate(-8deg) skewX(-6deg); opacity: 1; } 46%, 100% { transform: translate(44%, -90%) rotate(28deg); opacity: 0; } }
@keyframes p1-cut { 0%, 29% { opacity: 0; } 32%, 35% { opacity: 0.95; } 37% { opacity: 0.3; } 39%, 100% { opacity: 0; } }
@keyframes p1-spark { 0%, 38% { opacity: 0; transform: rotate(var(--a)) scaleX(0); } 40% { opacity: 1; transform: rotate(var(--a)) scaleX(1); } 46%, 100% { opacity: 0; transform: rotate(var(--a)) translateX(140%) scaleX(0.3); } }
/* polvo: chorro desde la boca del sobre (244,104) a la superficie (236,192), solo mientras vierte */
.prep__powder { animation: p1-gate var(--cycle) linear infinite; opacity: 0; }
.prep__powder circle { fill: #fff; transform: translate(244px, 104px); animation: p1-fall 1s cubic-bezier(0.3, 0, 0.7, 0.4) infinite; animation-delay: calc(var(--i) * 80ms); }
.prep__powder circle:nth-child(odd) { --dx: -5px; } .prep__powder circle:nth-child(3n) { --dx: 6px; } .prep__powder circle:nth-child(4n) { --dx: -9px; } .prep__powder circle:nth-child(5n) { fill: color-mix(in oklab, var(--c) 60%, #fff); }
@keyframes p1-fall { 0% { opacity: 0; transform: translate(244px, 104px) scale(0.6); } 12% { opacity: 1; transform: translate(242px, 118px) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(236px + var(--dx, 0px)), 194px) scale(0.5); } }
@keyframes p1-gate { 0%, 52% { opacity: 0; } 56%, 80% { opacity: 1; } 86%, 100% { opacity: 0; } }
.prep__splash { animation: p1-gate var(--cycle) linear infinite; opacity: 0; }
.prep__splash circle { fill: #fff; transform-box: fill-box; transform-origin: center; animation: p1-splash 0.9s ease-out infinite; }
.prep__splash circle:nth-child(2) { animation-delay: 0.25s; } .prep__splash circle:nth-child(3) { animation-delay: 0.5s; } .prep__splash circle:nth-child(4) { animation-delay: 0.7s; }
@keyframes p1-splash { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 55% { transform: translateY(-16px); opacity: 0.9; } 100% { transform: translateY(2px); opacity: 0; } }
.prep__ripple { animation: p1-gate var(--cycle) linear infinite; opacity: 0; }
.prep__ripple ellipse { fill: none; stroke: #fff; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: p1-ripple 1.5s ease-out infinite; }
.prep__ripple ellipse:nth-child(2) { animation-delay: 0.75s; }
@keyframes p1-ripple { 0% { opacity: 0.6; transform: scale(0.4); } 100% { opacity: 0; transform: scale(5); } }
.prep__cloud { transform-origin: 215px 250px; animation: p1-cloudspin var(--cycle) ease-in-out infinite; }
@keyframes p1-cloudspin { 0%, 58% { transform: rotate(0deg); } 100% { transform: rotate(40deg); } }
.prep__cloud circle { fill: color-mix(in oklab, var(--c) 70%, #fff); animation: p1-cloud var(--cycle) ease-in-out infinite; animation-delay: calc(var(--k, 0) * 120ms); opacity: 0; }
.prep__cloud circle:nth-child(2) { --k: 1 } .prep__cloud circle:nth-child(3) { --k: 2 } .prep__cloud circle:nth-child(4) { --k: 3 } .prep__cloud circle:nth-child(5) { --k: 4 }
@keyframes p1-cloud { 0%, 58% { opacity: 0; } 72%, 90% { opacity: 0.34; } 100% { opacity: 0.2; } }

/* ===================== 02 · MEZCLAR (ciclo 5,2 s) =====================
   el mezclador entra, remueve, y el polvo en suspensión se disuelve hasta que el líquido queda homogéneo en el color de la fórmula;
   al final el mezclador sale con una gota. */
.pstep__stage--2 { --cycle: 5.2s; }
.pstep__stage--2 .prep__w0 { animation: p2-w0 var(--cycle) ease-in-out infinite; }
.pstep__stage--2 .prep__w1 { animation: p2-w1 var(--cycle) ease-in-out infinite; }
@keyframes p2-w0 { 0%, 18% { stop-color: color-mix(in oklab, var(--c) 22%, #e8ecf5); stop-opacity: 0.5; } 70%, 100% { stop-color: color-mix(in oklab, var(--c) 60%, #fff); stop-opacity: 0.6; } }
@keyframes p2-w1 { 0%, 18% { stop-color: color-mix(in oklab, var(--c) 45%, #c9d0e0); stop-opacity: 0.7; } 70%, 100% { stop-color: var(--c); stop-opacity: 0.85; } }
.pstep__stage--2 .prep__liquid { transform-origin: 200px 280px; animation: p2-slosh 1.4s ease-in-out infinite; }
.pstep__stage--2 .prep__wave { animation-duration: 1.4s; }
@keyframes p2-slosh { 0%, 100% { transform: rotate(-2.2deg) translateY(1.5px); } 50% { transform: rotate(2.2deg) translateY(-1.5px); } }
.prep__spoonIn { transform-origin: 306px 62px; animation: p2-spoonIn var(--cycle) ease-in-out infinite; }
@keyframes p2-spoonIn { 0% { opacity: 0; transform: translate(30px, -110px) rotate(8deg); } 9%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translate(26px, -96px) rotate(5deg); } }
.prep__spoon { transform-origin: 200px 276px; animation: p2-stir 1.4s ease-in-out infinite; }
@keyframes p2-stir { 0% { transform: translate(-22px, 0) rotate(-6deg); } 25% { transform: translate(0, 7px) rotate(0deg); } 50% { transform: translate(22px, 0) rotate(6deg); } 75% { transform: translate(0, -7px) rotate(0deg); } 100% { transform: translate(-22px, 0) rotate(-6deg); } }
.prep__spoon-handle { stroke: #e9ecf3; stroke-width: 5; stroke-linecap: round; }
.prep__spoon-bowl { fill: #d7dbe6; stroke: #fff; stroke-width: 1.2; }
.prep__drip { fill: color-mix(in oklab, var(--c) 70%, #fff); opacity: 0; animation: p2-drip var(--cycle) ease-in infinite; }
@keyframes p2-drip { 0%, 84% { opacity: 0; transform: translateY(0); } 87% { opacity: 1; } 95%, 100% { opacity: 0; transform: translateY(70px); } }
.prep__ring { fill: none; stroke: #fff; stroke-width: 1.2; stroke-dasharray: 0.12 0.13; opacity: 0.35; animation: p2-ring 2.2s linear infinite; }
@keyframes p2-ring { to { stroke-dashoffset: -1; } }
.prep__susp circle { fill: #fff; opacity: 0.85; animation: p2-orbit 1.6s ease-in-out infinite, p2-dissolve var(--cycle) ease-in infinite; animation-delay: calc(var(--i) * -140ms), 0s; transform-box: view-box; }
@keyframes p2-orbit { 0% { transform: translate(calc(200px + var(--r, 40px)), calc(262px + var(--dy, 0px))); } 25% { transform: translate(200px, calc(262px + var(--dy, 0px) + var(--r, 40px) * 0.3)); } 50% { transform: translate(calc(200px - var(--r, 40px)), calc(262px + var(--dy, 0px))); } 75% { transform: translate(200px, calc(262px + var(--dy, 0px) - var(--r, 40px) * 0.3)); } 100% { transform: translate(calc(200px + var(--r, 40px)), calc(262px + var(--dy, 0px))); } }
@keyframes p2-dissolve { 0%, 22% { opacity: 0.85; r: 2.2px; } 72%, 100% { opacity: 0; r: 0.4px; } }
.prep__swirl path { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; opacity: 0.5; stroke-dasharray: 0.22 0.78; animation: p2-swirl 1.9s linear infinite; }
.prep__swirl path:nth-child(2) { animation-duration: 1.4s; animation-direction: reverse; opacity: 0.32; }
@keyframes p2-swirl { to { stroke-dashoffset: -1; } }
.prep__vortex circle { fill: #fff; opacity: 0.7; animation: p2-vortex 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * -175ms); }
.prep__vortex circle:nth-child(odd) { --ry: 12px; --rx: 34px; } .prep__vortex circle:nth-child(even) { --ry: 9px; --rx: 50px; } .prep__vortex circle:nth-child(3n) { --dy: -28px; } .prep__vortex circle:nth-child(4n) { --dy: 24px; }
@keyframes p2-vortex { 0% { transform: translate(calc(200px + var(--rx, 40px)), calc(276px + var(--dy, 0px))); } 25% { transform: translate(200px, calc(276px + var(--dy, 0px) + var(--ry, 10px))); } 50% { transform: translate(calc(200px - var(--rx, 40px)), calc(276px + var(--dy, 0px))); } 75% { transform: translate(200px, calc(276px + var(--dy, 0px) - var(--ry, 10px))); } 100% { transform: translate(calc(200px + var(--rx, 40px)), calc(276px + var(--dy, 0px))); } }
.prep__bubbles circle { fill: rgb(255 255 255 / 0.8); opacity: 0; animation: p-bubble 2.4s ease-in infinite; animation-delay: calc(var(--i) * 330ms); }
@keyframes p-bubble { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 0.9; } 100% { opacity: 0; transform: translate(4px, -130px); } }

/* ===================== 03 · CONSUMIR (ciclo 6 s) =====================
   el vaso se alza e inclina; el nivel baja en tres sorbos con la superficie siempre horizontal; vuelve casi vacío,
   y el check aparece con un estallido de puntos en los cuatro colores de la línea. */
.pstep__stage--3 { --cycle: 6s; }
.pstep__stage--3 .prep__cup { transform-origin: 270px 330px; animation: p3-cup var(--cycle) ease-in-out infinite; }
.pstep__stage--3 .prep__shadow { animation: p3-shadow var(--cycle) ease-in-out infinite; }
.pstep__stage--3 .prep__liquid { transform-origin: 200px 230px; animation: p3-liquid var(--cycle) ease-in-out infinite; }
.pstep__stage--3 .prep__wave { animation-duration: 2.4s; }
@keyframes p3-cup { 0%, 10% { transform: none; } 24%, 68% { transform: translate(-6px, -34px) rotate(-26deg); } 80%, 100% { transform: none; } }
@keyframes p3-shadow { 0%, 10% { opacity: 0.45; transform: scale(1); } 24%, 68% { opacity: 0.2; transform: scale(0.75); } 80%, 100% { opacity: 0.45; transform: scale(1); } }
@keyframes p3-liquid {
  0%, 10% { transform: rotate(0deg) translateY(0); }
  24% { transform: rotate(26deg) translateY(0); }
  34% { transform: rotate(26deg) translateY(22px); } 40% { transform: rotate(26deg) translateY(22px); }
  50% { transform: rotate(26deg) translateY(44px); } 56% { transform: rotate(26deg) translateY(44px); }
  68% { transform: rotate(26deg) translateY(68px); }
  80%, 100% { transform: rotate(0deg) translateY(68px); }
}
.prep__done circle { fill: color-mix(in oklab, var(--c) 30%, transparent); stroke: var(--c); stroke-width: 1.6; }
.prep__done path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: p3-check var(--cycle) ease-out infinite; }
.prep__done { transform-box: fill-box; transform-origin: center; animation: p3-done var(--cycle) ease-out infinite; opacity: 0; }
@keyframes p3-done { 0%, 78% { opacity: 0; transform: scale(0.5); } 83%, 97% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } }
@keyframes p3-check { 0%, 82% { stroke-dashoffset: 1; } 90%, 100% { stroke-dashoffset: 0; } }
.prep__burst circle { fill: var(--c2); opacity: 0; transform-box: view-box; transform-origin: 200px 60px; animation: p3-burst var(--cycle) cubic-bezier(0.1, 0.7, 0.3, 1) infinite; }
@keyframes p3-burst { 0%, 79% { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(0.4); } 82% { opacity: 1; } 94%, 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(1); } }
.pstep__stage--3 .prep__glow { animation: p3-glow var(--cycle) ease-in-out infinite; }
@keyframes p3-glow { 0%, 76% { opacity: 0.85; transform: scale(1); } 86% { opacity: 1; transform: scale(1.12); } 100% { opacity: 0.85; transform: scale(1); } }

@media (min-width: 900px) {
  .prep__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); align-items: start; }
  .pstep__stage { width: 100%; }
}
@media (max-width: 899px) {
  .pstep { grid-template-columns: minmax(0, 1fr); }
  .pstep__stage { width: min(100%, 18rem); margin-inline: auto; }
  .pstep__text { justify-self: center; width: min(100%, 18rem); }
}
@media (prefers-reduced-motion: reduce) {
  .pstep__stage *, .prep__stick, .prep__stick-tear, .prep__cut, .pstep__text::after { animation: none !important; }
  .pstep:not(.is-on) .pstep__stage { opacity: 1; transform: none; filter: none; }
  .pstep:not(.is-on) .pstep__n { color: var(--c); }
  .prep__stick { opacity: 1; left: 52.75%; top: 23.6%; transform: rotate(-128deg); }
  .prep__stick-tear { opacity: 0; }
  .prep__powder, .prep__ripple, .prep__cloud, .prep__vortex, .prep__bubbles, .prep__susp, .prep__burst, .prep__stream, .prep__splash, .prep__spark, .prep__drip { display: none; }
  .pstep__stage--1 .prep__liquid { transform: none; }
  .prep__spoonIn { opacity: 1; transform: none; }
  .prep__done { opacity: 1; transform: none; } .prep__done path { stroke-dashoffset: 0; }
}
html[data-quality="low"] .prep__wave, html[data-quality="low"] .prep__vortex circle, html[data-quality="low"] .prep__bubbles circle { animation: none; }
html[data-quality="low"] .prep__vortex, html[data-quality="low"] .prep__bubbles { display: none; }