/* ===== /contacto/ · efecto propio «La cinta métrica»: con el scroll se despliega una cinta de medir y va marcando los
   tres pasos de la cotización ===== */
.cm-track{position:relative;margin-top:clamp(1.6rem,3vw,2.4rem)}
.motion .cm-track{height:260vh}
.motion .cm-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 28px}
.cinta{position:relative;height:96px}
.cinta-caja{position:absolute;left:0;top:50%;z-index:3;width:96px;height:96px;margin-top:-48px;border-radius:22px;background:linear-gradient(150deg,#ff9a4d,#f84a05 60%,#c23a04);box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 18px 30px -12px rgba(248,74,5,.6)}
.cinta-caja::before{content:"";position:absolute;inset:22px;border-radius:50%;background:radial-gradient(circle,#2a2d32 0 30%,#15171a 31% 100%);box-shadow:inset 0 0 0 3px rgba(0,0,0,.35)}
.cinta-caja::after{content:"";position:absolute;right:-6px;top:50%;width:10px;height:44px;margin-top:-22px;border-radius:3px;background:#1d1f23}
.cinta-hoja{position:absolute;left:84px;top:50%;height:46px;margin-top:-23px;width:calc((100% - 84px) * var(--e,0));overflow:hidden;border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(90deg,rgba(20,20,20,.9) 0 2px,transparent 2px calc(var(--cm,6px) * 10)) 0 0/100% 62% no-repeat,
    repeating-linear-gradient(90deg,rgba(20,20,20,.55) 0 1px,transparent 1px var(--cm,6px)) 0 0/100% 30% no-repeat,
    repeating-linear-gradient(90deg,rgba(20,20,20,.75) 0 1px,transparent 1px calc(var(--cm,6px) * 5)) 0 0/100% 45% no-repeat,
    linear-gradient(180deg,#ffd84a,#f2b705);box-shadow:0 10px 20px -10px rgba(0,0,0,.7)}
.cinta-hoja span{position:absolute;bottom:4px;font:700 .72rem/1 var(--f-ui);color:#1a1a1a;transform:translateX(4px)}
.cinta-punta{position:absolute;top:50%;z-index:2;width:10px;height:58px;margin-top:-29px;border-radius:2px;background:linear-gradient(90deg,#9aa1a8,#5c636a);left:calc(84px + (100% - 84px) * var(--e,0) - 4px)}
.cinta-lec{position:absolute;right:0;top:-6px;font:600 .7rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.cinta-lec b{font:800 1.5rem/1 var(--f-display);letter-spacing:0;color:var(--texto)}
.cm-pasos{position:relative;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:2.2rem}
.cm-pasos li{position:relative;padding:1.3rem 1.25rem 1.2rem;border-radius:16px;background:var(--grafito);border:1px solid var(--linea);transform:translateY(10px);transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
/* apagado: se lee igual (contraste AA), solo cambian el borde, la marca y el color del número */
.cm-pasos li:not(.on) .n{color:var(--texto-3)}
.cm-pasos li:not(.on) b{color:var(--texto-2)}
.cm-pasos li:not(.on) span{color:var(--texto-3)}
.cm-pasos li::before{content:"";position:absolute;left:1.25rem;top:-2.2rem;width:2px;height:2.2rem;background:var(--linea-2);transition:background .5s}
.cm-pasos li.on{transform:none;border-color:rgba(245,134,52,.55);box-shadow:0 30px 60px -36px rgba(248,74,5,.45)}
.cm-pasos li.on::before{background:var(--naranja)}
.cm-pasos .n{font:600 .74rem/1 var(--f-ui);letter-spacing:.16em;color:var(--naranja)}
.cm-pasos b{display:block;margin-top:.6rem;font:900 1.35rem/1.02 var(--f-display);text-transform:uppercase}
.cm-pasos span{display:block;margin-top:.45rem;color:var(--texto-2);font-size:.95rem}
html:not(.motion) .cm-pasos li{transform:none}

/* --- tienda, canales y zonas --- */
.tienda{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:stretch;margin-top:clamp(2rem,4vw,3rem)}
.tienda .map{min-height:420px}
.tienda dl{display:grid;gap:.9rem}
.tienda dl div{padding:1rem 1.1rem;border-radius:14px;background:var(--grafito);border:1px solid var(--linea)}
.tienda dt{font:600 .68rem/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.tienda dd{margin-top:.4rem;color:var(--texto);font-size:1rem}
.canales{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(1.8rem,3vw,2.4rem)}
.canales a{display:flex;flex-direction:column;gap:.45rem;height:100%;padding:1.3rem 1.2rem;border-radius:16px;background:var(--grafito);border:1px solid var(--linea);transition:border-color .3s,transform .4s var(--ease)}
.canales a:hover{border-color:rgba(0,175,239,.55);transform:translateY(-3px)}
.canales svg{width:26px;height:26px;color:var(--naranja)}
.canales b{font:800 1.25rem/1.05 var(--f-display);text-transform:uppercase;color:var(--texto)}
.canales span{color:var(--texto-2);font-size:.92rem}
.canales small{margin-top:auto;font:600 .7rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--cielo)}
.zonas-l{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.zonas-l li{padding:.7rem 1rem;border-radius:999px;background:var(--grafito);border:1px solid var(--linea-2);font:700 1rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.zonas-l li.fuera{border-style:dashed;color:var(--texto-2)}

@media (max-width:1100px){.canales{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .motion .cm-track{height:280vh}
  /* escena compacta: arriba el encabezado (72 px) y abajo los botones flotantes (30 px + 65 px) */
  .motion .cm-stage{padding:82px 0 104px}
  .cm-pasos{grid-template-columns:1fr;gap:8px;margin-top:1.2rem}
  .cm-pasos li::before{display:none}
  .cm-pasos li{padding:.8rem 1rem}
  .cm-pasos span:not(.n){margin-top:.3rem;font-size:.88rem;line-height:1.45}
  .cm-pasos b{font-size:1.15rem}
  .cinta{height:72px;margin-top:1.6rem}
  .cinta-lec{top:-30px}
  .cinta-caja{width:72px;height:72px;margin-top:-36px;border-radius:18px}
  .cinta-caja::before{inset:16px}
  .cinta-hoja{left:64px;height:38px;margin-top:-19px;width:calc((100% - 64px) * var(--e,0))}
  .cinta-punta{left:calc(64px + (100% - 64px) * var(--e,0) - 4px);height:48px;margin-top:-24px}
  .tienda{grid-template-columns:1fr}
}
@media (max-width:640px){.canales{grid-template-columns:1fr}}
/* celulares bajos (iPhone SE y similares): solo el título de cada paso, para que el botón quepa en pantalla */
@media (max-width:900px) and (max-height:760px){.motion .cm-pasos span:not(.n){display:none}}