/* Propuesta express con Xamira: un paso por pantalla, una acción principal. Hereda tokens de sitio.css. */
.ex{min-height:calc(100vh - 70px);padding:0 18px 48px;max-width:720px;margin:0 auto}
.ex-top{display:flex;align-items:center;gap:14px;padding:10px 0 22px}
.ex-salir{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--panel);text-decoration:none;font-size:18px;flex:0 0 auto}
.ex-prog{flex:1;height:3px;background:var(--panel2);border-radius:2px;overflow:hidden}.ex-prog i{display:block;height:100%;width:8%;background:var(--rojo);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.ex-paso-n,.ex-folio{font-size:12px;color:var(--mute);font-weight:600;letter-spacing:.08em}
.ex-paso{display:none;animation:ex-in .5s cubic-bezier(.2,.7,.2,1)}.ex-paso.en{display:block}
@keyframes ex-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ex h1.d{font-size:clamp(52px,12vw,88px)}.ex h2.d{font-size:clamp(40px,9vw,60px);margin-bottom:14px}
.ex-incluye{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px;color:var(--tinta2);font-size:15px}.ex-incluye li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rojo);margin-right:10px;vertical-align:middle}
.ex-precio{margin:22px 0 10px;display:flex;align-items:baseline;gap:10px}.ex-precio b{font-family:var(--f-d);font-weight:800;font-size:44px;color:var(--rojo)}.ex-precio small{color:var(--mute)}
.ex-sig{width:100%;margin-top:20px}.ex-sig[disabled]{opacity:.45;cursor:not-allowed}
.ex-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.ex-op{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border:1px solid var(--linea);border-radius:20px;background:var(--panel);color:var(--tinta);font:600 15px var(--f-b);text-align:left;cursor:pointer;transition:transform .25s,border-color .25s}.ex-op svg{width:28px;height:28px;color:var(--rojo)}.ex-op:hover{transform:translateY(-2px)}.ex-op.on{border-color:var(--rojo);box-shadow:0 0 0 2px var(--rojo)}
.ex-card{position:relative;display:flex;flex-direction:column;padding:0;border:1px solid var(--linea);border-radius:20px;background:var(--panel);color:var(--tinta);overflow:hidden;cursor:pointer;text-align:left;transition:transform .25s,border-color .25s}.ex-card img,.ex-card .ex-ph{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--panel2)}.ex-card .ex-ph.d{display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--mute)}.ex-card-t{display:grid;gap:2px;padding:10px 12px 12px}.ex-card-t b{font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:18px}.ex-card-t small{font-size:12px;color:var(--mute);line-height:1.35}.ex-card.on{border-color:var(--rojo);box-shadow:0 0 0 2px var(--rojo)}.ex-card.on::after{content:"✓";position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:var(--rojo);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.ex-card[hidden]{display:none}
.ex-combos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.ex-combo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:14px 12px 12px;border:1px solid var(--linea);border-radius:16px;background:var(--panel);color:var(--tinta);font:500 13px var(--f-b);cursor:pointer;text-align:left}.ex-combo i{width:24px;height:24px;border-radius:50%;border:2px solid #000;flex:0 0 auto}.ex-combo span{flex-basis:100%;margin-top:6px;font-size:12px;color:var(--mute);text-transform:capitalize;line-height:1.2}.ex-combo.on{border-color:var(--rojo);box-shadow:0 0 0 2px var(--rojo)}
.ex-det{margin-top:14px;background:var(--panel);border-radius:18px;padding:0 16px}.ex-det summary{cursor:pointer;padding:14px 0;font-weight:600}.ex-det>div{padding-bottom:14px}
.ex-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.ex-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--linea);background:var(--panel2);color:var(--tinta);font:500 13px var(--f-b);cursor:pointer;text-transform:capitalize}.ex-chip i{width:14px;height:14px;border-radius:50%;border:1px solid #000}.ex-chip.base{border-color:#fff}.ex-chip.acento{border-color:var(--rojo)}
.ex-tipos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.ex-tipo{display:grid;gap:4px;padding:14px;border:1px solid var(--linea);border-radius:18px;background:var(--panel);color:var(--tinta);text-align:left;cursor:pointer}.ex-tipo b{font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:22px}.ex-tipo small{font-size:12px;color:var(--mute);line-height:1.35}.ex-tipo.on{border-color:var(--rojo);box-shadow:0 0 0 2px var(--rojo)}
.ex-subir{display:grid;gap:4px;justify-items:center;text-align:center;padding:26px 16px;border:2px dashed var(--linea);border-radius:22px;background:var(--panel);cursor:pointer;margin-top:14px}.ex-subir input{display:none}.ex-subir .d{font-size:26px}.ex-subir small{color:var(--mute)}
.ex-logos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.ex-logos img{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:14px;padding:6px}
.ex-forma{margin-top:14px;text-align:left}.ex-forma input,.ex-forma select,.ex-forma textarea{background:var(--panel);color:var(--tinta)}
.ex-resumen{margin-top:16px;padding:14px 16px;border-radius:18px;background:var(--panel);font-size:14px;color:var(--tinta2);display:grid;gap:4px}.ex-resumen b{color:#fff}
.forma-msg a{color:#fff}
/* Resultado */
.ex-estado{text-align:center;padding:24px 0 10px}.ex-res h1.d{font-size:clamp(40px,9vw,64px)}
.ex-nave{position:relative;width:120px;height:120px;margin:0 auto 10px;border-radius:50%;background:radial-gradient(circle,rgba(228,0,43,.35),transparent 70%)}.ex-haz{position:absolute;left:50%;top:0;width:3px;height:100%;background:linear-gradient(180deg,var(--rojo),transparent);transform:translateX(-50%);animation:ex-haz 1.6s ease-in-out infinite}
@keyframes ex-haz{0%,100%{opacity:.3}50%{opacity:1}}
.ex-barra{height:4px;border-radius:2px;background:var(--panel2);margin:18px auto 0;max-width:360px;overflow:hidden}.ex-barra i{display:block;height:100%;width:0;background:var(--rojo);transition:width .8s cubic-bezier(.2,.7,.2,1)}
.ex-acciones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.ex-piezas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.ex-piezas figure{margin:0}.ex-piezas figure[data-pieza="portada"]{grid-column:1/-1}
.ex-img{position:relative;border-radius:22px;overflow:hidden;background:var(--panel);aspect-ratio:1/1}.ex-img-v{aspect-ratio:4/5;max-width:420px;margin:0 auto}.ex-img img{width:100%;height:100%;object-fit:cover;display:block;animation:ex-in .8s}.ex-img .ex-ph{position:absolute;inset:0;background:linear-gradient(110deg,var(--panel) 30%,var(--panel2) 50%,var(--panel) 70%);background-size:200% 100%;animation:ex-brillo 1.6s linear infinite}.ex-img img:not([hidden])+.ex-ph{display:none}
@keyframes ex-brillo{to{background-position:-200% 0}}
.ex-piezas figcaption{display:flex;justify-content:space-between;padding:8px 6px 0;font-size:13px}.ex-piezas figcaption b{font-family:var(--f-d);font-weight:800;text-transform:uppercase;font-size:18px}.ex-piezas figcaption span{color:var(--mute)}.ex-piezas figcaption span.ok{color:#8ee6a2}
.ex-fin{margin-top:26px;display:grid;gap:14px}.ex-fab{padding:20px;border-radius:26px;background:var(--rojo);color:#fff}.ex-fab .ex-forma input{background:#fff;color:#070708}.ex-fab h2.d{font-size:clamp(36px,8vw,52px)}
@media (min-width:760px){.ex{padding-top:10px}.ex-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ex-combos{grid-template-columns:repeat(3,minmax(0,1fr))}.ex-sig{width:auto;min-width:240px}.ex-piezas{grid-template-columns:1fr 1fr 1fr}.ex-piezas figure[data-pieza="portada"]{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.ex-paso,.ex-haz,.ex-img .ex-ph,.ex-img img{animation:none!important}}
/* Las formas del sitio se revelan al entrar en pantalla; aquí cada paso ya entra animado, así que los campos se ven de inmediato. */
.ex .forma label{opacity:1;transform:none;transition:none}

/* Sesión y PIN: quien paga se queda con sesión y tienda; el PIN se marca en seis casillas con teclado propio. */
.ex-sesion{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 14px;padding:10px 14px;border-radius:999px;background:var(--panel);font-size:13px}.ex-sesion-nombre{color:var(--tinta2)}.ex-sesion-nombre b{color:#fff}.ex-sesion-liga{color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}
.ex-pin{margin-top:22px;padding:22px 18px 18px;border-radius:26px;background:var(--panel);text-align:center}.ex-pin h2.d{font-size:clamp(40px,10vw,56px)}.ex-pin p{color:var(--tinta2);max-width:40ch;margin:10px auto 0}
.pin-caja{display:flex;justify-content:center;gap:10px;margin:22px 0 6px;cursor:text}.pin-caja i{width:40px;height:54px;border-radius:14px;border:2px solid var(--linea);background:var(--panel2);display:flex;align-items:center;justify-content:center;font:800 28px var(--f-d);color:#fff;position:relative;transition:border-color .2s,transform .2s}.pin-caja i.on{border-color:var(--rojo);box-shadow:0 0 0 3px rgba(228,0,43,.25)}.pin-caja i.lleno{border-color:#fff;transform:translateY(-2px)}.pin-caja i.lleno::after{content:"";width:12px;height:12px;border-radius:50%;background:#fff;animation:pin-pop .25s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pin-pop{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
.pin-oculto{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pin-teclado{display:grid;grid-template-columns:repeat(3,72px);gap:10px;justify-content:center;margin:14px 0 18px}.pin-teclado button{height:56px;border-radius:18px;border:1px solid var(--linea);background:var(--panel2);color:#fff;font:600 22px var(--f-b);cursor:pointer;transition:transform .1s,background .2s}.pin-teclado button:active{transform:scale(.94);background:var(--rojo)}
.ex-pin.ok .pin-caja i{border-color:#8ee6a2}.ex-pin.error .pin-caja{animation:pin-shake .4s}
@keyframes pin-shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.ex-tienda{margin-top:22px;padding:22px 20px;border-radius:26px;background:linear-gradient(160deg,#1c1c20,#0a0a0c);border:1px solid var(--linea)}.ex-tienda h2.d{font-size:clamp(40px,10vw,60px);margin-top:6px}.ex-tienda p{color:var(--tinta2)}.ex-tienda .btn{margin-top:16px}
@media (min-width:760px){.pin-teclado{grid-template-columns:repeat(3,84px)}}
.ex-sesion[hidden],.ex-pin[hidden],.ex-tienda[hidden],.ex-piezas[hidden],.ex-fin[hidden]{display:none}
.pin-nombre{margin:16px auto 0;max-width:360px}.pin-nombre input{text-align:center}