/* ===================== EL CAMINO DEL CRÉDITO =====================
   Hero de solicitar.html controlado por el scroll: un lienzo dentro de un
   marco redondeado pinta el fotograma que corresponde al avance de la
   sección (secuencia de imágenes, no <video>: el seek por fotograma es
   instantáneo en cualquier navegador). Cinco tramos de texto se van
   relevando encima. Sin JS (.camino sin .is-js) la sección es un bloque
   normal: póster arriba y los cinco textos apilados debajo. */

.camino{position:relative;background:var(--blanco)}
.camino__panel{
  position:relative;
  padding:clamp(.6rem,1.2vw,1.2rem) clamp(.6rem,1.2vw,1.2rem) 0;
}
.camino__marco{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--radius-lg);background:var(--crema);
  aspect-ratio:16/9;
  box-shadow:0 30px 70px -40px rgba(43,51,39,.45);
}
.camino__poster,.camino__lienzo{position:absolute;inset:0;width:100%;height:100%}
.camino__poster img{width:100%;height:100%;object-fit:cover;display:block}
.camino__lienzo{display:block;z-index:1;opacity:0;transition:opacity .5s var(--ease)}
.camino__lienzo.is-listo{opacity:1}
/* Velo blanco del lado del texto (mismo patrón que .stack__veil de la home) */
.camino__veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 34%, rgba(255,255,255,.4) 56%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 20%);
}
.camino__copy{position:relative;z-index:3;padding:clamp(1.2rem,3vw,2.6rem) clamp(1rem,2.2vw,1.8rem) clamp(1.4rem,3vw,2.6rem)}
.camino__paso{max-width:600px;margin-bottom:2.4rem;color:var(--tinta)}
.camino__paso:last-child{margin-bottom:0}

/* ---- Con JS: sección alta, panel pegajoso, textos relevándose ---- */
.camino.is-js{height:calc(300vh + 100svh);margin-top:calc(-1 * var(--cab,70px))}
.camino.is-js .camino__panel{
  --pt:calc(var(--cab,70px) + .8rem);--px:clamp(.6rem,1.2vw,1.2rem);--pb:clamp(.6rem,1.2vw,1.2rem);
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;
  padding:var(--pt) var(--px) var(--pb);
}
.camino.is-js .camino__marco{flex:1;min-height:0;aspect-ratio:auto}
/* El texto se superpone al marco ocupando exactamente su misma caja */
.camino.is-js .camino__copy{position:absolute;inset:var(--pt) var(--px) var(--pb);padding:0;z-index:3;pointer-events:none}
.camino.is-js .camino__paso{
  position:absolute;left:clamp(1.4rem,4vw,4rem);top:50%;
  width:min(600px,46%);margin:0;
  opacity:0;transform:translateY(calc(-50% + 26px));pointer-events:none;
  transition:opacity .5s var(--ease),transform .6s var(--ease-out-soft,ease-out);
}
.camino.is-js .camino__paso.is-on{opacity:1;transform:translateY(-50%);pointer-events:auto}

/* ---- Tipografía de los tramos ---- */
.camino__paso .breadcrumb{margin-bottom:.8rem}
/* La familia/peso/mayúsculas vienen de la regla de titulares de marca en styles.css */
.camino__paso h1,.camino__paso h2{
  color:var(--verde-texto);
  font-size:clamp(1.65rem,3vw,2.6rem);margin-bottom:.9rem;
}
.camino__paso h1 .h1-kicker{
  font-family:var(--f-body);font-size:.75rem;font-weight:700;line-height:1.35;letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--verde-marca);margin-bottom:.8rem;
}
.camino__paso h2 mark.mk-yellow,.camino__paso h1 mark.mk-yellow{padding:.02em .14em}
/* motion.css deja el resaltador en 0% hasta que el titular "aparece"; aquí aparece con el tramo */
.motion-viva .camino__paso.is-on mark.mk-yellow,.camino:not(.is-js) mark.mk-yellow{background-size:100% 100%}
.camino__paso p{color:var(--gris-texto);font-size:clamp(.98rem,1.1vw,1.12rem);max-width:48ch;margin-bottom:1rem}
.camino__paso p strong{color:var(--tinta);font-weight:700}
.camino__pista{display:inline-flex;align-items:center;gap:.5rem;color:var(--verde-texto);font-weight:700;font-size:.9rem;margin-top:.2rem}
.camino__pista .ico{width:1.1rem;height:1.1rem;stroke:var(--verde-texto);animation:pitchDown 1.8s ease-in-out infinite}

