/* Home: "¿Cuándo hacer cada sesión?" como tendedero de impresos y "Paso a paso" con escenas animadas.
   Todo visible sin JS; el movimiento solo si el usuario no pidió reducirlo. */

/* ---------- Tendedero ---------- */
.cuando-v2{background:linear-gradient(180deg,var(--paper2) 0%,#F6EFE2 100%);overflow:hidden}
.tendedero{position:relative;margin-top:10px;padding:0 0 30px}
.cuerda{position:absolute;left:0;right:0;top:0;width:100%;height:80px;color:#9A7A52;pointer-events:none}
.cuerda path{stroke-dasharray:1;stroke-dashoffset:0}
.js .tendedero:not(.visto) .cuerda path{stroke-dashoffset:1}
.tendedero.visto .cuerda path{transition:stroke-dashoffset 1.6s var(--ease)}
.tendido-lista{list-style:none;margin:0;padding:18px max(20px,calc((100vw - 1280px) / 2 + 40px)) 26px;display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;perspective:1200px}
.tendido-lista::-webkit-scrollbar{display:none}
.tendido{position:relative;flex:0 0 min(62vw,250px);scroll-snap-align:center;padding-top:22px;transform-origin:50% 0;rotate:var(--r);animation:colgar 1s var(--ease) both;animation-delay:calc(var(--i) * 120ms + .2s)}
.tendido:nth-child(2),.tendido:nth-child(4){margin-top:26px}
.tendido:nth-child(3){margin-top:38px}
@keyframes colgar{from{opacity:0;translate:0 -40px;rotate:calc(var(--r) * -3)}}
.js .tendedero:not(.visto) .tendido{animation-play-state:paused}
.pinza{position:absolute;z-index:3;top:4px;left:50%;width:16px;height:36px;margin-left:-8px;border-radius:4px;background:linear-gradient(90deg,#C9A57A,#E7CFA8 45%,#B98F5F);box-shadow:0 3px 6px rgba(36,31,24,.25)}
.pinza::after{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:rgba(92,64,34,.35);border-radius:2px}
.colgado{display:block;position:relative;background:var(--card);padding:10px 10px 18px;text-decoration:none;color:var(--ink);box-shadow:0 1px 0 var(--line),0 24px 40px -22px rgba(36,31,24,.5);transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.colgado figure.foto{border-radius:0}
.cuando{position:absolute;z-index:2;top:18px;left:18px;font:600 12.5px/1 var(--sans);background:var(--clay);color:#FBF9F3;padding:7px 11px;border-radius:99px;box-shadow:0 6px 14px -6px rgba(143,85,53,.6)}
.colgado-pie{display:block;padding:14px 4px 0}
.colgado-pie b{display:block;font:italic 500 26px/1.1 var(--serif);color:var(--ink)}
.colgado-pie span{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink2)}
@media (hover:hover){
  .tendido{transition:rotate .6s var(--ease)}
  .tendido:hover{rotate:0deg;z-index:4}
  .tendido:hover .colgado{box-shadow:0 1px 0 var(--line),0 40px 60px -26px rgba(36,31,24,.55)}
  .tendido:hover .colgado-pie b{color:var(--clay)}
}
.cuando-nota{margin-top:0;font-size:14px;color:var(--ink3)}
@media (min-width:1100px){
  .tendido-lista{justify-content:center;overflow:visible}
  .tendido{flex-basis:220px}
  .cuando-nota{display:none}
}

/* ---------- Paso a paso ---------- */
.pasos-v2{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:26px;counter-reset:paso}
.paso{background:var(--card);border-radius:22px;padding:14px 14px 24px;box-shadow:0 1px 0 var(--line),0 26px 50px -30px rgba(36,31,24,.45);transition:transform .5s var(--ease)}
.paso-visual{position:relative;height:230px;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#F3E9D8,#E8DAC2)}
.paso-texto{position:relative;padding:22px 8px 0}
.paso-num{position:absolute;top:-30px;right:10px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--pine);color:var(--glow);font:italic 500 28px/1 var(--serif);box-shadow:0 0 0 5px var(--card)}
.paso h3{font-size:27px;margin-bottom:8px}
.paso p{font-size:16.5px;line-height:1.6;color:var(--ink2)}
.pasos-cta{margin-top:40px;text-align:center}
@media (min-width:760px){ .pasos-v2{grid-template-columns:repeat(2,1fr);gap:28px} }
@media (min-width:1100px){
  .pasos-v2{grid-template-columns:repeat(4,1fr);gap:22px}
  .paso:nth-child(even){translate:0 34px}
}
@media (hover:hover){ .paso:hover{transform:translateY(-8px) rotate(-.6deg)} }

/* escena 1: el chat */
.p-chat{padding:14px;display:flex;flex-direction:column;gap:9px;background:#EFE7DC;background-image:radial-gradient(rgba(31,92,71,.08) 1px,transparent 1.2px);background-size:12px 12px}
.p-chat-cab{display:flex;align-items:center;gap:9px;font-size:13.5px}
.p-chat-cab img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.burbuja{margin:0;max-width:86%;font-size:13.5px;line-height:1.4;padding:9px 11px;border-radius:12px;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.burbuja.tuya{align-self:flex-end;background:#D9F4D0;border-radius:12px 3px 12px 12px}
.burbuja.suya{background:#fff;border-radius:3px 12px 12px 12px}
.escribiendo{margin:0;align-self:flex-start;background:#fff;border-radius:12px;padding:10px 12px;display:flex;gap:4px}
.escribiendo i{width:6px;height:6px;border-radius:50%;background:#9a948a;animation:punto 1.2s infinite}
.escribiendo i:nth-child(2){animation-delay:.2s}.escribiendo i:nth-child(3){animation-delay:.4s}
@keyframes punto{0%,60%,100%{opacity:.3;translate:0 0}30%{opacity:1;translate:0 -3px}}
.js .paso .burbuja{opacity:0;translate:0 8px;transition:opacity .5s,translate .5s var(--ease)}
.js .paso.is-in .burbuja{opacity:1;translate:0 0}
.js .paso.is-in .burbuja.suya{transition-delay:.7s}

/* escena 2: la cámara */
.p-camara img{width:100%;height:100%;object-fit:cover}
.flash{position:absolute;inset:0;background:#fff;opacity:0;animation:flash 4.5s 1.5s infinite}
@keyframes flash{0%,92%,100%{opacity:0}94%{opacity:.85}}
.rec{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;background:rgba(20,16,12,.55);color:#fff;font-size:12.5px;padding:6px 10px;border-radius:99px;backdrop-filter:blur(4px)}
.rec::before{content:"";width:8px;height:8px;border-radius:50%;background:#E0483B;animation:punto 1.4s infinite}

/* escena 3: la galería en el celular */
.p-galeria{display:grid;place-items:center}
.tel{position:relative;width:150px;height:210px;margin-top:30px;background:#fff;border-radius:22px 22px 0 0;padding:26px 8px 0;box-shadow:0 18px 30px -16px rgba(36,31,24,.45);border:3px solid #2A2520;border-bottom:0}
.tel-barra{position:absolute;top:8px;left:0;right:0;text-align:center;font-size:10.5px;color:var(--ink3)}
.tel-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.tel-grid figure.foto{border-radius:4px}
.corazon{position:absolute;font-size:22px;color:#E0483B;opacity:0;text-shadow:0 2px 6px rgba(224,72,59,.35)}
.corazon.c1{left:34px;top:68px}.corazon.c2{right:30px;top:150px}
.js .paso.is-in .corazon{animation:latir 2.8s var(--ease) infinite}
.js .paso.is-in .corazon.c2{animation-delay:1.1s}
@keyframes latir{0%{opacity:0;scale:.3}15%{opacity:1;scale:1.25}30%{scale:1}70%{opacity:1}100%{opacity:0;translate:0 -18px}}

/* escena 4: los impresos que se abren en abanico */
.p-impresos{display:grid;place-items:center;perspective:700px}
.imp{position:absolute;width:118px;background:#fff;padding:6px 6px 18px;box-shadow:0 14px 24px -12px rgba(36,31,24,.5);transition:transform .9s var(--ease)}
.imp figure.foto{border-radius:0}
.imp.a{transform:rotate(-3deg)}.imp.b{transform:rotate(2deg)}.imp.c{transform:rotate(0)}
.js .paso.is-in .imp.a{transform:translate(-62px,8px) rotate(-12deg)}
.js .paso.is-in .imp.b{transform:translate(62px,10px) rotate(11deg)}
.js .paso.is-in .imp.c{transform:translateY(-8px) rotate(-1deg) scale(1.05)}

@media (prefers-reduced-motion:reduce){
  .tendido,.escribiendo i,.flash,.rec::before,.corazon{animation:none!important}
  .js .tendedero:not(.visto) .cuerda path{stroke-dashoffset:0}
  .corazon{opacity:1}
}
/* ajustes tras la captura: el chat no cabía y los impresos quedaban arriba */
.paso-visual{height:250px}
.p-chat{gap:7px;padding:12px}
.burbuja{font-size:12.5px;padding:8px 10px}
.imp{left:50%;top:50%;margin:-82px 0 0 -59px}
/* v2 tras la captura en vivo: cada escena llena su marco (medía 0 px y los impresos flotaban arriba) */
.p-vista{position:absolute;inset:0}
.paso-visual{height:260px}
.p-camara img{object-position:50% 78%}
.p-chat{justify-content:flex-end;gap:8px}
.p-chat-cab{position:absolute;top:12px;left:12px}
.burbuja{font-size:12.5px;line-height:1.35;max-width:88%}
.pasos-cta{margin-top:48px}
@media (min-width:1100px){ .pasos-cta{margin-top:84px} }
.p-chat{padding-top:54px}

/* v 2026-09-24a */