/* =========================================================================
   Asistente de captación en 4 pasos.
   En el prototipo todo esto vivía dentro de un <style> en vender.html.
   Aquí es un archivo: se cachea, y permite endurecer la CSP quitando
   'unsafe-inline' cuando se retiren los últimos bloques en línea.
   ========================================================================= */

.flowwrap{max-width:820px;margin:0 auto;padding:clamp(96px,13vh,140px) var(--pad) 90px}

/* ---------- cabecera: atrás + barra de progreso ---------- */
.flowtop{display:flex;align-items:center;gap:16px;margin-bottom:30px;min-height:42px}
.back-form{margin:0}
.back{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14px;
  color:var(--ink-2);background:none;cursor:pointer;
  border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;
  transition:border-color .25s var(--ez),color .25s var(--ez)}
.back:hover{border-color:var(--amber);color:var(--amber)}
.back svg{width:16px;height:16px}

.bar{flex:1;display:flex;gap:6px}
.bar i{flex:1;height:4px;border-radius:999px;background:rgba(143,163,204,.28);
  transition:background .45s var(--ez)}
.bar i.on{background:var(--amber)}

/* ---------- paso ---------- */
.stepno{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--amber);margin:0 0 10px}
.step h1{font-size:clamp(27px,4.6vw,42px);line-height:1.16;margin:0 0 12px}
.step .lead{margin:0 0 28px}
.step{animation:fade .5s var(--ez) both}

/* ---------- tarjetas de opción ---------- */
.opts{display:grid;gap:12px}
.opt{position:relative;display:block;cursor:pointer;
  background:rgba(27,42,71,.8);border:2px solid var(--line);border-radius:var(--r);
  padding:18px 20px 18px 54px;
  transition:border-color .25s var(--ez),transform .3s var(--ez),background .25s var(--ez)}
.opt:hover{border-color:var(--amber);transform:translateY(-2px)}
.opt input{position:absolute;opacity:0;width:0;height:0}
/* el círculo del radio, dibujado a mano para poder teñirlo de ámbar */
.opt::before{content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;border:2px solid var(--line);
  transition:border-color .25s var(--ez),background .25s var(--ez)}
.opt:has(input:checked){border-color:var(--amber);background:rgba(217,164,65,.12)}
.opt:has(input:checked)::before{border-color:var(--amber);background:var(--amber)}
.opt:has(input:checked)::after{content:"";position:absolute;left:26px;top:50%;
  width:8px;height:5px;border-left:2px solid var(--navy-8);border-bottom:2px solid var(--navy-8);
  transform:translateY(-70%) rotate(-45deg)}
/* foco de teclado visible: sin esto el asistente no se puede recorrer con Tab */
.opt:has(input:focus-visible){outline:2px solid var(--amber);outline-offset:3px}
.opt-t{display:block;font-size:17px;font-weight:700;color:var(--ink)}
.opt-d{display:block;font-size:14px;color:var(--ink-2);margin-top:3px}

/* ---------- resumen antes de enviar ---------- */
.resumen{background:rgba(27,42,71,.8);border:1px solid var(--line-static);
  border-radius:var(--r);padding:20px 22px;margin-bottom:26px}
.resumen h2{font-family:var(--serif);font-size:19px;margin:0 0 14px}
.resumen dl{margin:0;display:grid;gap:9px}
.resumen dl>div{display:flex;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--line-static);padding-bottom:8px}
.resumen dl>div:last-child{border-bottom:0;padding-bottom:0}
.resumen dt{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.resumen dd{margin:0;font-size:14.5px;color:var(--ink);text-align:right}

/* ---------- pantalla final ---------- */
.done{text-align:center;padding:26px 0}
.done h1{font-size:clamp(30px,5vw,46px);margin:22px 0 12px}
.done .lead{max-width:46ch;margin:0 auto 30px}
.done .acciones{justify-content:center}
.tick{width:74px;height:74px;margin:0 auto;border-radius:50%;
  display:grid;place-items:center;color:var(--navy-8);background:var(--amber);
  box-shadow:0 0 0 10px rgba(217,164,65,.16)}
.tick svg{width:36px;height:36px}

/* El atributo hidden debe ganar a display:inline-flex; si no, el botón
   "Atrás" sigue viéndose en el paso 1. */
.back[hidden]{display:none}