/* ==========================================================================
   PideFácil — Animación del flujo comercial (2 pasos)
   Origen: pidefacil-animacion-timeline.html (Codex, 2026-08-16), reducido de
   4 diapositivas a 2 (2026-08-27): entrada de pedidos y agentes.

   Adaptaciones al sistema del sitio:
   - Se quitaron las dos @font-face embebidas en base64 (85 KB): usa las
     tipografías que ya carga base.css (--h-body / --h-display).
   - Todos los selectores van acotados bajo .pf-flow, porque varias de sus
     clases (.panel, .base, .current…) ya existen en el sitio.
   - Los colores que coincidían con la paleta apuntan a los tokens de base.css.
   Requiere base.css cargado antes.
   ========================================================================== */

.pf-flow{--forest:var(--h-ink);--moss:#4a5f2c;--green:var(--h-accent);--sage:#c2d49e;
      --sprout:#ebf1df;--wash:#f5f8ee;--cream:#faf8f3;--white:#fff;
      --ink:#2c2a22;--body:#706c58;--sand:#c4c0ad;--gold:#c9a84c;
      --terra:#c47b5a;--mint:#7a9e7e;}
.pf-flow button{font:inherit}
.pf-flow{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;isolation:isolate;background:transparent;font-family:var(--h-body);color:var(--ink);container-type:inline-size}
.pf-flow :where(.branch-head b,.inbox strong,.erp-end strong,.hub,.system){font-family:var(--h-display);font-weight:800!important}
.pf-flow .layout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:stretch;padding:3cqw 5cqw 2.8cqw;gap:1.2cqw}
.pf-flow .stage{position:relative;width:100%;height:auto;min-height:0;flex:1 1 auto}
.pf-flow .panel{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(1.3cqw);transition:opacity .48s ease,transform .55s cubic-bezier(.22,1,.36,1),visibility 0s .5s;pointer-events:none}
.pf-flow .panel.current{opacity:1;visibility:visible;transform:none;transition-delay:.16s;pointer-events:auto}
.pf-flow .ico{width:2.6cqw;height:2.6cqw;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pf-flow .tiny-ico{width:1.8cqw;height:1.8cqw;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* --- Paso 1 · Dos ramas de entrada (WhatsApp y Email) → Pidefácil → ERP -- */
/* En vertical: los canales de entrada arriba en fila, Pidefácil en el
   centro y el ERP abajo, ocupando el mismo alto que la red del paso 2. */
.pf-flow .branches{position:absolute;left:6%;top:0;width:88%;display:flex;flex-direction:row;gap:3cqw;z-index:2}
.pf-flow .branch{flex:1 1 0;padding:1.3cqw 1.5cqw;border:1px solid rgba(74,95,44,.14);border-radius:1.7cqw;background:rgba(255,255,255,.9);box-shadow:0 .8cqw 2.3cqw rgba(44,61,24,.08);opacity:0;transform:translateY(-1.5cqw) scale(.92)}
.pf-flow .panel.current .branch{animation:drop .6s var(--d) cubic-bezier(.22,1,.36,1) forwards}
.pf-flow .branch:nth-child(1){--d:.15s}
.pf-flow .branch:nth-child(2){--d:.4s}
.pf-flow .branch-head{display:flex;align-items:center;justify-content:center;gap:.9cqw;color:var(--ink)}
.pf-flow .branch-head .ico{width:3cqw;height:3cqw;color:#5F7F48}
.pf-flow .wa-logo{fill:currentColor;stroke:none}
.pf-flow .branch-head b{font-size:1.85cqw}
.pf-flow .branch-items{display:flex;gap:.8cqw;margin-top:1.1cqw}
.pf-flow .branch-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5cqw;padding:.9cqw .4cqw;border:1px solid rgba(74,95,44,.1);border-radius:1.1cqw;background:var(--wash);color:var(--moss)}
.pf-flow .branch-item b{font-size:1.2cqw;font-weight:700;color:var(--ink)}
.pf-flow .flow-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.pf-flow .flow-lines path{fill:none;stroke:rgba(74,95,44,.26);stroke-width:1.5;stroke-dasharray:3 7}
.pf-flow .flow-lines circle{fill:var(--green);filter:drop-shadow(0 0 4px rgba(152,176,106,.9));offset-path:path(var(--path));animation:travel 2.7s var(--delay) ease-in infinite}
.pf-flow .inbox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:23.5cqw;height:10cqw;display:flex;align-items:center;justify-content:center;gap:1.2cqw;border-radius:2.3cqw;background:var(--forest);color:var(--white);box-shadow:0 1.6cqw 4cqw rgba(44,61,24,.23),0 0 0 1cqw rgba(152,176,106,.1);z-index:2}
.pf-flow .inbox-logo{width:4.9cqw;height:4.9cqw;display:grid;place-items:center;border-radius:1.35cqw;background:var(--green);color:var(--forest)}
.pf-flow .inbox-logo svg{width:3cqw;height:3cqw}
.pf-flow .inbox strong{font-size:2.3cqw;letter-spacing:-.035em}
.pf-flow .inbox small{display:block;margin-top:.28cqw;color:var(--sage);font-size:1.2cqw;font-weight:560}
.pf-flow .erp-end{position:absolute;inset-inline:0;bottom:0;top:auto;margin-inline:auto;width:fit-content;height:9.5cqw;display:flex;align-items:center;gap:1cqw;padding:0 1.6cqw;border:1px solid var(--sage);border-radius:1.7cqw;background:var(--sprout);color:var(--forest);box-shadow:0 .9cqw 2.6cqw rgba(74,95,44,.13),inset 0 0 0 1px rgba(152,176,106,.22);opacity:0;transform:scale(.86);z-index:2}
.pf-flow .panel.current .erp-end{animation:pop .6s .9s cubic-bezier(.22,1,.36,1) forwards}
.pf-flow .erp-end .ico{width:3cqw;height:3cqw;color:var(--moss);flex:0 0 auto}
.pf-flow .erp-end strong{display:block;font-size:1.7cqw;letter-spacing:-.02em}
.pf-flow .erp-end small{display:block;margin-top:.28cqw;font-size:1.15cqw;font-weight:560;color:var(--moss)}
.pf-flow .flow-down{display:none}

/* --- Paso 2 · Red de agentes: los tres trabajando a la vez con el ERP ---- */
.pf-flow .network-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pf-flow .network-svg .base{fill:none;stroke:rgba(74,95,44,.22);stroke-width:1.5}
.pf-flow .network-svg .moving{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 10;animation:dashes 1.2s linear infinite}
.pf-flow .hub{position:absolute;left:50%;top:56%;width:20cqw;height:10.5cqw;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:2.2cqw;background:var(--forest);color:var(--white);box-shadow:0 1.4cqw 3.8cqw rgba(44,61,24,.22),0 0 0 1cqw rgba(152,176,106,.1);font-size:2.5cqw;font-weight:780;letter-spacing:-.045em}
.pf-flow .system{position:absolute;width:18cqw;height:9cqw;display:flex;align-items:center;gap:.8cqw;padding:1.1cqw 1.2cqw;border:1px solid rgba(74,95,44,.14);border-radius:1.6cqw;background:rgba(255,255,255,.94);box-shadow:0 .8cqw 2.3cqw rgba(44,61,24,.08);color:var(--ink);font-size:1.4cqw;font-weight:720;line-height:1.2;text-align:left;opacity:0;transform:scale(.86)}
.pf-flow .panel.current .system{animation:pop .6s var(--d) cubic-bezier(.22,1,.36,1) forwards}
.pf-flow .system .ico{color:var(--moss);flex:0 0 auto}
.pf-flow .system.active{border-color:rgba(44,61,24,.66);box-shadow:0 1.2cqw 3cqw rgba(44,61,24,.16),0 0 0 .55cqw rgba(152,176,106,.16)}
.pf-flow .system.active .ico{color:var(--forest)}
.pf-flow .orders{left:0;top:3%;--d:.2s}
.pf-flow .sales{left:calc(50% - 9cqw);top:3%;--d:.4s}
.pf-flow .collections{right:0;top:3%;--d:.6s}
.pf-flow .erp{left:calc(50% - 9cqw);bottom:0;--d:.8s;background:var(--sprout);border-color:var(--sage);color:var(--forest);box-shadow:0 .9cqw 2.6cqw rgba(74,95,44,.13),inset 0 0 0 1px rgba(152,176,106,.22)}

/* --- Selector de paso: dos botones con texto (Pedidos / Agentes) --------- */
.pf-flow .timeline{position:relative;z-index:6;align-self:center;display:flex;align-items:center;gap:1cqw;height:6.4cqw;flex:0 0 auto}
.pf-flow .timeline-step{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-width:11cqw;height:4.2cqw;padding:0 2.2cqw;border:1px solid rgba(74,95,44,.24);border-radius:99px;background:var(--h-paper);color:var(--body);font-family:var(--h-display);font-size:1.5cqw;font-weight:800;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:background .38s,color .38s,border-color .38s,transform .38s cubic-bezier(.22,1,.36,1),box-shadow .38s}
.pf-flow .timeline-step:hover{border-color:var(--green);transform:translateY(-.18cqw)}
.pf-flow .timeline-step.current{border-color:var(--forest);background:var(--forest);color:var(--white);box-shadow:0 .65cqw 1.8cqw rgba(44,61,24,.18),0 0 0 .55cqw rgba(152,176,106,.13)}

@keyframes drop{to{opacity:1;transform:none}}
@keyframes pop{to{opacity:1;transform:scale(1)}}
@keyframes travel{0%{offset-distance:0;opacity:0}12%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes dashes{to{stroke-dashoffset:-22}}

/* --- Portátiles y pantallas escaladas ------------------------------------
   Todo va en cqw, así que cuando la animación mide menos de ~900px (un
   portátil de 1366px, o uno Full HD al 125-150 %) el texto de las tarjetas
   bajaba de 10px. Aquí las tarjetas crecen en proporción al hueco que tienen
   (ocupan una fracción pequeña del ancho) para que sigan leyéndose. Los
   nodos conservan la posición, así que las líneas del SVG siguen llegando. */
@media(min-width:701px){
@container(max-width:900px){
.pf-flow .ico{width:3.2cqw;height:3.2cqw}
.pf-flow .tiny-ico{width:2.3cqw;height:2.3cqw}
.pf-flow .branch{padding:1.4cqw 1.6cqw}
.pf-flow .branch-head{gap:1.1cqw}
.pf-flow .branch-head .ico{width:3.6cqw;height:3.6cqw}
.pf-flow .branch-head b{font-size:2.3cqw}
.pf-flow .branch-items{gap:1cqw;margin-top:1.2cqw}
.pf-flow .branch-item{gap:.6cqw;padding:1cqw .4cqw}
.pf-flow .branch-item b{font-size:1.6cqw}
.pf-flow .inbox{width:28cqw;height:11.5cqw;gap:1.5cqw}
.pf-flow .inbox-logo{width:5.8cqw;height:5.8cqw;border-radius:1.7cqw}
.pf-flow .inbox-logo svg{width:3.6cqw;height:3.6cqw}
.pf-flow .inbox strong{font-size:2.9cqw}
.pf-flow .inbox small{font-size:1.55cqw}
.pf-flow .erp-end{height:11cqw;padding:0 2cqw;gap:1.3cqw}
.pf-flow .erp-end .ico{width:3.6cqw;height:3.6cqw}
.pf-flow .erp-end strong{font-size:2.15cqw}
.pf-flow .erp-end small{font-size:1.5cqw}
.pf-flow .hub{width:26cqw;height:12.5cqw;font-size:3.2cqw}
.pf-flow .system{width:23cqw;height:11cqw;gap:1cqw;padding:1.2cqw 1.4cqw;font-size:1.85cqw}
.pf-flow .sales,.pf-flow .erp{left:calc(50% - 11.5cqw)}
.pf-flow .timeline{gap:1.2cqw;height:7.5cqw}
.pf-flow .timeline-step{min-width:13cqw;height:5.2cqw;padding:0 2.6cqw;font-size:1.9cqw}
}
}

@media(max-width:560px){
.pf-flow .layout{padding:3cqw 4cqw 2.6cqw;gap:1cqw}
.pf-flow .timeline{height:6.8cqw}
.pf-flow .timeline-step{height:4.5cqw;font-size:1.6cqw}
}
@media(prefers-reduced-motion:reduce){
.pf-flow .panel{transition-duration:.01ms!important}
.pf-flow .panel.current .branch,.pf-flow .panel.current .erp-end,.pf-flow .panel.current .system,.pf-flow .flow-lines circle,.pf-flow .network-svg .moving{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ==========================================================================
   Versión móvil (≤700px): la escena 16:10 escalada en cqw queda ilegible en
   un teléfono, así que cada panel se rehace en vertical y a tamaño de
   lectura. Los paneles siguen apilados en el mismo .stage (con altura fija
   en cqw) para conservar el fundido entre pasos.
   ========================================================================== */
@media(max-width:700px){
.pf-flow{aspect-ratio:auto}
.pf-flow .layout{position:static;padding:1cqw 1cqw 3cqw;gap:4cqw}
.pf-flow .stage{flex:none;height:128cqw}
.pf-flow .timeline{gap:2cqw;height:11cqw}
.pf-flow .timeline-step{min-width:26cqw;height:10cqw;padding:0 4cqw;font-size:3.5cqw}
.pf-flow .ico{width:5cqw;height:5cqw}
.pf-flow .tiny-ico{width:3.4cqw;height:3.4cqw}

/* Paso 1 · las dos ramas, Pidefácil y el ERP apilados; las líneas del
   embudo se sustituyen por conectores punteados verticales. */
.pf-flow .panel[data-panel="0"]{display:flex;flex-direction:column;justify-content:center;gap:2.4cqw}
.pf-flow .branches{position:static;transform:none;flex-direction:column;width:100%;gap:2.4cqw}
.pf-flow .branch{padding:3cqw;border-radius:4cqw}
.pf-flow .branch-head{gap:2.2cqw}
.pf-flow .branch-head .ico{width:6cqw;height:6cqw}
.pf-flow .branch-head b{font-size:3.6cqw}
.pf-flow .branch-items{gap:2cqw;margin-top:2.4cqw}
.pf-flow .branch-item{gap:1.2cqw;padding:2.2cqw 1cqw;border-radius:2.6cqw}
.pf-flow .branch-item .tiny-ico{width:4cqw;height:4cqw}
.pf-flow .branch-item b{font-size:2.6cqw}
.pf-flow .flow-lines{display:none}
.pf-flow .flow-down{display:block;width:0;height:5cqw;margin:0 auto;border-left:.6cqw dotted rgba(74,95,44,.45)}
.pf-flow .inbox{position:static;transform:none;width:66cqw;height:18cqw;margin-inline:auto;gap:2.8cqw;border-radius:5cqw}
.pf-flow .inbox-logo{width:10cqw;height:10cqw;border-radius:3cqw}
.pf-flow .inbox-logo svg{width:6cqw;height:6cqw}
.pf-flow .inbox strong{font-size:4.6cqw}
.pf-flow .inbox small{margin-top:.6cqw;font-size:2.6cqw}
.pf-flow .erp-end{position:static;transform:scale(.86);height:auto;margin-inline:auto;padding:3cqw 4.5cqw;border-radius:4cqw;gap:2.4cqw}
.pf-flow .erp-end .ico{width:6cqw;height:6cqw}
.pf-flow .erp-end strong{font-size:3.6cqw}
.pf-flow .erp-end small{margin-top:.5cqw;font-size:2.5cqw}

/* Paso 2 · red de agentes: tarjetas verticales, misma disposición en
   estrella para que las líneas del SVG (estirado por el preserveAspectRatio
   none) sigan llegando a cada nodo. */
.pf-flow .hub{width:36cqw;height:16cqw;border-radius:4.5cqw;font-size:4.6cqw}
.pf-flow .system{flex-direction:column;justify-content:center;width:30cqw;height:auto;min-height:20cqw;gap:1.6cqw;padding:2.4cqw 1.6cqw;border-radius:3.6cqw;font-size:3.1cqw;text-align:center}
.pf-flow .orders{left:0;top:4%}
.pf-flow .sales{left:calc(50% - 15cqw);top:4%}
.pf-flow .collections{right:0;top:4%}
.pf-flow .erp{left:calc(50% - 15cqw);bottom:3%}
}