/* ==========================================================
   VOLTARIS · fases.css — carrusel de fases del proceso
   Suministro Industrial e Impresión 3D (franja #proceso, clase .flow).
   - El protagonista es el texto de cada fase; el titular de la franja y la
     línea de fases son discretos.
   - Avance automático que se detiene al interactuar (fases.js). Flechas,
     pausa, puntos y deslizamiento en táctil.
   - Sin JS: las 4 fases en lista vertical, todo visible.
   ========================================================== */

/* ---------- Cabecera de la franja (más contenida que el .h2 general) ---------- */
.flow .flow__head{display:flex;align-items:baseline;gap:clamp(20px,3vw,48px);max-width:940px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.1)}
.flow .flow__head .h2{flex:none;font-size:clamp(22px,1.9vw,30px);max-width:none;margin:0}
.flow .flow__head .txt{margin:0;font-size:clamp(13.5px,.95vw,15px);line-height:1.5;color:rgba(247,245,240,.55);max-width:46ch}
@media (max-width:900px){
  .flow .flow__head{flex-direction:column;gap:8px}
}

/* ---------- Imagen decorativa de fondo (solo escritorio) ---------- */
.flow{overflow:clip}
.flow__bg{display:none}
@media (min-width:1001px){
  .flow__bg{display:block;position:absolute;z-index:0;right:-3vw;bottom:-4vh;width:min(40vw,680px);height:auto;opacity:.38;pointer-events:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%);mask-image:linear-gradient(90deg,transparent 0,#000 32%)}
}

/* ---------- Fases ---------- */
.flow__car{margin-top:clamp(40px,6.5vh,72px);position:relative;max-width:min(100%,940px)}
.flow__cards{position:relative}
.flow__step h3{font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.03em;color:var(--azul-luz);
  font-size:clamp(22px,1.95vw,30px);line-height:1.1}
.flow__step p{margin-top:18px;color:var(--hueso);font-size:clamp(22px,2.25vw,34px);line-height:1.42;max-width:34ch;font-weight:500;letter-spacing:-.005em}

/* Sin JS: lista vertical con hilo */
.flow__cards{padding-left:28px}
.flow__cards::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--linea)}
.flow__step+.flow__step{margin-top:40px}
.flow__ctrl{display:none}

/* ---------- Con JS: carrusel ---------- */
.js .flow__cards{display:grid;padding-left:0;min-height:0;touch-action:pan-y}
.js .flow__cards::before{display:none}
.js .flow__step{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateX(28px);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s linear .7s}
.js .flow__step.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease .08s,transform .7s cubic-bezier(.2,.7,.2,1) .08s,visibility 0s}
.js .flow__step.is-out{transform:translateX(-28px)}
.js .flow__ctrl{display:flex;align-items:center;gap:clamp(20px,3vw,48px);margin-top:clamp(36px,5.5vh,56px);max-width:860px}

/* Línea de fases: fina, etiquetas pequeñas; el tramo activo se rellena con el tiempo */
.flow__rail{flex:1;display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:10px;margin:0;padding:0;list-style:none}
.flow__rail li{position:relative}
.flow__rail button{display:block;width:100%;background:none;border:0;padding:14px 0 0;cursor:pointer;text-align:left;color:rgba(247,245,240,.42);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.45;transition:color .3s}
.flow__rail button::before,.flow__rail button::after{content:"";position:absolute;left:0;top:0;height:2px;border-radius:2px}
.flow__rail button::before{right:0;background:rgba(255,255,255,.12)}
.flow__rail button::after{width:100%;background:var(--azul);box-shadow:0 0 10px var(--azul-glow);transform-origin:0 50%;transform:scaleX(0)}
.flow__rail li.is-done button::after{transform:scaleX(1)}
.flow__rail li.is-on button{color:var(--hueso)}
.flow__rail li.is-on button::after{transform:scaleX(1)}
.flow.is-auto .flow__rail li.is-on button::after{transform:scaleX(0);animation:flowfill var(--dur,6.5s) linear forwards}
.flow.is-hold .flow__rail li.is-on button::after{animation-play-state:paused}
.flow__rail button:hover{color:var(--hueso)}
.flow__rail button:focus-visible{outline:2px solid var(--azul-luz);outline-offset:4px;border-radius:2px}
@keyframes flowfill{to{transform:scaleX(1)}}

/* Flechas y pausa */
.flow__nav{display:flex;gap:8px;flex:none}
.flow__btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(11,13,16,.4);color:var(--hueso);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,background .2s}
.flow__btn:hover{border-color:var(--azul);background:rgba(0,134,255,.12)}
.flow__btn:focus-visible{outline:2px solid var(--azul-luz);outline-offset:3px}
.flow__btn svg{width:16px;height:16px}
.flow__play svg{width:12px;height:12px;fill:currentColor}
.flow__play .i-play,.flow.is-stopped .flow__play .i-pause{display:none}
.flow.is-stopped .flow__play .i-play{display:block}

/* ---------- Móvil ---------- */
@media (max-width:700px){
  .js .flow__ctrl{flex-direction:column;align-items:stretch;gap:22px}
  .flow__rail{gap:6px}
  .flow__rail button{font-size:0;padding-top:12px;min-height:28px}      /* en móvil solo la barra; el título va en la fase */
  .flow__nav{justify-content:flex-start}
  .flow__btn{width:44px;height:44px}
  .flow__step p{font-size:clamp(20px,5.4vw,23px);line-height:1.45}
}

/* Movimiento reducido: sin avance automático ni desplazamientos (fases.js no lo activa) */
@media (prefers-reduced-motion:reduce){
  .js .flow__step,.js .flow__step.is-on{transition:none;transform:none}
  .flow__play{display:none}
}