/* ===========================================================
   Re:Cycla — formulario de solicitud en dos pasos
   Paso 1: WhatsApp y nombre (se guarda aunque no termine).
   Paso 2: qué le interesa, cuántas, para qué y para cuándo.
   Paso 3: a quién le toca y el botón para escribirle.
   =========================================================== */

.solicitud{gap:18px}
.solicitud[hidden],.etapa[hidden]{display:none}
.etapa{display:grid;gap:18px;border:0;padding:0;margin:0;min-width:0}

/* barra de avance */
.avance{display:flex;align-items:center;gap:10px}
.avance .barra{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.avance .barra i{display:block;height:100%;width:50%;background:var(--naranja);border-radius:2px;
  transition:width .35s cubic-bezier(.16,1,.3,1)}
.avance .k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);white-space:nowrap}

.etapa-tit{font-family:'Excon','Satoshi',system-ui,sans-serif;font-size:21px;line-height:1.2;letter-spacing:-0.01em}
.etapa-tit span{display:block;margin-top:4px;font-family:'Satoshi',system-ui,sans-serif;font-size:14px;
  font-weight:400;letter-spacing:0;line-height:1.45;color:var(--texto)}

.grupo{display:grid;gap:10px;border:0;padding:0;margin:0;min-width:0}
.grupo legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:700}
.grupo legend em{font-style:normal;color:var(--naranja)}
.grupo legend small{font-weight:400;color:var(--gris);font-size:13px}
.grupo.mal .err{display:block}
.opcional{font-weight:400;color:var(--gris)}

/* catálogo: tarjetas que se marcan */
.catalogo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.prod{position:relative;display:block;cursor:pointer}
.prod input{position:absolute;opacity:0;width:1px;height:1px}
.prod .caja{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;padding:8px 4px 10px;
  border-radius:12px;background:var(--fondo);border:1.5px solid #3A3A40;
  transition:border-color .16s,background-color .16s,transform .16s cubic-bezier(.16,1,.3,1)}
.prod img{width:100%;max-width:92px;height:auto;aspect-ratio:520/646;object-fit:contain}
.prod b{font-size:13px;line-height:1.25;text-align:center}
.prod .marca{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
  border:1.5px solid #55555C;background:var(--fondo);display:flex;align-items:center;justify-content:center;
  transition:background-color .16s,border-color .16s}
.prod .marca svg{width:12px;height:12px;opacity:0;stroke:var(--fondo)}
.prod input:checked + .caja{border-color:var(--naranja);background:rgba(248,72,8,.09)}
.prod input:checked + .caja .marca{background:var(--naranja);border-color:var(--naranja)}
.prod input:checked + .caja .marca svg{opacity:1}
.prod input:focus-visible + .caja{outline:2px solid var(--blanco);outline-offset:2px}
.prod:active .caja{transform:scale(.97)}
.grupo.mal .prod .caja{border-color:#FF5A4A}

/* opciones en pastilla (una sola) */
.pastillas{display:flex;flex-wrap:wrap;gap:8px}
.pastilla{position:relative;cursor:pointer}
.pastilla input{position:absolute;opacity:0;width:1px;height:1px}
.pastilla span{display:flex;align-items:center;min-height:44px;padding:0 15px;border-radius:999px;
  font-size:14.5px;font-weight:700;color:var(--texto);background:var(--fondo);border:1.5px solid #3A3A40;
  transition:border-color .16s,background-color .16s,color .16s}
.pastilla input:checked + span{border-color:var(--naranja);background:var(--naranja);color:var(--fondo)}
.pastilla input:focus-visible + span{outline:2px solid var(--blanco);outline-offset:2px}
.grupo.mal .pastilla span{border-color:#FF5A4A}

.dos{display:grid;gap:16px}
.campo input[type=date]{min-height:48px;color-scheme:dark}

.botones{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.btn-atras{min-height:52px;padding:0 18px;border-radius:999px;font:inherit;font-size:15px;font-weight:700;
  color:var(--blanco);background:transparent;border:1.5px solid #3A3A40;cursor:pointer}
.btn-atras:hover{border-color:#6A6A70}

/* paso 3: a quién le toca */
.listo{gap:14px}
.listo .quien{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;
  background:var(--fondo);border-left:4px solid var(--naranja)}
.listo .ini{width:48px;height:48px;flex:none;border-radius:50%;background:var(--naranja);color:var(--fondo);
  display:flex;align-items:center;justify-content:center;font-family:'Excon','Satoshi',system-ui,sans-serif;font-size:20px;font-weight:700}
.listo .quien b{display:block;font-size:17px}
.listo .quien div span{display:block;font-size:14px;line-height:1.4;color:var(--texto)}
.btn-verde{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 20px;
  font-family:inherit;font-size:16.5px;font-weight:700;color:#fff;background:#25D366;border-radius:999px;
  text-decoration:none;transition:transform .18s cubic-bezier(.16,1,.3,1)}
.btn-verde svg{width:20px;height:20px;flex:none}
.btn-verde:hover{transform:translateY(-1px)}
.resumen{font-size:13.5px;line-height:1.5;color:var(--gris)}
.resumen b{color:var(--texto);font-weight:700}

/* aviso de la página de prueba */
.prueba-aviso{position:sticky;top:var(--nav);z-index:30;padding:9px var(--g);text-align:center;
  font-size:13px;font-weight:700;line-height:1.35;color:var(--fondo);background:#FFD23F}
.prueba-dato{font-size:13px;line-height:1.45;padding:10px 12px;border-radius:10px;
  background:rgba(255,210,63,.1);border:1px dashed #FFD23F;color:#FFE699}

@media (min-width:600px){
  .dos{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .solicitud{width:100%;max-width:560px;justify-self:end}
  .catalogo{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .avance .barra i{transition:none}
}
.solicitud{scroll-margin-top:calc(var(--nav) + 70px)}

/* fecha en texto libre y "usar mi ubicación actual" (9 oct) */
.btn-ubic{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;margin-top:2px;
  border-radius:999px;border:1.5px solid #3A3A40;background:transparent;color:var(--blanco);
  font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;justify-self:start}
.btn-ubic svg{width:18px;height:18px;flex:none;color:var(--naranja)}
.btn-ubic:hover{border-color:#6A6A70}
.btn-ubic[disabled]{opacity:.6;cursor:progress}
.btn-ubic.lista{border-color:var(--naranja)}
.entendimos b{color:var(--blanco)}