/* ============================================================
   TELL ME MORE — Flujo de creación y carnet
   ============================================================ */

.flow { padding: 48px 0 90px; min-height: 70vh; }

/* Barra de progreso por pasos */
.stepper { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 48px; flex-wrap: wrap; }
.stepper .node { display: flex; align-items: center; gap: 10px; }
.stepper .dot {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: .95rem; background: rgba(31,26,61,.08); color: var(--muted);
  transition: all .25s; flex: none;
}
.stepper .node.active .dot { background: var(--memo); color: var(--night); box-shadow: 0 0 0 5px var(--memo-soft); }
.stepper .node.done .dot { background: var(--lumi); color: #fff; }
.stepper .label { font-weight: 700; font-size: .9rem; color: var(--muted); }
.stepper .node.active .label { color: var(--night); }
.stepper .bar { width: 46px; height: 2px; background: rgba(31,26,61,.12); margin: 0 8px; }
@media (max-width: 720px){ .stepper .label{ display:none; } .stepper .bar{ width: 24px; } }

/* Tarjeta del panel de pasos */
.panel { max-width: 760px; margin: 0 auto; background: var(--cream); border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid rgba(31,26,61,.06); padding: 44px; }
.panel h2 { margin-bottom: 8px; }
.panel .sub { color: var(--muted); margin-bottom: 30px; }
.panel-step { display: none; }
.panel-step.active { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Selección de cuentos dentro del flujo */
.pick { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width:640px){ .pick{ grid-template-columns:1fr; } }
.pick-card { border-radius: var(--radius); overflow: hidden; cursor: pointer; border: 3px solid transparent; transition: border-color .2s, transform .2s; box-shadow: var(--shadow-sm); background:#fff; }
.pick-card:hover { transform: translateY(-4px); }
.pick-card.sel { border-color: var(--memo); }
.pick-cover { aspect-ratio: 4/3; display: grid; place-items: center; color:#fff; text-align:center; padding:14px; }
.pick-cover h4 { color:#fff; font-size:1.1rem; }
.pick-cover[data-c="lumi"]{ background:linear-gradient(155deg,#4a9fe8,#1f5fa8);} 
.pick-cover[data-c="memo"]{ background:linear-gradient(155deg,#f5b94f,#c9762a);} 
.pick-cover[data-c="valor"]{ background:linear-gradient(155deg,#ec6b6a,#b13b3a);} 
.pick-card .pick-foot { padding: 12px; text-align: center; font-weight: 700; font-size:.9rem; }

/* Campos de formulario */
.field { margin-bottom: 22px; }
.field label { display: block; font-weight: 800; font-size: .9rem; margin-bottom: 7px; color: var(--night); }
.field .hint { font-weight: 600; font-size: .82rem; color: var(--muted); margin-left: 6px; }
.field input[type=text], .field input[type=email], .field input[type=number], .field select {
  width: 100%; padding: 14px 16px; border-radius: 12px; border: 2px solid rgba(31,26,61,.14);
  font-size: 1rem; font-family: inherit; background:#fff; color: var(--ink); transition: border-color .15s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--memo); }
.field .count { float: right; font-size: .8rem; color: var(--muted); font-weight: 700; }

.seg { display: flex; gap: 10px; flex-wrap: wrap; }
.seg button { flex: 1; min-width: 90px; padding: 13px; border-radius: 12px; border: 2px solid rgba(31,26,61,.14); background:#fff; font-weight: 800; color: var(--muted); transition: all .15s; }
.seg button.sel { border-color: var(--memo); background: var(--memo-soft); color: var(--night); }

/* Zona de carga de foto */
.drop { border: 2px dashed rgba(31,26,61,.22); border-radius: var(--radius); padding: 34px; text-align: center; cursor: pointer; transition: all .18s; background: rgba(255,255,255,.5); }
.drop:hover { border-color: var(--memo); background: var(--memo-soft); }
.drop .ic { font-size: 2.4rem; margin-bottom: 8px; }
.drop p { color: var(--muted); font-size: .94rem; }
.drop strong { color: var(--night); }
.photo-preview { display:flex; align-items:center; gap:16px; margin-top:16px; padding:14px; background:#fff; border-radius:12px; box-shadow:var(--shadow-sm); }
.photo-preview img { width:70px; height:70px; border-radius:10px; object-fit:cover; }
.photo-preview .ok { color: var(--lumi); font-weight:800; font-size:.9rem; }
.tips { background: var(--lumi-soft); border-radius: 12px; padding: 14px 18px; margin-top: 18px; font-size: .9rem; color: var(--dusk); }
.tips strong { color: var(--night); }

/* Navegación entre pasos */
.flow-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 32px; }

/* Placeholder de motor pendiente */
.engine-note { background: repeating-linear-gradient(45deg, var(--memo-soft), var(--memo-soft) 12px, #fbe9c4 12px, #fbe9c4 24px); border-radius: 12px; padding: 14px 18px; font-size: .86rem; color: #8a5a14; font-weight: 700; margin-top: 16px; display:flex; gap:10px; align-items:center; }

/* Vista previa del cuento */
.preview-wrap { display: grid; grid-template-columns: 1fr; gap: 20px; }
.preview-pages { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width:640px){ .preview-pages{ grid-template-columns:repeat(2,1fr);} }
.pg { aspect-ratio: 1/1; border-radius: 12px; overflow:hidden; position: relative; box-shadow: var(--shadow-sm); background:#222; }
.pg .pg-art { position:absolute; inset:0; display:grid; place-items:center; color:#fff; text-align:center; padding:14px; font-size:.8rem; }
.pg .pg-num { position:absolute; top:8px; left:8px; background:rgba(0,0,0,.45); color:#fff; font-size:.7rem; font-weight:800; padding:3px 8px; border-radius:100px; z-index:3; }
.pg.locked .pg-art { filter: blur(7px); transform: scale(1.05); }
.pg .lock { position:absolute; inset:0; display:grid; place-items:center; background:rgba(31,26,61,.34); z-index:2; }
.pg .lock span { background:rgba(255,255,255,.92); border-radius:100px; padding:6px 12px; font-size:.78rem; font-weight:800; color:var(--night); }
.preview-cta { background: var(--sand); border-radius: var(--radius); padding: 26px; text-align:center; }
.preview-cta .price { font-family:var(--display); font-size:2.2rem; color:var(--night); }
.preview-cta .price small { font-size:.9rem; color:var(--muted); font-family:var(--body); font-weight:700; }

/* Confirmación */
.done-box { max-width: 600px; margin: 0 auto; text-align:center; background:var(--cream); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:50px 40px; }
.done-box .big { font-size: 3.4rem; margin-bottom: 12px; }
.done-box h2 { margin-bottom: 12px; }
.done-box p { color: var(--muted); margin-bottom: 8px; }

/* Carnet generador */
.carnet-layout { display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:start; }
@media (max-width:820px){ .carnet-layout{ grid-template-columns:1fr; } }
.carnet-stage { position: sticky; top: 100px; display:grid; place-items:center; padding: 30px; background:linear-gradient(135deg,var(--dusk),var(--night)); border-radius:var(--radius-lg); }
.big-id {
  width:100%; max-width: 380px; aspect-ratio:1.586/1; border-radius:18px;
  background:linear-gradient(150deg,#fff,#f7e9d2); color:var(--night); box-shadow:var(--shadow-lg);
  padding:24px; display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:center;
}
.big-id .bid-photo { width:96px; height:112px; border-radius:12px; background:linear-gradient(160deg,var(--lumi-soft),var(--twilight)); display:grid; place-items:center; font-size:2.6rem; overflow:hidden; }
.big-id .bid-photo img{ width:100%;height:100%;object-fit:cover; }
.big-id .bid-role { font-family:var(--display); font-size:1.4rem; color:var(--valor); line-height:1; }
.big-id .bid-name { font-weight:800; font-size:1.3rem; margin-top:2px; }
.big-id .bid-line { font-size:.72rem; color:var(--muted); margin-top:8px; }
.big-id .bid-chip { width:36px;height:26px;border-radius:6px;background:linear-gradient(135deg,var(--memo),var(--memo-glow));margin-top:10px; }