/* 100XSD — cara pública del cliente. Identidad CrediSan: morado #662D91, amarillo #FFF200. Mobile-first. */
:root {
  --morado: #662D91; --morado-oscuro: #4B1F6E; --morado-claro: #F2F2F2; --amarillo: #FFF200; --amarillo-oscuro: #E6DA00;
  --negro: #1B1B1B; --gris: #6B6B6B; --gris-linea: #E3E3E3; --gris-fondo: #F4F4F4; --blanco: #FFFFFF; --verde: #662D91; --rojo: #C62828;   /* identidad: solo blanco, morado y amarillo */
  --fuente: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --radio: 14px; --sombra: 0 6px 20px rgba(102, 45, 145, .12);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; background: var(--gris-fondo); color: var(--negro); font-family: var(--fuente); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; font-size: 1rem; }
.oculto { display: none !important; }
h1, h2, h3 { margin: 0 0 .4rem; font-weight: 600; line-height: 1.2; }
h2 { font-size: 1.25rem; color: var(--morado); }
p { margin: 0 0 .8rem; line-height: 1.5; }

/* ---- pantallas a pantalla completa (entrada / mensaje) ---- */
.pantalla { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.pantalla.morada { background: linear-gradient(160deg, var(--morado) 0%, var(--morado-oscuro) 100%); color: var(--blanco); }
.caja { width: 100%; max-width: 420px; text-align: center; }
.logo { height: 44px; margin-bottom: 20px; }
.eyebrow { color: var(--amarillo); text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; font-weight: 600; margin-bottom: 4px; }
.caja h1 { font-size: 3rem; letter-spacing: .06em; color: var(--amarillo); }
.lema { font-size: 1.05rem; opacity: .95; margin-bottom: 28px; }
.caja form { text-align: left; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radio); padding: 18px; }
.caja label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.caja input { width: 100%; padding: 14px; border-radius: 10px; border: 2px solid transparent; font-size: 1.3rem; letter-spacing: .08em; text-align: center; margin-bottom: 12px; }
.caja input:focus { outline: none; border-color: var(--amarillo); }
.aviso { font-size: .82rem; opacity: .9; margin: 12px 0 0; }
.tarjeta-mensaje { background: var(--blanco); color: var(--negro); border-radius: var(--radio); padding: 22px; font-size: 1.05rem; line-height: 1.55; margin-bottom: 16px; text-align: left; }