/* Tramo 2: evidencia real */
.camino__proof{display:flex;gap:.5rem;margin:.2rem 0 .7rem}
.camino__proof a{
  flex:1 1 0;aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:var(--verde-menta);border:1px solid var(--linea);
  box-shadow:0 10px 24px -16px rgba(43,51,39,.35);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.camino__proof img{width:100%;height:100%;object-fit:cover;display:block}
.camino__proof a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.camino__enlace{display:inline-flex;align-items:center;gap:.4rem;color:var(--verde-texto);font-weight:700;font-size:.9rem}
.camino__enlace .ico{width:1rem;height:1rem;stroke:var(--verde-texto)}
.camino__enlace small{color:var(--gris-suave);font-weight:500}

/* Tramo 3: los cuatro pasos */
.camino__pasos{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:.2rem 0 0;padding:0;list-style:none;counter-reset:paso}
.camino__pasos li{
  display:flex;align-items:center;gap:.7rem;
  background:#fff;border:1px solid var(--linea);border-radius:14px;padding:.65rem .8rem;
  box-shadow:0 10px 24px -18px rgba(43,51,39,.3);
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease-out-soft,ease-out);
}
.camino__paso.is-on .camino__pasos li,.camino:not(.is-js) .camino__pasos li{opacity:1;transform:none}
.camino__paso.is-on .camino__pasos li:nth-child(2){transition-delay:.1s}
.camino__paso.is-on .camino__pasos li:nth-child(3){transition-delay:.2s}
.camino__paso.is-on .camino__pasos li:nth-child(4){transition-delay:.3s}
.camino__pasos .ico{width:2.1rem;height:2.1rem;flex:none;padding:.5rem;border-radius:10px;background:var(--verde-marca);color:#fff;stroke:#fff}
.camino__pasos b{display:block;color:var(--tinta);font-weight:800;font-size:.95rem;line-height:1.15}
.camino__pasos span{display:block;color:var(--gris-texto);font-size:.8rem;line-height:1.25}

/* Tramo 4: confianza + CTA */
.camino__confianza{display:grid;gap:.5rem;margin:0 0 1.1rem;padding:0;list-style:none}
.camino__confianza li{display:flex;align-items:flex-start;gap:.6rem;color:var(--tinta);font-weight:500;font-size:.93rem;line-height:1.35}
.camino__confianza .ico{width:1.25rem;height:1.25rem;flex:none;margin-top:.05rem;color:#fff;stroke:#fff;stroke-width:2.6;background:var(--verde-marca);border-radius:50%;padding:4px}
.camino__cta{padding:.95rem 1.6rem;font-size:1.02rem;border-radius:50px}
.camino__cta .ico{width:1.1rem;height:1.1rem;stroke:#fff}
.camino__lema{display:block;margin-top:.7rem;color:var(--gris-suave);font-size:.85rem;font-style:italic}

/* Progreso: cinco segmentos abajo a la izquierda del marco */
.camino__progreso{
  position:absolute;left:clamp(1.4rem,4vw,4rem);bottom:clamp(1rem,2.4vw,1.8rem);z-index:4;
  display:flex;gap:.4rem;margin:0;padding:0;list-style:none;
}
.camino:not(.is-js) .camino__progreso,.camino:not(.is-js) .camino__lienzo{display:none}
.camino__seg{width:34px;height:4px;border-radius:4px;background:rgba(43,51,39,.14);overflow:hidden;position:relative}
.camino__seg::after{content:"";position:absolute;inset:0;background:var(--verde-marca);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease)}
.camino__seg.is-done::after{transform:scaleX(1)}
.camino__seg.is-actual::after{background:var(--amarillo)}

/* ---- Móvil / tablet: marco arriba, texto debajo, todo dentro del panel pegajoso ---- */
@media (max-width:860px){
  .camino__marco{aspect-ratio:4/3}
  .camino__veil{display:none}
  .camino.is-js{height:calc(260vh + 100svh)}
  .camino.is-js .camino__panel{--pt:calc(var(--cab,70px) + .5rem);--px:.6rem;--pb:.4rem}
  .camino.is-js .camino__marco{flex:0 0 auto;height:min(42svh,75vw);aspect-ratio:auto}
  .camino.is-js .camino__copy{position:relative;inset:auto;flex:1;min-height:0;margin-top:.6rem;overflow:hidden}
  .camino.is-js .camino__paso{left:.3rem;right:.3rem;top:0;width:auto;transform:translateY(18px)}
  .camino.is-js .camino__paso.is-on{transform:none}
  .camino__paso h1,.camino__paso h2{font-size:clamp(1.35rem,5.6vw,1.8rem);margin-bottom:.6rem}
  .camino__paso h1 .h1-kicker{font-size:.62rem;margin-bottom:.5rem}
  .camino__paso .breadcrumb{display:none}
  .camino__paso p{font-size:.93rem;margin-bottom:.7rem}
  .camino__proof{gap:.4rem}
  .camino__pasos{gap:.45rem}
  .camino__pasos li{padding:.5rem .6rem;gap:.55rem}
  .camino__pasos .ico{width:1.8rem;height:1.8rem;padding:.42rem}
  .camino__pasos b{font-size:.86rem}
  .camino__pasos span{font-size:.72rem}
  .camino__confianza{gap:.4rem;margin-bottom:.8rem}
  .camino__confianza li{font-size:.86rem}
  .camino__cta{padding:.8rem 1.3rem;font-size:.95rem}
  .camino__lema{display:none}
  .camino__progreso{left:auto;right:.9rem;bottom:auto;top:.9rem}
  .camino__seg{width:22px;height:3px;background:rgba(255,255,255,.6)}
}
@media (max-width:400px){
  .camino.is-js .camino__marco{height:min(38svh,75vw)}
  .camino__paso h1,.camino__paso h2{font-size:1.3rem}
}

/* Sin animaciones: nada de desplazamientos, solo aparecer/desaparecer */
@media (prefers-reduced-motion:reduce){
  .camino.is-js .camino__paso{transition:opacity .3s;transform:translateY(-50%)}
  .camino__pasos li{transition:none;transform:none}
  .camino__pista .ico{animation:none}
  @media (max-width:860px){.camino.is-js .camino__paso{transform:none}}
}

/* ===================== CLIENTES REALES (carrusel continuo) =====================
   Franja horizontal de fotos reales que se desliza sola de derecha a izquierda,
   en bucle infinito: la lista de fotos está duplicada una vez y la animación
   recorre exactamente la primera mitad, así el empalme no se nota. */
.creeles{padding:clamp(2.4rem,5vw,3.6rem) 0;background:var(--blanco);overflow:hidden}
.creeles__tag{
  text-align:center;font-family:var(--f-display);font-weight:500;
  font-size:var(--fs-heading-sm);color:var(--tinta);letter-spacing:var(--track-tight);
  margin-bottom:clamp(1.4rem,3vw,2rem);
}
.creeles__pista{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.creeles__tren{display:flex;gap:1rem;width:max-content;animation:creelesDesliza 38s linear infinite}
.creeles__tren img{
  height:280px;width:auto;flex:none;border-radius:var(--radius);object-fit:cover;
  box-shadow:var(--shadow-subtle);background:var(--niebla);
}
.creeles__pista:hover .creeles__tren{animation-play-state:paused}
@keyframes creelesDesliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:860px){
  .creeles__tren img{height:200px}
  .creeles__tren{animation-duration:26s}
}
@media (prefers-reduced-motion:reduce){
  .creeles__tren{animation:none}
  .creeles__pista{overflow-x:auto}
}