/* Recorrido de compra y asistente de personalización */
:root { --crear-primario: #7952b3; --crear-suave: #f4effb; }

/* Avance 1-2-3-4 */
.crear-avance { display: flex; justify-content: center; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1.8rem; flex-wrap: wrap; font-size: .85rem; color: #999; }
.crear-avance li { display: flex; align-items: center; gap: .35rem; }
.crear-avance li + li::before { content: ""; width: 18px; height: 2px; background: #ddd; margin-right: .2rem; }
.crear-avance span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eee; font-weight: 600; font-size: .75rem; }
.crear-avance .actual { color: var(--crear-primario); font-weight: 600; }
.crear-avance .actual span, .crear-avance .hecho span { background: var(--crear-primario); color: #fff; }

/* Eventos */
.crear-evento {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; height: 100%;
    padding: 1.4rem .8rem; border-radius: 1rem; background: #fff; text-align: center; color: inherit; text-decoration: none;
    box-shadow: 0 2px 12px rgba(40, 20, 80, .08); transition: transform .15s, box-shadow .15s;
}
.crear-evento:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(40, 20, 80, .14); }
.crear-evento .bi { font-size: 2.2rem; color: var(--crear-primario); }
.crear-evento img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .7rem; }
.crear-evento small { color: #888; }

/* Filtros de estilos */
.crear-filtros { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1.2rem; scrollbar-width: none; }
.crear-filtros button { flex: 0 0 auto; border: 1px solid #ddd; background: #fff; border-radius: 999px; padding: .4rem 1rem; font-size: .9rem; }
.crear-filtros button.activo { background: var(--crear-primario); border-color: var(--crear-primario); color: #fff; }

/* Tarjetas de diseño */
.crear-diseno { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 2px 12px rgba(40, 20, 80, .08); height: 100%; display: flex; flex-direction: column; }
.crear-diseno-img { position: relative; display: block; aspect-ratio: 9 / 14; background: linear-gradient(160deg, var(--c2), var(--c1)); overflow: hidden; }
.crear-diseno-img img { width: 100%; height: 100%; object-fit: cover; }
.crear-diseno-muestra { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; color: #fff; font-size: 1.8rem; line-height: 1.1; text-shadow: 0 2px 8px rgba(0, 0, 0, .25); border: 3px solid transparent; outline: 2px solid var(--c3); outline-offset: -14px; }
.crear-diseno-ver { position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%); background: rgba(255, 255, 255, .9); color: #333; border-radius: 999px; padding: .25rem .8rem; font-size: .8rem; white-space: nowrap; }
.crear-diseno-pie { padding: .8rem; display: flex; flex-direction: column; }
.crear-diseno-pie small { color: #888; }

/* Planes y pago */
.crear-opcion { display: block; position: relative; cursor: pointer; }
.crear-opcion input { position: absolute; opacity: 0; }
.crear-opcion .caja { border: 2px solid #e5e5e5; border-radius: 1rem; padding: 1rem; background: #fff; height: 100%; transition: border-color .15s; }
.crear-opcion input:checked + .caja { border-color: var(--crear-primario); box-shadow: 0 0 0 4px var(--crear-suave); }
.crear-opcion input:disabled + .caja { opacity: .5; cursor: not-allowed; }
.crear-opcion .precio { font-size: 1.5rem; font-weight: 700; }
.crear-caja { background: #fff; border-radius: 1rem; padding: 1.2rem; box-shadow: 0 2px 12px rgba(40, 20, 80, .08); }
.crear-datos-banco dt { font-weight: 400; color: #888; font-size: .8rem; text-transform: uppercase; }
.crear-datos-banco dd { font-weight: 600; font-size: 1.05rem; word-break: break-all; }

/* ===== Asistente ===== */
body.asistente { background: #f6f4fa; min-height: 100vh; padding-bottom: 5rem; }
body.sin-scroll { overflow: hidden; }
.asistente-barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .06); }
.asistente-volver { font-size: 1.3rem; color: #333; }
.asistente-titulo { flex: 1; min-width: 0; line-height: 1.2; }
.asistente-titulo small { display: block; color: #888; font-size: .75rem; }
.asistente-pasos { position: sticky; top: 52px; z-index: 19; display: flex; gap: .3rem; overflow-x: auto; padding: .5rem .7rem; background: #fff; border-top: 1px solid #f0f0f0; scrollbar-width: none; }
.asistente-pasos button { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 70px; border: 0; background: none; color: #999; font-size: .75rem; padding: .3rem .4rem; border-radius: .7rem; }
.asistente-pasos button .bi { font-size: 1.25rem; }
.asistente-pasos button.activo { color: var(--crear-primario); background: var(--crear-suave); font-weight: 600; }

.asistente-cuerpo { max-width: 1200px; margin: 0 auto; padding: 1rem; display: grid; gap: 1.5rem; }
.asistente-form { background: #fff; border-radius: 1rem; padding: 1.2rem; box-shadow: 0 2px 12px rgba(40, 20, 80, .06); }
.asistente-paso { display: none; }
.asistente-paso.activo { display: block; animation: aparecer .25s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.asistente .form-control, .asistente .form-select { font-size: 16px; padding: .65rem .8rem; border-radius: .7rem; } /* 16px evita el zoom en iPhone */
.asistente .form-control-color { width: 100%; height: 48px; padding: .3rem; }
.asistente .miniatura { width: 84px; height: 84px; object-fit: cover; border-radius: .6rem; }
.asistente .img-campo { position: relative; display: inline-block; }
.asistente .img-campo .quitar { position: absolute; top: -8px; right: -8px; }
.asistente-secciones .bi { color: var(--crear-primario); }

.asistente-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; gap: .5rem; justify-content: space-between;
    padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}
.asistente-nav .btn { flex: 1; border-radius: .8rem; padding: .7rem .5rem; }

/* Vista previa */
.asistente-previa { display: none; }
.asistente-previa.abierta { display: flex; position: fixed; inset: 0; z-index: 40; background: #222; flex-direction: column; }
.asistente-previa.abierta .telefono { flex: 1; border: 0; border-radius: 0; width: 100%; height: auto; box-shadow: none; }
.asistente-previa-cerrar { border: 0; background: var(--crear-primario); color: #fff; padding: .8rem; font-weight: 600; }
.telefono { width: 360px; height: 720px; border: 12px solid #1d1d1f; border-radius: 42px; overflow: hidden; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .2); }
.telefono iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (min-width: 992px) {
    body.asistente { padding-bottom: 0; }
    .asistente-pasos { justify-content: center; }
    .asistente-cuerpo { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
    .asistente-nav { position: static; box-shadow: none; padding: 1.2rem 0 0; background: none; }
    .asistente-nav .btn { flex: 0 0 auto; padding: .6rem 1.4rem; }
    .asistente-previa { display: block; position: sticky; top: 130px; }
}