/* ---- botones ---- */
.btn { display: block; width: 100%; padding: 14px 18px; border: 0; border-radius: 12px; font-size: 1.02rem; font-weight: 600; transition: transform .06s, opacity .2s; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.amarillo { background: var(--amarillo); color: var(--morado-oscuro); }
.btn.amarillo:hover:not(:disabled) { background: var(--amarillo-oscuro); }
.btn.morado { background: var(--morado); color: var(--blanco); }
.btn.borde { background: transparent; color: var(--blanco); border: 2px solid rgba(255,255,255,.6); }
.btn.secundario { background: var(--blanco); color: var(--morado); border: 2px solid var(--morado); }
.error { color: var(--amarillo); font-size: .9rem; min-height: 1.2em; margin: 8px 0 0; }
#app .error { color: var(--negro); font-weight: 600; }
.volver { background: none; border: 0; color: var(--morado); font-weight: 600; padding: 4px 0; margin-bottom: 10px; font-size: .95rem; }

/* ---- cabecera con reloj ---- */
.cabecera { position: sticky; top: 0; z-index: 10; background: var(--morado); color: var(--blanco); display: flex; align-items: center; gap: 12px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.cabecera-logo { height: 26px; }
.cabecera-centro { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.cabecera-centro strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecera-centro span { font-size: .75rem; opacity: .85; }
.reloj { background: var(--amarillo); color: var(--morado-oscuro); border-radius: 12px; padding: 6px 12px; text-align: center; line-height: 1.05; min-width: 122px; box-shadow: 0 0 0 3px rgba(255,242,0,.25); animation: latido 2s ease-in-out infinite; }
.reloj span { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.35rem; letter-spacing: .02em; }
.reloj small { display: block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.reloj.urgente { background: var(--negro); color: var(--amarillo); animation-duration: 1s; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,242,0,.25); } 50% { box-shadow: 0 0 0 6px rgba(255,242,0,.45); } }
.cabecera-logo { height: 22px; }

main { max-width: 720px; margin: 0 auto; padding: 16px 16px 120px; }
.vista { animation: aparecer .25s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.intro p { color: var(--gris); font-size: .95rem; }

/* ---- catálogo ---- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.articulo { position: relative; background: var(--blanco); border: 2px solid var(--gris-linea); border-radius: var(--radio); padding: 10px; text-align: left; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, box-shadow .15s; }
.articulo.elegido { border-color: var(--morado); box-shadow: var(--sombra); }
.articulo.bloqueado { opacity: .45; }
.articulo .foto { width: 100%; aspect-ratio: 1; border-radius: 10px; background: var(--morado-claro); display: grid; place-items: center; font-size: 2.6rem; overflow: hidden; }
.articulo .foto img { width: 100%; height: 100%; object-fit: cover; }
.articulo .nombre { font-weight: 600; font-size: .92rem; line-height: 1.25; }
.articulo .categoria { color: var(--gris); font-size: .78rem; }
.etiqueta { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; background: var(--morado-claro); color: var(--morado); align-self: flex-start; }
.etiqueta.sin { background: var(--amarillo); color: var(--morado-oscuro); }
.articulo .marca { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--morado); color: var(--amarillo); display: none; place-items: center; font-weight: 700; }
.articulo.elegido .marca { display: grid; }
.barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; background: var(--blanco); padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
.barra-inferior > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.progreso { height: 6px; background: var(--gris-linea); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.progreso div { height: 100%; width: 0; background: var(--morado); transition: width .2s; }

/* ---- vitrina (catálogo de una ficha por pantalla) ---- */
.bandeja { position: sticky; top: 60px; z-index: 5; background: var(--blanco); border-radius: var(--radio); padding: 10px 12px; box-shadow: var(--sombra); margin-bottom: 10px; }
.bandeja-titulo { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: 8px; }
.bandeja-titulo strong { color: var(--morado); }
.bandeja-titulo span { color: var(--gris); font-weight: 600; }
.bandeja-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.slot { aspect-ratio: 1; border-radius: 12px; border: 2px dashed var(--gris-linea); background: var(--gris-fondo); display: grid; place-items: center; font-size: 1.5rem; position: relative; overflow: hidden; padding: 0; }
.slot.lleno { border: 2px solid var(--morado); background: var(--morado); }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot-n { color: var(--gris); font-weight: 700; font-size: .9rem; }
.slot-x { position: absolute; top: 2px; right: 4px; font-size: .8rem; color: var(--morado); font-weight: 700; }
.vitrina-ayuda { color: var(--gris); font-size: .85rem; margin: 6px 2px 10px; }
.vitrina { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.vitrina::-webkit-scrollbar { display: none; }
.ficha { flex: 0 0 100%; scroll-snap-align: center; background: var(--blanco); border-radius: 18px; overflow: hidden; box-shadow: var(--sombra); border: 3px solid transparent; transition: border-color .15s; }
@media (min-width: 720px) { .ficha { flex-basis: calc(50% - 6px); } }
.ficha.elegida { border-color: var(--morado); }
.ficha.bloqueada .ficha-foto { filter: grayscale(1); opacity: .5; }
.ficha-foto { position: relative; aspect-ratio: 4 / 5; height: auto; max-height: calc(100vh - 410px); max-height: calc(100dvh - 410px); min-height: 220px; background: linear-gradient(160deg, #7B3AAE, var(--morado) 55%, var(--morado-oscuro)); display: grid; place-items: center; overflow: hidden; }
@media (min-width: 720px) { .ficha-foto { aspect-ratio: 4 / 5; max-height: none; } }
/* Campaña 100XSD dentro de la web: cinta amarilla "Cupón Estelar" y sello 100XSD sobre cada foto (Max, 23-sep-2026) */
.ficha-foto::before { content: "★ CUPÓN ESTELAR ★"; position: absolute; top: 26px; right: -44px; transform: rotate(45deg); background: var(--amarillo); color: var(--morado-oscuro); font-weight: 800; font-size: .68rem; letter-spacing: .1em; padding: 6px 50px; box-shadow: 0 4px 12px rgba(0,0,0,.28); z-index: 2; pointer-events: none; }
.ficha-foto::after { content: "100XSD"; position: absolute; left: 12px; bottom: 12px; background: var(--morado-oscuro); color: var(--amarillo); font-weight: 900; font-size: .82rem; letter-spacing: .08em; padding: 5px 12px; border-radius: 999px; border: 2px solid var(--amarillo); box-shadow: 0 4px 12px rgba(0,0,0,.28); z-index: 2; pointer-events: none; }
.ficha-foto img { width: 100%; height: 100%; object-fit: contain; }   /* el flyer completo (4:5) siempre se ve entero */
.ficha-emoji { font-size: 6rem; filter: drop-shadow(0 8px 14px rgba(102,45,145,.25)); }
.ficha-foto .etiqueta { position: absolute; top: 12px; left: 12px; font-size: .92rem; padding: 8px 14px; box-shadow: 0 4px 12px rgba(0,0,0,.25); background: var(--blanco); color: var(--morado); }
.ficha-foto .etiqueta.sin { background: var(--amarillo); color: var(--morado-oscuro); font-size: 1rem; }
.ficha-num { position: absolute; bottom: 14px; right: 12px; z-index: 2; background: rgba(27,27,27,.55); color: var(--blanco); font-size: .72rem; font-weight: 600; padding: 4px 8px; border-radius: 999px; }
.ficha-cuerpo { padding: 10px 14px 12px; }
.ficha-cuerpo .categoria { color: var(--morado); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.ficha-cuerpo h3 { font-size: 1.15rem; margin: 2px 0 4px; line-height: 1.2; }
.ficha-cuerpo p { color: var(--gris); font-size: .84rem; min-height: 0; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-btn { margin-top: 4px; }
.ficha.bloqueada .ficha-btn { opacity: .5; pointer-events: none; }
.vitrina-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px 0 4px; color: var(--gris); font-weight: 600; font-variant-numeric: tabular-nums; }
.flecha { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--morado); background: var(--blanco); color: var(--morado); font-size: 1.4rem; line-height: 1; }

/* ---- Tío Sam, embajador de la marca (las imágenes van en img/tiosam/; si faltan, el bloque no se muestra) ---- */
.tiosam { display: flex; align-items: flex-end; gap: 10px; margin: 6px 0 16px; }
.tiosam img { width: 96px; height: auto; flex: 0 0 96px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.25)); }
.tiosam .globo { position: relative; background: var(--blanco); color: var(--negro); border-radius: 16px; padding: 12px 14px; font-size: .92rem; line-height: 1.45; box-shadow: var(--sombra); text-align: left; }
.tiosam .globo::before { content: ""; position: absolute; left: -8px; bottom: 16px; border: 8px solid transparent; border-right-color: var(--blanco); border-left: 0; }
.tiosam .globo b { color: var(--morado); }
.tiosam-entrada { margin: 0 0 18px; }
.tiosam-entrada .globo { background: var(--amarillo); color: var(--morado-oscuro); }
.tiosam-entrada .globo::before { border-right-color: var(--amarillo); }
.tiosam-entrada .globo b { color: var(--morado-oscuro); }
.tiosam-celebra img { width: 110px; flex-basis: 110px; }

/* ---- combo y modalidades ---- */
.combo-lista { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.combo-lista li { background: var(--blanco); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.combo-lista li .emoji { font-size: 1.3rem; }
.combo-lista li .mini-foto { width: 44px; height: 55px; object-fit: cover; border-radius: 8px; flex: 0 0 44px; }
.combo-lista li .etiqueta { margin-left: auto; }
.modalidades { display: grid; gap: 12px; margin-bottom: 14px; }
.modalidad { text-align: left; background: var(--blanco); border: 2px solid var(--gris-linea); border-radius: var(--radio); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.modalidad:hover { border-color: var(--morado); }
.modalidad.activa { border-color: var(--morado); box-shadow: var(--sombra); }
.modalidad.propia { background: var(--amarillo); border-color: var(--amarillo); }
.mod-titulo { font-weight: 700; color: var(--morado); font-size: 1rem; }
.mod-inicial { font-size: 1.35rem; }
.mod-inicial b { font-weight: 700; }
.mod-cuota { color: var(--gris); font-size: .95rem; }
.mod-cuota b { color: var(--negro); }
.calculadora { background: var(--blanco); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); }
.calculadora p { color: var(--gris); font-size: .9rem; }
.fila { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.fila > span { font-weight: 600; min-width: 64px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { border: 2px solid var(--gris-linea); background: var(--blanco); border-radius: 999px; padding: 8px 14px; font-weight: 600; }
.opcion.activa { border-color: var(--morado); background: var(--morado); color: var(--blanco); }
.resultado { margin: 12px 0; font-size: 1.05rem; min-height: 1.5em; }
.resultado b { color: var(--morado); }

/* ---- dirección / estado ---- */
.tipo-entrega { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.opcion-entrega { position: relative; display: block; background: var(--blanco); border: 2px solid var(--gris-linea); border-radius: 12px; padding: 12px; cursor: pointer; }
.opcion-entrega input { position: absolute; opacity: 0; }
.opcion-entrega span { display: block; }
.opcion-entrega b { display: block; color: var(--morado); }
.opcion-entrega small { color: var(--gris); font-size: .8rem; }
.opcion-entrega.elegida { border-color: var(--morado); background: var(--amarillo); }
.opcion-entrega.elegida small { color: var(--morado-oscuro); }
.opcion-entrega:has(input:checked) { border-color: var(--morado); background: var(--amarillo); }
.opcion-entrega:has(input:checked) small { color: var(--morado-oscuro); }
.mini-aviso { font-size: .82rem; color: var(--gris); margin: -4px 0 12px; }
.sub-recibe { color: var(--morado); font-size: 1rem; margin: 4px 0 8px; }
.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#f-direccion label { display: block; font-weight: 600; margin-bottom: 12px; font-size: .92rem; }
#f-direccion input, #f-direccion textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; border-radius: 10px; border: 2px solid var(--gris-linea); background: var(--blanco); }
#f-direccion input:focus, #f-direccion textarea:focus { outline: none; border-color: var(--morado); }
.resumen-eleccion, .estado-pago { background: var(--blanco); border-left: 5px solid var(--amarillo); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: .98rem; }
.estado-pago b { color: var(--morado); }
.confirmacion { background: var(--morado); color: var(--blanco); border-radius: var(--radio); padding: 18px; margin-bottom: 18px; font-size: 1.02rem; line-height: 1.5; }
.confirmacion.aviso { background: var(--amarillo); color: var(--morado-oscuro); }
.confirmacion.exito { background: var(--morado); color: var(--blanco); border: 3px solid var(--amarillo); }
.fiesta { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }
.fiesta i { position: absolute; top: -20px; display: block; border-radius: 2px; opacity: .95; animation: caer linear forwards; }
@keyframes caer { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: .6; } }
.acciones { display: grid; gap: 10px; margin: 12px 0; }
.pie { color: var(--gris); font-size: .85rem; text-align: center; margin-top: 20px; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--negro); color: var(--blanco); padding: 10px 16px; border-radius: 999px; font-size: .9rem; z-index: 50; max-width: 90vw; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.cargando { opacity: .6; pointer-events: none; }

/* Reglas v2 (24-sep-2026): forma de compra y artículos sin inicial */
.modos { display: grid; gap: 12px; margin: 10px 0 18px; }
.modo { text-align: left; background: var(--blanco); border: 3px solid var(--gris-linea); border-radius: var(--radio); padding: 16px 16px 16px 84px; position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 92px; cursor: pointer; }
.modo:hover, .modo:focus { border-color: var(--morado); }
.modo-num { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; background: var(--morado); color: var(--amarillo); font-weight: 900; font-size: 1.7rem; display: grid; place-items: center; }
.modo[data-modo="combo5"] { border-color: var(--amarillo); background: #FFFCE0; }
.modo-titulo { font-weight: 800; font-size: 1.15rem; color: var(--morado); }
.modo-sub { color: var(--gris); font-size: .9rem; }
.modo-sub b { color: var(--morado-oscuro); }
.bandeja-slots.n1 { grid-template-columns: repeat(1, 90px); } .bandeja-slots.n2 { grid-template-columns: repeat(2, 1fr); max-width: 220px; } .bandeja-slots.n3 { grid-template-columns: repeat(3, 1fr); max-width: 300px; }
.ficha-sin { margin-top: 8px; width: 100%; border: 2px solid var(--amarillo); background: var(--blanco); color: var(--morado-oscuro); border-radius: 999px; padding: 8px 12px; font-weight: 700; font-size: .9rem; cursor: pointer; }
.ficha-sin.activa { background: var(--amarillo); }
.ficha-sin:disabled { opacity: .45; cursor: default; }
.slot .slot-sin { position: absolute; left: 0; right: 0; bottom: 0; background: var(--amarillo); color: var(--morado-oscuro); font-size: .58rem; font-weight: 800; text-align: center; letter-spacing: .04em; padding: 1px 0; }
.combo-lista .etiqueta.sin { background: var(--amarillo); color: var(--morado-oscuro); }
.calculadora .opciones.semanas .opcion { padding: 8px 11px; min-width: 42px; text-align: center; }

/* Entrada con gancho (24-sep-2026) */
.caja .lema-grande { font-size: 1.35rem; font-weight: 800; color: var(--blanco); margin: 2px 0 4px; }
.caja .lema { opacity: .9; margin-bottom: 14px; }
.pasos-entrada { list-style: none; display: flex; gap: 8px; margin: 14px 0 0; padding: 0; }
.pasos-entrada li { flex: 1; background: rgba(255,255,255,.1); border-radius: 12px; padding: 8px 6px; font-size: .8rem; font-weight: 600; }
.pasos-entrada li b { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--amarillo); color: var(--morado-oscuro); margin: 0 auto 4px; line-height: 26px; }
/* Entrega: 3 botones */
.tipo-entrega.tres { grid-template-columns: 1fr; }
.tipo-entrega.tres .opcion-entrega { padding: 12px 14px; }
/* Regalo sorpresa */
.regalo { margin: 4px 0 14px; }
.regalo-caja { width: 100%; display: flex; align-items: center; gap: 14px; background: var(--amarillo); border: 3px dashed var(--morado); border-radius: var(--radio); padding: 12px 16px; text-align: left; cursor: pointer; animation: latido 1.6s ease-in-out infinite; }
.regalo-icono { font-size: 2.6rem; line-height: 1; }
.regalo-texto b { display: block; color: var(--morado-oscuro); font-size: 1.05rem; }
.regalo-texto small { color: var(--morado-oscuro); opacity: .8; }
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.regalo-abierto { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; background: var(--blanco); border: 3px solid var(--amarillo); border-radius: var(--radio); padding: 12px 16px; box-shadow: var(--sombra); }
.regalo-abierto img { width: 100%; max-width: 340px; height: auto; max-height: 62vh; object-fit: contain; border-radius: 14px; background: var(--morado); box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.regalo-abierto b { display: block; color: var(--morado); font-size: 1.15rem; }
.regalo-abierto small { color: var(--gris); }
.regalo-estado { display: flex; align-items: center; gap: 10px; background: var(--blanco); border: 2px solid var(--amarillo); border-radius: 12px; padding: 8px 12px; margin: 0 0 12px; font-size: .95rem; }
.regalo-estado img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: var(--morado); }
.regalo-estado b { color: var(--morado); }

.volver { margin: 4px 0 6px; }
.bandeja { padding: 8px 12px; }
.bandeja-titulo { margin-bottom: 6px; }

/* Compacto en teléfono: la foto cuadrada completa + botón Elegir sin deslizar (25-sep-2026) */
.bandeja-slots { gap: 6px; }
.slot { border-radius: 10px; }
.bandeja-slots.n5 .slot, .bandeja-slots.n3 .slot { aspect-ratio: auto; height: 46px; }
.vitrina-ayuda { margin: 4px 2px 8px; font-size: .8rem; }
.ficha-cuerpo .categoria { font-size: .68rem; }
.ficha-cuerpo h3 { font-size: 1.05rem; margin: 1px 0 3px; }
.ficha-cuerpo .ficha-btn { padding: 11px 14px; }
.volver { font-size: .85rem; margin: 2px 0 4px; }

/* Teléfonos bajos (menos de 720 px de alto): todo más compacto para que Elegir quede a la vista */
@media (max-height: 720px) { .bandeja-slots.n5 .slot, .bandeja-slots.n3 .slot { height: 38px; } .ficha-cuerpo p { display: none; } .ficha-cuerpo { padding: 8px 12px 10px; } .vitrina-ayuda { display: none; } .ficha-foto { max-height: calc(100vh - 380px); max-height: calc(100dvh - 380px); } }

/* Flechas grandes y claras para ir atrás / adelante en la vitrina (Max, 25-sep-2026) */
.vitrina-envoltorio { position: relative; }
.flecha-grande { position: absolute; top: 34%; z-index: 6; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--blanco); background: var(--amarillo); color: var(--morado-oscuro); box-shadow: 0 6px 16px rgba(0,0,0,.35); display: grid; place-items: center; cursor: pointer; padding: 0; line-height: 1; transition: transform .15s, opacity .15s; }
.flecha-grande span { font-size: 2.2rem; font-weight: 900; margin-top: -6px; }
.flecha-grande small { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: .62rem; font-weight: 800; color: var(--morado-oscuro); background: var(--amarillo); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.flecha-grande.izq { left: 4px; } .flecha-grande.der { right: 4px; }
.flecha-grande:active { transform: scale(.94); }
.flecha-grande.apagada { opacity: .35; pointer-events: none; }
.vitrina-nav { margin: 24px 0 4px; }
@media (min-width: 720px) { .flecha-grande { width: 64px; height: 64px; } .flecha-grande.izq { left: -12px; } .flecha-grande.der { right: -12px; } }

/* Envío gratis hasta la puerta (Max, 25-sep-2026) */
.envio-gratis { display: flex; align-items: center; gap: 12px; background: var(--amarillo); color: var(--morado-oscuro); border-radius: var(--radio); padding: 12px 16px; margin: 4px 0 14px; box-shadow: var(--sombra); }
.envio-gratis .camion { width: 58px; height: 36px; flex: 0 0 58px; }
.envio-gratis b { display: block; font-size: 1.05rem; line-height: 1.2; }
.envio-gratis small { display: block; font-size: .85rem; opacity: .85; margin-top: 2px; }
.envio-gratis.chica { padding: 9px 14px; margin: 0 0 12px; }
.envio-gratis.chica .camion { width: 44px; height: 28px; flex-basis: 44px; }
.envio-gratis.chica b { font-size: .95rem; }

/* Camioneta andando: avanza, vibra, ruedas giran, humito; el cartel titila suave (Max, 25-sep-2026) */
.envio-gratis .camion { overflow: visible; }
.envio-gratis .camion-cuerpo { animation: anda 1.1s ease-in-out infinite; transform-origin: 32px 30px; }
.envio-gratis .rueda { animation: gira .6s linear infinite; transform-box: fill-box; transform-origin: center; }
.envio-gratis .humo { animation: humo 1.4s ease-out infinite; }
.envio-gratis { animation: titila 2.2s ease-in-out infinite; }
@keyframes anda { 0% { transform: translate(0, 0); } 25% { transform: translate(1.5px, -1px); } 50% { transform: translate(3px, 0); } 75% { transform: translate(1.5px, -1.2px); } 100% { transform: translate(0, 0); } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes humo { 0% { opacity: .7; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-8px, -5px) scale(1.4); } }
@keyframes titila { 0%, 100% { box-shadow: 0 6px 16px rgba(0,0,0,.18), 0 0 0 0 rgba(255,242,0,.0); } 50% { box-shadow: 0 6px 18px rgba(0,0,0,.22), 0 0 0 6px rgba(255,242,0,.45); } }
@media (prefers-reduced-motion: reduce) { .envio-gratis, .envio-gratis .camion-cuerpo, .envio-gratis .rueda, .envio-gratis .humo { animation: none; } }

/* Bienvenida VIP (Max, 25-sep-2026): estilo de gran marca, una idea por pantalla */
.bienvenida { position: relative; min-height: calc(100vh - 130px); min-height: calc(100dvh - 130px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 20%, #8A45C4 0%, var(--morado) 45%, var(--morado-oscuro) 100%); color: var(--blanco); border-radius: var(--radio); padding: 28px 18px; margin: 0 -4px; overflow: hidden; }
.vip-sello { display: inline-block; background: var(--amarillo); color: var(--morado-oscuro); font-weight: 900; letter-spacing: .22em; font-size: .78rem; padding: 7px 16px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.3); animation: latido 1.8s ease-in-out infinite; }
.vip-titulo { font-size: 2.2rem; line-height: 1.1; margin: 18px 0 8px; color: var(--blanco); text-shadow: 0 4px 18px rgba(0,0,0,.35); }
.vip-titulo span { color: var(--amarillo); display: inline-block; font-size: 2.6rem; }
.vip-texto { font-size: 1.1rem; opacity: .95; margin: 0 0 14px; max-width: 320px; }
.vip-texto b { color: var(--amarillo); }
.tiosam-vip { margin: 4px 0 18px; max-width: 340px; }
.tiosam-vip img { width: 84px; flex-basis: 84px; }
.vip-btn { width: 100%; max-width: 340px; font-size: 1.15rem; padding: 16px 20px; box-shadow: 0 10px 26px rgba(0,0,0,.35); animation: brillo 2.4s ease-in-out infinite; }
.vip-pie { margin-top: 14px; font-size: .85rem; opacity: .85; }
.vip-pie b { color: var(--amarillo); }
@keyframes brillo { 0%, 100% { box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 0 0 rgba(255,242,0,0); } 50% { box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 0 10px rgba(255,242,0,.35); } }
.bienvenida .fiesta { position: absolute; }

/* "Yo mismo elijo": resaltado con imagen y titilando (Max, 25-sep-2026) */
.modalidad.propia { position: relative; flex-direction: row; align-items: center; gap: 14px; border: 3px solid var(--morado); padding: 18px 16px 18px 14px; overflow: visible; animation: titila-propia 1.6s ease-in-out infinite; }
.modalidad.propia .propia-icono { width: 64px; height: 64px; flex: 0 0 64px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); animation: mece 2.4s ease-in-out infinite; }
.modalidad.propia .propia-textos { display: flex; flex-direction: column; gap: 4px; }
.modalidad.propia .mod-titulo { color: var(--morado-oscuro); font-size: 1.15rem; }
.modalidad.propia .mod-cuota { color: var(--morado-oscuro); opacity: .85; }
.propia-cinta { position: absolute; top: -12px; right: 14px; background: var(--morado); color: var(--amarillo); font-weight: 900; font-size: .68rem; letter-spacing: .14em; padding: 4px 10px; border-radius: 999px; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.modalidad.propia.activa { animation: none; box-shadow: 0 0 0 4px var(--morado); }
@keyframes titila-propia { 0%, 100% { box-shadow: 0 6px 16px rgba(0,0,0,.15), 0 0 0 0 rgba(102,45,145,0); transform: scale(1); } 50% { box-shadow: 0 8px 22px rgba(0,0,0,.2), 0 0 0 8px rgba(102,45,145,.28); transform: scale(1.015); } }
@keyframes mece { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .modalidad.propia, .modalidad.propia .propia-icono { animation: none; } }

/* Sello 3.er aniversario (Max, 26-sep-2026): 100XSD se lanza por los 3 años de CrediSan */
.logo-fila { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 6px; }
.sello-3 { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--amarillo); color: var(--morado-oscuro); box-shadow: 0 6px 16px rgba(0,0,0,.3); border: 3px solid var(--blanco); line-height: 1; flex: 0 0 54px; }
.sello-3 b { font-size: 1.5rem; font-weight: 900; }
.sello-3 small { font-size: .5rem; font-weight: 800; letter-spacing: .14em; margin-top: 1px; }
.sello-3.grande { width: 72px; height: 72px; flex-basis: 72px; margin: 14px auto 0; animation: mece 3s ease-in-out infinite; }
.sello-3.grande b { font-size: 2rem; } .sello-3.grande small { font-size: .62rem; }
.caja .eyebrow { font-size: .72rem; }

/* Mis cuotas (27-sep-2026) */
.mis-cuotas { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 12px 14px; margin: 0 0 14px; }
.mis-cuotas-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .mis-cuotas-cab b { color: var(--morado); font-size: 1.05rem; } .mis-cuotas-cab span { color: var(--gris); font-size: .85rem; font-weight: 600; }
.mis-cuotas-proxima { border-radius: 12px; padding: 10px 12px; font-size: .95rem; margin-bottom: 8px; background: var(--morado-claro); color: var(--morado-oscuro); border-left: 5px solid var(--morado); }
.mis-cuotas-proxima.naranja { background: #FFF8E1; border-left-color: #F59E0B; } .mis-cuotas-proxima.rojo { background: #FDECEC; border-left-color: #C62828; } .mis-cuotas-proxima.listo { background: var(--amarillo); border-left-color: var(--morado); }
.mis-cuotas ul { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; }
.mis-cuotas li { display: grid; grid-template-columns: 28px 1fr 70px 80px; gap: 6px; font-size: .86rem; padding: 5px 4px; border-bottom: 1px solid var(--gris-linea); color: var(--negro); }
.mis-cuotas li span:first-child { color: var(--gris); font-weight: 700; } .mis-cuotas li span:last-child { text-align: right; font-weight: 600; }
.mis-cuotas li.pagada { color: var(--gris); } .mis-cuotas li.hoy { background: #FFF8E1; } .mis-cuotas li.vencida { background: #FDECEC; }

/* Cuenta regresiva a la apertura oficial (3-oct-2026) */
.mensaje-cuenta { display: inline-flex; flex-direction: column; align-items: center; background: var(--amarillo); color: var(--morado-oscuro); border-radius: 16px; padding: 10px 22px; margin: 0 auto 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.mensaje-cuenta small { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .mensaje-cuenta b { font-size: 1.9rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }

/* Imágenes oficiales de Diseño (4-oct-2026): ya traen la cinta Cupón Estelar, el logo 100XSD y el nombre, así que la app no los repite.
   La etiqueta ELIGE SIN INICIAL baja a la esquina inferior izquierda, donde el flyer deja espacio. */
.ficha-foto::before, .ficha-foto::after { display: none; }
.ficha-foto .etiqueta { display: none; }
.ficha-foto .etiqueta.sin { display: inline-block; top: auto; bottom: 12px; left: 12px; }

/* Logo oficial 100XSD (4-oct-2026) */
.h1-logo { margin: 2px 0 6px; line-height: 0; }
.logo-100 { display: block; width: min(86%, 360px); height: auto; margin: 0 auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); animation: logo-brillo 3.2s ease-in-out infinite; }
.logo-100.chica { width: min(60%, 230px); margin: 4px auto 10px; animation: none; }
@keyframes logo-brillo { 0%, 100% { transform: scale(1); filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); } 50% { transform: scale(1.025); filter: drop-shadow(0 12px 28px rgba(255,242,0,.35)); } }
@media (prefers-reduced-motion: reduce) { .logo-100 { animation: none; } }

/* Calculadora: aviso CERO INICIAL (4-oct-2026) */
.calc-cero { background: var(--morado); color: var(--amarillo); border-radius: 14px; padding: 10px 14px; margin: 0 0 10px; display: flex; flex-direction: column; gap: 2px; }
.calc-cero b { font-size: 1.15rem; letter-spacing: .06em; } .calc-cero small { color: var(--blanco); font-size: .85rem; }

/* Dos unidades del mismo artículo (4-oct-2026) */
.ficha-dos { margin-top: 8px; width: 100%; border: 2px dashed var(--morado); background: var(--blanco); color: var(--morado-oscuro); border-radius: 999px; padding: 8px 12px; font-weight: 700; font-size: .9rem; cursor: pointer; }
.combo-lista .unidades { color: var(--morado); margin-left: 4px; }

/* Reloj de apertura en la portada (4-oct-2026) */
.apertura { display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(0,0,0,.28); border: 2px solid var(--amarillo); border-radius: 16px; padding: 10px 16px; margin: 4px auto 10px; max-width: 360px; }
.apertura small { color: var(--amarillo); font-weight: 800; font-size: .8rem; letter-spacing: .04em; text-align: center; }
.apertura b { color: var(--blanco); font-size: 1.7rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; }

/* .modo-num con dos caracteres ("1-2"): que no se desborde el círculo (9-oct-2026) */
.modo .modo-num { font-size: clamp(.9rem, 4.2vw, 1.35rem); letter-spacing: -.02em; }

/* Certificado de Cliente VIP (9-oct-2026) */
.vip-cert { background: var(--blanco); border: 3px solid var(--amarillo); border-radius: var(--radio); padding: 14px; margin: 0 0 14px; text-align: center; box-shadow: var(--sombra); }
.vip-cert > b { display: block; color: var(--morado); font-size: 1.1rem; }
.vip-cert > small { display: block; color: var(--gris); margin-bottom: 10px; }
.vip-cert img { width: 100%; max-width: 320px; border-radius: 12px; display: block; margin: 0 auto 10px; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.vip-cert-botones { display: flex; flex-direction: column; gap: 8px; }

/* "Quiero volver a comprar" (9-oct-2026) */
.quiero-mas { background: var(--morado); color: var(--blanco); border-radius: var(--radio); padding: 14px; margin: 0 0 14px; text-align: center; box-shadow: var(--sombra); }
.quiero-mas b { display: block; color: var(--amarillo); font-size: 1.08rem; }
.quiero-mas small { display: block; margin: 4px 0 10px; opacity: .92; }
.quiero-mas .btn { width: 100%; }