/* ============================================================================ * LA HOJA DE LA APP PUBLICABLE * * LA CARPETA play/ ES LA FRONTERA, y no es organización: es lo que haría que * la app de Google Play no pudiera contener el producto quincenal ni por * accidente, fijando el alcance del TWA en /Tugarantia/play/ para que * app/socio.html quede FUERA del alcance de la app instalada. * * 18-ago-2026 — OJO: HOY ES AL REVÉS. Play quedó descartado como canal y el * TWA envuelve app/socio.html con alcance /Tugarantia/ entero (ver * android/LEEME.md y el centinela de pruebas/motor.test.js). Si la tienda se * retoma, el alcance vuelve acá y el párrafo de arriba vuelve al presente. * * LOS TOKENS ESTÁN DUPLICADOS DE socio.html, A SABIENDAS Y CON PLAN. * socio.html los lleva en línea, dentro del propio archivo. Sacarlos de allá * ahora significa editar un archivo de 3.300 líneas que Joan toca en paralelo, y * romperle la app que hoy usan sus clientes por una mejora que no urge. Así que * se copian, se dice acá que están copiados, y el día que socio.html se toque en * serio se pasa a esta hoja y se borra la copia. Es deuda anotada, no deuda * escondida: la enfermedad de este proyecto es la copia que nadie declaró. * * La ley de la paleta es la misma y está explicada entera en socio.html: dos * materiales (laca y papel), tres colores con un trabajo cada uno, y el amarillo * SOLO sobre laca. * ==========================================================================*/ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} :root{ --laca:#0C0A0B; --papel:#FFFFFF; --fondo:#F6F3F0; --tinta:#0C0A0B; --luz:#FFFFFF; --sombra:#000000; --amarillo:#F5C542; --amarillo-tinta:#7A5A10; --azul:#1B4FD8; --azul-laca:#7FA8FF; --azul-tinte:#EDF2FE; --azul-texto:var(--azul); --rojo:#D81F26; --rojo-laca:#FF6B6F; --rojo-tinte:#FCF4F2; --rojo-texto:var(--rojo); --ambar:#9A5B12; --ambar-papel:color-mix(in srgb, var(--ambar) 10%, var(--luz)); --ambar-filete:color-mix(in srgb, var(--ambar) 40%, transparent); --ambar-tinta:var(--ambar); --verde:#1B7A4B; --verde-tinte:#EAF6F0; --gris:#6E6460; --linea:#E9E3DD; --blanco-laca:#FBF7F4; --r:16px; --e1:4px; --e2:8px; --e3:12px; --e4:20px; --placa: linear-gradient(103deg, transparent 32%, color-mix(in srgb, var(--luz) 5%, transparent) 45%, transparent 60%), radial-gradient(140% 110% at 16% -25%, color-mix(in srgb, var(--laca) 88%, var(--luz)) 0%, color-mix(in srgb, var(--laca) 97%, var(--luz)) 45%, var(--laca) 100%); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --tinta:#EDE7E4; --papel:#151113; --fondo:#0B0A0A; --linea:#262021; --gris:#9C918B; --rojo-tinte:#241416; --rojo-texto:var(--rojo-laca); --azul-tinte:#101A2E; --azul-texto:var(--azul-laca); --amarillo-tinta:#F8D471; --verde-tinte:#0E1F17; --ambar-papel:color-mix(in srgb, var(--ambar) 10%, var(--papel)); --ambar-filete:var(--ambar); --ambar-tinta:var(--tinta); } } :root[data-theme="dark"]{ --tinta:#EDE7E4; --papel:#151113; --fondo:#0B0A0A; --linea:#262021; --gris:#9C918B; --rojo-tinte:#241416; --rojo-texto:var(--rojo-laca); --azul-tinte:#101A2E; --azul-texto:var(--azul-laca); --amarillo-tinta:#F8D471; --verde-tinte:#0E1F17; --ambar-papel:color-mix(in srgb, var(--ambar) 10%, var(--papel)); --ambar-filete:var(--ambar); --ambar-tinta:var(--tinta); } html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--fondo);color:var(--tinta); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,system-ui,sans-serif; font-size:15px;line-height:1.5;padding-bottom:40px} h1,h2,h3{margin:0;font-family:ui-serif,"New York","Iowan Old Style",Georgia,"Times New Roman",serif; font-weight:600;letter-spacing:-.01em;text-wrap:balance} .wrap{max-width:520px;margin:0 auto;padding:0 16px} .muted{color:var(--gris)} .oculto{display:none!important} /* ---------------- la laca ---------------- */ .laca{position:relative;isolation:isolate;border-radius:var(--r); color:var(--blanco-laca);-webkit-font-smoothing:antialiased;background:var(--placa); box-shadow:inset 0 1px 0 color-mix(in srgb, var(--luz) 13%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--sombra) 55%, transparent), 0 18px 38px -20px color-mix(in srgb, var(--laca) 45%, transparent)} .laca .muted{color:color-mix(in srgb, var(--blanco-laca) 62%, transparent)} .cab{padding:calc(env(safe-area-inset-top) + 18px) 0 20px;border-radius:0 0 var(--r) var(--r)} .marca{display:flex;align-items:center;gap:var(--e2);font-size:13px;letter-spacing:.14em; text-transform:uppercase;font-weight:700;color:color-mix(in srgb, var(--blanco-laca) 72%, transparent); flex-wrap:wrap} /* 17-sep-2026 — «powered by NEXECO». Va en la misma fila y se cae a la siguiente en un telefono angosto (por eso el flex-wrap de arriba): la marca que vende no puede partirse para que quepa el respaldo. Mas chico y mas apagado a proposito — es quien responde detras, no lo que se vende. */ .marca .porNexeco{font-size:10.5px;font-weight:600;letter-spacing:.1em; color:color-mix(in srgb, var(--blanco-laca) 45%, transparent)} .pin{width:24px;height:24px;border-radius:7px;background:var(--rojo);color:var(--luz); display:grid;place-items:center;font-weight:800;font-size:13px} .cab h1{font-size:21px;margin-top:var(--e3);color:var(--blanco-laca)} /* ---------------- tarjetas ---------------- */ .card{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r); padding:var(--e4);margin-top:var(--e3)} .card.laca{border:0;background:var(--placa);color:var(--blanco-laca)} .etq{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--gris)} .laca .etq{color:color-mix(in srgb, var(--amarillo) 85%, transparent)} .cifra{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:6px; font-variant-numeric:tabular-nums} .cifra.sm{font-size:24px;font-weight:700} .cifra.oro{color:var(--amarillo)} h3.tit{font-size:18px} .sub{font-size:14px;color:var(--gris);margin:var(--e2) 0 0} .fila{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e3); padding:var(--e3) 0;border-bottom:1px solid var(--linea)} .fila:last-child{border-bottom:0} .fila .k{color:var(--gris);font-size:14px} .fila .v{font-weight:600;text-align:right;font-variant-numeric:tabular-nums} .laca .fila{border-color:color-mix(in srgb, var(--luz) 12%, transparent)} .laca .fila .k{color:color-mix(in srgb, var(--blanco-laca) 62%, transparent)} .sep{height:1px;background:var(--linea);margin:16px 0} /* ---------------- botones y campos ---------------- */ .btn{display:block;width:100%;padding:15px;border:0;border-radius:14px;font-size:16px; font-weight:600;font-family:inherit;cursor:pointer;background:var(--rojo);color:var(--luz); text-align:center;text-decoration:none;transition:transform .12s;min-height:44px} .btn:active{transform:scale(.985)} .btn:disabled{opacity:.45;cursor:not-allowed} .btn.sec{background:transparent;color:var(--tinta);border:1px solid var(--linea)} .btn.sm{padding:var(--e3);font-size:14px} .btn.arriba{margin-top:var(--e4)} label{display:block;font-size:13px;font-weight:600;margin:16px 0 6px} label .opc{font-weight:400;color:var(--gris);text-transform:none;letter-spacing:0} input[type=text],input[type=tel],input[type=password],input[type=number],input[type=email], input[type=date],select,textarea{ width:100%;padding:14px;border:1px solid var(--linea);border-radius:14px;font-size:16px; font-family:inherit;background:var(--papel);color:var(--tinta)} input:focus,select:focus{outline:2px solid var(--rojo-texto);outline-offset:2px} :where(button,a,summary,[tabindex]):focus-visible{outline:2px solid var(--rojo-texto); outline-offset:2px;border-radius:8px} .ayuda{font-size:12.5px;color:var(--gris);margin-top:5px;line-height:1.45} /* ---------------- avisos ---------------- */ .aviso{border-radius:14px;padding:14px;font-size:14px;margin-top:14px;line-height:1.5; background:var(--azul-tinte);color:var(--tinta)} .aviso.ambar{background:var(--ambar-papel);color:var(--ambar-tinta); border-left:3px solid var(--ambar-filete)} .aviso.verde{background:var(--verde-tinte);color:var(--tinta);border-left:3px solid var(--verde)} /* ---------------- la casilla de habeas data ---------------- Toda la fila es tocable, no solo el cuadrito: un checkbox de 18px en un celular se falla, y este es el que decide si la persona puede abrir cuenta. */ .permiso{display:flex;gap:12px;align-items:flex-start;margin:16px 0 0;padding:13px; border:1px solid var(--linea);border-radius:14px;cursor:pointer; font-size:14px;font-weight:400;line-height:1.5} .permiso:has(input:checked){border-color:var(--azul-texto);background:var(--azul-tinte)} .permiso input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--rojo);cursor:pointer} .permiso .muted{display:block;margin-top:4px} /* ---------------- el paso a paso del registro ---------------- */ .pasos{display:flex;gap:6px;margin-top:var(--e3)} .pasos i{flex:1;height:3px;border-radius:3px;background:var(--linea)} .pasos i.hecho{background:var(--verde)} .pasos i.aqui{background:var(--rojo)} .pie{text-align:center;font-size:12px;color:var(--gris);margin:22px 0 8px;line-height:1.6} .grupo-tit{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700; color:var(--gris);margin:var(--e4) 0 0} /* ========================================================================== * LA VITRINA — 9 de septiembre de 2026 * * Joan: «lo que ve el cliente nuevo es muy poco… quiero una calculadora… * agrégale más detalles al diseño como algunos brillos o animaciones 3D de los * botones y que cada vez que se toque la pantalla se cree un rayo de energía». * * LA REGLA DE ESTA HOJA: el brillo se paga con fotogramas, y el celular que * abre esto es de gama baja con datos contados. Todo lo de acá abajo respeta * `prefers-reduced-motion`, no anima nada que obligue al navegador a recalcular * la página (solo `transform` y `opacity`, que van en la tarjeta gráfica), y el * rayo se apaga solo si el teléfono no le da. * ======================================================================== */ /* ---------------- botones con cuerpo ---------------- El botón tiene un borde inferior sólido que hace de canto: al apretarlo, baja ese canto y el botón se hunde. Es un truco viejo y cuesta cero: se mueve una sola propiedad (transform) y no se repinta nada. */ .btn{position:relative;overflow:hidden; box-shadow:0 4px 0 color-mix(in srgb, var(--rojo) 55%, var(--sombra)), 0 10px 24px -12px color-mix(in srgb, var(--rojo) 70%, transparent); transition:transform .10s ease, box-shadow .10s ease} .btn:active{transform:translateY(3px); box-shadow:0 1px 0 color-mix(in srgb, var(--rojo) 55%, var(--sombra)), 0 4px 10px -8px color-mix(in srgb, var(--rojo) 70%, transparent)} .btn.sec{box-shadow:0 3px 0 var(--linea)} .btn.sec:active{transform:translateY(2px);box-shadow:0 1px 0 var(--linea)} /* El brillo que barre. Solo en el botón principal y solo una vez cada seis segundos: un destello permanente cansa y en una app de plata parece un anuncio. `will-change` no se usa a propósito — deja la capa reservada para siempre y en un teléfono con poca memoria eso se paga. */ .btn.arriba::after{content:'';position:absolute;top:0;bottom:0;width:45%; left:-60%;transform:skewX(-18deg); background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--luz) 38%, transparent),transparent); animation:brillo 6s ease-in-out infinite} @keyframes brillo{0%,72%{left:-60%}88%,100%{left:130%}} /* ---------------- la calculadora ---------------- */ .calc-cifra{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1; font-variant-numeric:tabular-nums;color:var(--amarillo); text-shadow:0 0 22px color-mix(in srgb, var(--amarillo) 35%, transparent)} .calc-pie{font-size:13px;margin-top:var(--e2)} /* EL NOMBRE DE LA CIFRA GRANDE — 15-sep-2026. Va encima y no debajo porque arriba es donde se lee antes: el ojo llega al numero ya sabiendo que es. */ .etq-cifra{font-size:12px;font-weight:600;letter-spacing:.02em;margin-bottom:2px; color:color-mix(in srgb, var(--blanco-laca) 70%, transparent)} .mando{margin-top:var(--e4)} .mando .cab-mando{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e2)} .mando .cab-mando b{font-variant-numeric:tabular-nums;font-size:16px} /* LOS BOTONES DE FECHA — 15-sep-2026. Dos opciones de cuando cae la primera cuota, con la fecha de verdad escrita. Son botones y no un deslizador porque son dos cosas distintas, no un rango: el dedo elige, no arrastra. */ .opFechas{display:flex;gap:var(--e2);margin-top:var(--e2)} .opFecha{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px; padding:var(--e3) var(--e2);border-radius:12px;cursor:pointer;text-align:center; border:1px solid color-mix(in srgb, var(--blanco-laca) 22%, transparent); background:color-mix(in srgb, var(--blanco-laca) 6%, transparent); color:var(--blanco-laca);font:inherit;transition:border-color .15s,background .15s} .opFecha b{font-size:14.5px;font-weight:700;letter-spacing:-.01em} .opFecha span{font-size:12px;color:color-mix(in srgb, var(--blanco-laca) 65%, transparent)} .opFecha.sel{border-color:var(--amarillo); background:color-mix(in srgb, var(--amarillo) 14%, transparent)} .opFecha.sel b{color:var(--amarillo)} .opFecha:focus-visible{outline:2px solid var(--amarillo);outline-offset:2px} @media (prefers-reduced-motion:reduce){.opFecha{transition:none}} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:34px; background:transparent;margin:0;display:block} input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px; background:color-mix(in srgb, var(--luz) 20%, transparent)} input[type=range]::-moz-range-track{height:6px;border-radius:6px; background:color-mix(in srgb, var(--luz) 20%, transparent)} /* 28 px de agarre: un pulgar en la calle no acierta uno de 18. */ input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none; width:28px;height:28px;border-radius:50%;background:var(--amarillo);margin-top:-11px; border:3px solid var(--laca); box-shadow:0 0 0 1px color-mix(in srgb, var(--amarillo) 60%, transparent), 0 0 18px color-mix(in srgb, var(--amarillo) 55%, transparent); cursor:pointer} input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%; background:var(--amarillo);border:3px solid var(--laca);cursor:pointer} input[type=range]:focus-visible{outline:2px solid var(--amarillo);outline-offset:4px} /* ---------------- los escalones del recorrido ---------------- Deliberadamente NO usa .card.laca ni .cifra.oro: la vitrina no puede tener el mismo cromo que las pantallas donde el cliente ve SU plata. Si un día alguien recorta esto y lo manda por WhatsApp, tiene que verse distinto. */ .escalon{position:relative;border:1px solid var(--linea);border-radius:14px; padding:var(--e3) var(--e4);margin-top:var(--e2);background:var(--papel)} .escalon + .escalon{margin-top:10px} .escalon .n{position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;border-radius:14px 0 0 14px; background:var(--linea)} .escalon.hoy .n{background:var(--verde)} .escalon .paso-tit{font-weight:700;font-size:15px} .escalon .paso-cifra{font-size:22px;font-weight:800;letter-spacing:-.02em; font-variant-numeric:tabular-nums;margin-top:2px} .escalon .paso-como{font-size:13px;color:var(--gris);margin-top:4px;line-height:1.45} /* EL SELLO DE EJEMPLO. Va ANTES de la primera cifra de cada tarjeta —por tarjeta, no por distancia—, porque la forma real en que un ejemplo se escapa de su descargo en Colombia es un recorte compartido por WhatsApp: si el sello está en la cabecera de la pantalla y alguien recorta una tarjeta, la cifra viaja sola. Nunca en gris: el descargo no puede ser menos legible que lo que descarga. */ .ej-sello{display:inline-block;font-size:12px;line-height:1.3;font-weight:700; letter-spacing:.04em;text-transform:uppercase; color:var(--ambar-tinta);background:var(--ambar-papel); border:1px solid var(--ambar-filete);border-radius:8px; padding:3px 8px;margin-bottom:6px} /* ---------------- la historia y la garantía, plegadas ----------------
y no una pantalla aparte: cerrado es una línea que no estorba, y abierto no le hace perder la calculadora ni esperar un repintado. */ .plegable{border:1px solid var(--linea);border-radius:14px;margin-top:var(--e3); background:var(--papel);overflow:hidden} .plegable > summary{list-style:none;cursor:pointer;padding:16px var(--e4); font-weight:600;font-size:15px;display:flex;justify-content:space-between; align-items:center;gap:var(--e2)} .plegable > summary::-webkit-details-marker{display:none} .plegable > summary::after{content:'+';font-size:20px;font-weight:400;color:var(--gris); transition:transform .18s ease} .plegable[open] > summary::after{transform:rotate(45deg)} .plegable .adentro{padding:0 var(--e4) var(--e4);font-size:14.5px;line-height:1.6} .plegable .adentro p{margin:0 0 12px} .plegable .adentro p:last-child{margin-bottom:0} /* ---------------- el rayo ---------------- Un solo lienzo, fijo a la pantalla y sordo al tacto: nunca se queda con un toque que era para un botón. */ #rayos{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60} /* ---------------- el total, en su propia caja — 16-sep-2026 ---------------- Joan: «que tenga un total de cuánto tiene que pagar el cliente». Antes vivía metido en una línea gris del mismo tamaño que el resto, y se perdía: se leía la cuota y nada más. Ahora es la segunda cifra de la tarjeta, y se lee como segunda — más grande que un renglón, más chica que la cuota, porque la cuota es con la que se decide y el total es con lo que se compara. */ .granTotal{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e3); margin:var(--e4) 0 var(--e2);padding:12px 14px;border-radius:12px; background:color-mix(in srgb, var(--amarillo) 12%, transparent); border:1px solid color-mix(in srgb, var(--amarillo) 28%, transparent)} .granTotal span{font-size:13px;color:color-mix(in srgb, var(--blanco-laca) 72%, transparent)} .granTotal b{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--amarillo); font-variant-numeric:tabular-nums;white-space:nowrap} /* Fuera de la laca —la tarjeta del crédito con garantía es de papel— los mismos tokens tienen que leerse igual de bien. */ .card:not(.laca) .granTotal span{color:var(--gris)} .card:not(.laca) .granTotal b{color:var(--amarillo-tinta)} /* ---------------- las cuatro pestañas — 14-sep-2026 ---------------- Pegada arriba mientras se baja: en una lámina larga —la de Crédito lo es— perder la barra obliga a subir hasta el techo para cambiar de pestaña, y en un celular eso son tres gestos para un toque. */ .tabs{position:sticky;top:0;z-index:20;display:flex;gap:4px;padding:10px 0; margin-bottom:var(--e2);background:var(--fondo); overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{flex:1 0 auto;min-width:78px;padding:11px 12px;border:1px solid var(--linea); border-radius:12px;background:var(--papel);color:var(--gris); font:inherit;font-size:14px;font-weight:600;cursor:pointer; -webkit-tap-highlight-color:transparent} .tab.on{background:var(--laca);color:var(--blanco-laca);border-color:var(--laca)} .tab:active{transform:scale(.97)} /* ---------------- los tres canales del chat ---------------- No son tres chats por capricho: el de cobranzas lo lee quien cobra y el de créditos quien presta. Se ven los tres a la vez, nunca en un desplegable: un canal escondido es un canal que no existe. */ .canales{display:flex;gap:6px;flex-wrap:wrap} .canal{flex:1 1 auto;padding:10px 12px;border:1px solid var(--linea);border-radius:12px; background:var(--papel);color:var(--gris);font:inherit;font-size:13.5px; font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent} .canal.on{background:var(--azul-tinte);color:var(--azul-texto);border-color:var(--azul-texto)} /* El cuadro de texto del chat, con la misma piel que los demás campos. */ textarea{width:100%;padding:14px;border:1px solid var(--linea);border-radius:14px; background:var(--papel);color:var(--tinta);font:inherit;font-size:16px; line-height:1.5;resize:vertical;min-height:84px} textarea:focus{outline:2px solid var(--azul-texto);outline-offset:1px} /* ---------------- lo que se gana pagando ---------------- Joan lo pidió como «un cuadro o una imagen». No es una imagen: son las mismas cifras del motor con una barra por cuota, así que no se puede quedar vieja. La barra crece con lo ACUMULADO, no con lo de cada mes: lo que la persona quiere ver es adónde llega, no seis palitos iguales. */ .gana{margin-top:var(--e4);padding:16px;border-radius:14px;background:var(--fondo); border:1px solid var(--linea)} .gana .barras{display:flex;align-items:flex-end;gap:6px;height:76px;margin-top:var(--e3)} .gana .tramo{flex:1;display:flex;flex-direction:column;justify-content:flex-end; align-items:center;height:100%;gap:5px} .gana .tramo i{display:block;width:100%;border-radius:5px 5px 2px 2px; background:var(--amarillo);min-height:6px} .gana .tramo span{font-size:10.5px;color:var(--gris);font-variant-numeric:tabular-nums} /* ---------------- respeto por quien no quiere movimiento ---------------- No es un detalle de accesibilidad: hay gente a la que una animación de estas le produce mareo o le dispara una migraña, y el sistema operativo ya trae la respuesta puesta. Se le hace caso. */ @media (prefers-reduced-motion: reduce){ .btn.arriba::after{animation:none;display:none} .btn,.btn:active{transition:none;transform:none} #rayos{display:none} .plegable > summary::after{transition:none} .tab:active{transform:none} } /* 22-sep-2026 — el CSS de la ruleta se fue con la ruleta. Lo que sigue abajo son las reglas acotadas a .ruleta-card, que se quedan porque son las que impiden que .escalon del recorrido herede lo que no es suyo. */ /* 16-sep-2026 — ESTAS CINCO REGLAS ESTABAN SIN ACOTAR Y SE COMIAN LA ESCALERA DEL RECORRIDO, que usa la MISMA clase .escalon doscientas lineas mas arriba. No es teoria: medido en el navegador el 16-sep, en la puerta publica. Dos danos, y el segundo es el caro: · La tarjeta «Hasta donde se puede llegar» dejaba de apilar titulo, cifra y explicacion —le llegaba display:flex— y salia en cuatro columnas estrujadas, con la barrita verde estirada. · `.escalon span` (0,1,1) le ganaba a `.ej-sello` (0,1,0), asi que el SELLO DE EJEMPLO de cada escalon quedaba en blanco roto al 72% sobre papel blanco: invisible. Y hay una prueba dedicada a que ese sello sea legible —«un descargo ilegible no descarga nada»— que no lo vio porque lee el TEXTO de la regla de .ej-sello, no el color que de verdad se aplica. Y ademas venian vestidas de laca (--blanco-laca) mientras .ruleta-card es de papel, asi que su propia escalera tambien estaba casi invisible. Se acotan y se pasan a la paleta de papel. Vino del commit 9521981, del 15-sep. */ .ruleta-card .escalon{display:flex;align-items:flex-start;gap:var(--e3); padding:var(--e3) 0;border:0;border-top:1px solid var(--linea);border-radius:0; background:transparent} .ruleta-card .escalon b{flex:0 0 auto;min-width:88px;font-variant-numeric:tabular-nums; font-size:15px;font-weight:700;color:var(--gris)} .ruleta-card .escalon.hoy b{color:var(--amarillo-tinta)} .ruleta-card .escalon span{display:flex;flex-direction:column;gap:2px;font-size:13px; line-height:1.5;color:var(--gris)} .ruleta-card .escalon span i{font-style:normal;font-weight:600;color:var(--tinta)} /* =========================================================================== LA CUOTA EN EL PIE, Y LAS CUOTAS PLEGADAS — 16-sep-2026 Joan pidió que lo que RECIBE fuera la cifra grande y el costo quedara chico y abajo. La cuota no es el costo: es con lo que una persona decide si puede o no. Así que no baja a renglón — se queda en el pie de la cifra grande, en negrita y a 16 px, que es donde se lee sin buscarla. ========================================================================= */ .pie-cuota{font-size:16px;font-weight:700;color:var(--blanco-laca); font-variant-numeric:tabular-nums} .card:not(.laca) .pie-cuota{color:var(--tinta)} /* 17-sep-2026 — LA ETIQUETA DE LA CIFRA GRANDE ERA INVISIBLE FUERA DE LA LACA, y llevaba así desde el 15-sep. `.etq-cifra` nació para la calculadora de arriba, que es de laca, y se pintó en blanco roto al 70%. La calculadora del credito con garantia usa la MISMA clase y es de papel: «Pagarias cada mes» salia blanco sobre blanco, contraste 1,01 a 1. Medido en el navegador. Es el mismo defecto que se acaba de arreglar en .escalon y tiene la misma causa: una clase pensada para un material, reutilizada en el otro. Cuando aparezca una tercera, la regla es esta: todo color pensado para laca necesita su pareja en `.card:not(.laca)`, como ya la tienen .granTotal y .pie-cuota. */ .card:not(.laca) .etq-cifra{color:var(--gris)} /* El plan de pago, plegado. Mismo
de la historia y del recorrido, con otra piel: dentro de la laca un recuadro de papel sería un parche blanco en mitad de la tarjeta oscura. Va DESPUÉS de .plegable en el archivo a propósito: es quien la pisa. */ .det-cuotas{margin-top:var(--e4);background:transparent; border:1px solid color-mix(in srgb, var(--luz) 15%, transparent)} .det-cuotas > summary{padding:13px 14px;font-size:12px;font-weight:700; text-transform:uppercase;letter-spacing:.1em; color:color-mix(in srgb, var(--blanco-laca) 74%, transparent)} .det-cuotas > summary::after{color:color-mix(in srgb, var(--blanco-laca) 74%, transparent)} .det-cuotas .adentro{padding:0 14px 4px;font-size:14px} /* 17-sep-2026 — EL ANILLO DE FOCO CABE HACIA ADENTRO, o no se ve. `.plegable` lleva overflow:hidden para redondear sus esquinas, y eso le recorta al el anillo de foco, que la hoja dibuja 2 px POR FUERA. Con el plan de pago plegado, ese pasó a ser el primer control al que llega el tabulador en la puerta pública: quien navega con teclado no veía dónde estaba parado. Se dibuja hacia adentro en vez de quitar el recorte, que es lo que redondea las esquinas de la historia y del recorrido. */ .plegable > summary:focus-visible{outline-offset:-3px} .card:not(.laca) .det-cuotas{background:var(--fondo);border-color:var(--linea)} .card:not(.laca) .det-cuotas > summary, .card:not(.laca) .det-cuotas > summary::after{color:var(--gris)} /* =========================================================================== LA PLATA QUE CAE — 16-sep-2026 Joan pidió «el celular con los pesos aprobados que se convierte en el saldo de Nequi». Lo que se puede dibujar de eso sin mentir es el desembolso: plata cayendo hacia la cifra de la calculadora. No dice «aprobado» —la aprobación la da una persona por WhatsApp—, no lleva ninguna cifra propia —la única de la portada es la de abajo, la que sigue al deslizador— y no se viste de ninguna marca ajena. VA EN AMARILLO PORQUE VIVE DENTRO DE LA LACA. La ley de la paleta de esta casa es esa: el amarillo solo sobre laca. Y las mezclas van contra `transparent` y no contra un color fijo, para que la placa se siga viendo por debajo — que es lo que hace que la plata parezca caer SOBRE la tarjeta y no pintada encima. ========================================================================= */ .vj{display:block;width:100%;height:auto;margin:var(--e3) 0 -6px;pointer-events:none} .vj-billete{fill:color-mix(in srgb, var(--amarillo) 20%, transparent); stroke:color-mix(in srgb, var(--amarillo) 55%, transparent);stroke-width:1.5} .vj-moneda{fill:color-mix(in srgb, var(--amarillo) 30%, transparent); stroke:color-mix(in srgb, var(--amarillo) 55%, transparent);stroke-width:1.5} .vj-raya{fill:none;stroke:color-mix(in srgb, var(--amarillo) 45%, transparent); stroke-width:2;stroke-linecap:round} .vj-sello{fill:none;stroke:color-mix(in srgb, var(--amarillo) 50%, transparent); stroke-width:1.5} /* Seis segundos, la misma cadencia que el brillo del botón y por el mismo motivo: el movimiento ocupa la cuarta parte del ciclo y el resto es quietud. Un adorno que pulsa sin parar al lado de una cifra de plata cansa, y en una app de crédito parece un anuncio. Los retardos están escalonados para que las cuatro piezas caigan como caen las cosas: no todas a la vez. */ /* 17-sep-2026 — CAE UNA VEZ Y SE QUEDA. Antes era un ciclo infinito de seis segundos y las cuatro piezas se desvanecian al final de cada vuelta: la tarjeta pasaba MAS DE LA MITAD del tiempo con una franja vacia de 88 px entre el gancho y la cifra. Eso no se lee como un adorno que descansa, se lee como una imagen que no cargo. Ahora la plata entra al abrir la pagina y se queda puesta, que ademas es exactamente el fotograma que ve quien pidio menos movimiento: la misma escena, sin dos versiones que mantener. Y de paso se apagan cuatro animaciones infinitas en un telefono de gama baja. `backwards` es obligatorio: sin el, las piezas se pintan en su sitio de reposo durante el primer fotograma y despues saltan arriba para caer. */ .vj-cae{animation:tgcae 1.5s cubic-bezier(.2,.75,.3,1) backwards} .vj-cae-b{animation-delay:.22s} .vj-cae-c{animation-delay:.4s} .vj-cae-d{animation-delay:.62s} /* =========================================================================== LA GENTE, DIBUJADA — 16-sep-2026 Joan pidió «imágenes de gente feliz». No hay fotos y no se pueden generar acá, así que la gente se dibuja: SVG en línea, cero archivos, cero red, nada que una segunda petición pueda dejar a medias. Por qué no hay color de piel. Elegir un tono es elegir a quién se parece el cliente de Tu Garantía, y el cliente de Tu Garantía es cualquiera. Las personas se dibujan con la MISMA tinta de la página en cuatro intensidades, y lo distinto entre ellas sale de la gorra, la cola de caballo, el celular y la bolsa del mercado — no del tono. Efecto secundario que sí importa: en modo oscuro el dibujo se invierte solo, porque --tinta se invierte sola. Las mezclas van contra --papel y NO contra transparent: con fondos translúcidos, el cuello debajo de la barbilla y el brazo sobre el torso se suman y sale una mancha más oscura en cada cruce. ========================================================================= */ .gente{display:grid;gap:18px;margin-top:var(--e4)} .gente-fila{display:flex;align-items:center;gap:14px} .gente-dicho{min-width:0} .gente-dicho b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em; line-height:1.25} .gente-dicho span{display:block;font-size:13px;color:var(--gris);line-height:1.5; margin-top:4px} .gente-nota{font-size:12px;line-height:1.5;margin:var(--e3) 0 0} /* 88 px y no más: a este tamaño la cara todavía se lee en un teléfono de 360 px y le deja 186 al texto, que es lo que manda. El clip-path redondea la placa y recorta el torso, que se dibuja a propósito hasta el borde de abajo para que la persona no parezca flotando. Se hace acá y no con un clipPath dentro del SVG porque un clipPath necesita un id, y tres ids fijos en una página que se repinta entera son tres colisiones esperando. */ .gente-esc{flex:0 0 auto;width:88px;height:88px;display:block; clip-path:inset(2.1% round 25%)} .gente-esc .g-fondo{fill:var(--fondo)} .gente-esc .g-piel{fill:color-mix(in srgb, var(--tinta) 14%, var(--papel))} .gente-esc .g-r1{fill:color-mix(in srgb, var(--tinta) 27%, var(--papel))} .gente-esc .g-r2{fill:color-mix(in srgb, var(--tinta) 44%, var(--papel))} .gente-esc .g-r3{fill:color-mix(in srgb, var(--tinta) 68%, var(--papel))} /* El filete de tinta es lo que separa esto de un icono de banco de imágenes: sin él las siluetas se pegan entre sí y el dibujo se lee como pictograma. */ .gente-esc .g-piel,.gente-esc .g-r1,.gente-esc .g-r2,.gente-esc .g-r3{ stroke:color-mix(in srgb, var(--tinta) 30%, transparent);stroke-width:1.1; stroke-linejoin:round} .gente-esc .g-brazo{fill:none;stroke:color-mix(in srgb, var(--tinta) 68%, var(--papel)); stroke-width:8;stroke-linecap:round;stroke-linejoin:round} .gente-esc .g-brazo.g-claro{stroke:color-mix(in srgb, var(--tinta) 27%, var(--papel))} .gente-esc .g-hilo{fill:none;stroke:color-mix(in srgb, var(--tinta) 45%, transparent); stroke-width:2.2;stroke-linecap:round} .gente-esc .g-fac{fill:none;stroke:color-mix(in srgb, var(--tinta) 82%, transparent); stroke-width:1.9;stroke-linecap:round} /* --amarillo-tinta y no --amarillo: el amarillo solo va sobre laca y esta tarjeta es de papel. Es el mismo cambio que ya hace .granTotal fuera de laca. */ .gente-esc .g-oro{fill:var(--amarillo-tinta)} .gente-esc .g-pant{fill:color-mix(in srgb, var(--amarillo-tinta) 30%, var(--papel)); stroke:color-mix(in srgb, var(--tinta) 22%, transparent);stroke-width:1} /* transform-box:fill-box para que transform-origin cuente desde la caja del dibujo y no desde el origen del lienzo: sin esto la bolsa se mece alrededor de la esquina de arriba a la izquierda y sale volando. */ .gente-esc .g-vive,.gente-esc .g-pant,.gente-esc .g-envio, .gente-esc .g-perilla,.gente-esc .g-bolsa{transform-box:fill-box} .gente-esc .g-vive{transform-origin:50% 100%;animation:gente-respira 5.2s ease-in-out infinite} /* Duraciones distintas y desfase negativo: si las tres respiran a la vez se ve una máquina, no tres personas. Negativo para que arranquen ya separadas y no haya que esperar seis segundos a que se desincronicen. */ .gente-fila:nth-child(2) .g-vive{animation-duration:6.1s;animation-delay:-1.4s} .gente-fila:nth-child(3) .g-vive{animation-duration:5.6s;animation-delay:-2.9s} .gente-esc .g-pant{animation:gente-luz 4.4s ease-in-out infinite} .gente-esc .g-envio{animation:gente-sale 4.4s ease-in-out infinite} .gente-esc .g-perilla{animation:gente-elige 6.4s ease-in-out infinite} .gente-esc .g-bolsa{transform-origin:50% 3%;animation:gente-mece 4.8s ease-in-out infinite} /* --------------------------------------------------------------------------- LAS SEIS ANIMACIONES NUEVAS VAN AQUÍ, AL FINAL, CADA UNA EN VARIAS LÍNEAS Y CON SU LLAVE DE CIERRE EN LA COLUMNA 0. No es estilo: es lo que las deja VIGILADAS. El barrido de pruebas/vitrina.test.js («no se anima nada que obligue a recalcular la página») corta cada bloque en la primera llave que encuentre a principio de línea, y el bloque de `brillo` —escrito en una sola línea allá arriba— se traga todo lo que haya entre él y el cierre del bloque de quietud. Cualquier animación escrita en medio de la hoja queda DENTRO de ese corte y pasa aprobada sin que nadie la mire. Acá sí se comprueba. Y por lo mismo: cuidado con nombrar la arroba de una animación dentro de un comentario, que abre un bloque falso y se come el de abajo. Solo transform y opacity, que es lo que esa prueba exige: mover geometría obliga al navegador a recalcular la página entera en cada fotograma, y en un teléfono de gama baja eso se siente. ------------------------------------------------------------------------- */ @keyframes tgcae{ 0%{opacity:0;transform:translateY(-44px)} 35%{opacity:1;transform:translateY(-16px)} 100%{opacity:1;transform:translateY(0)} } @keyframes gente-respira{ 0%,100%{transform:translateY(0) scaleY(1)} 50%{transform:translateY(-1.1px) scaleY(1.009)} } @keyframes gente-luz{ 0%,66%,100%{opacity:1} 80%{opacity:.4} } @keyframes gente-sale{ 0%,6%{opacity:0;transform:translateY(7px)} 24%,60%{opacity:1;transform:translateY(0)} 82%,100%{opacity:0;transform:translateY(-9px)} } @keyframes gente-elige{ 0%,100%{transform:translateX(-9px)} 50%{transform:translateX(9px)} } @keyframes gente-mece{ 0%,100%{transform:rotate(-3.5deg)} 50%{transform:rotate(3.5deg)} } /* --------------------------------------------------------------------------- QUIETUD, SIN PERDER NADA — y en un bloque APARTE, al final. Dos razones medidas. Una: una regla de medios no suma especificidad, así que lo de arriba le ganaría a un `animation:none` escrito veinte líneas antes; tiene que ir después o no apaga nada. Dos: pruebas/rayo.test.js toma el PRIMER bloque de quietud del archivo y exige encontrar #rayos adentro — uno nuevo metido en medio cortaría ese bloque y tumbaría la prueba. Al final no lo toca. Y apagar no significa enseñar menos: las cuatro piezas de plata se quedan a la vista en su sitio de reposo, y la gente en su fotograma quieto. Es la misma escena, congelada, no una versión pobre. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .vj-cae{animation:none} .gente-esc .g-vive,.gente-esc .g-pant,.gente-esc .g-envio, .gente-esc .g-perilla,.gente-esc .g-bolsa{animation:none} } /* --------------------------------------------------------------------------- /* --------------------------------------------------------------------------- EL ESCÁNER SE MUDÓ AL HTML — 21-sep-2026 (noche), y es una lección cara. Sus reglas vivían aquí. El 21-sep la primera clienta de verdad vio «una foto normal» y su cédula salió EN ESPEJO: su teléfono recibió el HTML y el JS de ese día pero esta hoja con la copia del 18, porque el CSS solo pasó a red-primero en la v77 y el service worker que decidía en su carga era el anterior. Sin las reglas del escáner mandaron las de base —caja 3:4 y scaleX(-1)— y de paso el recorte dejó el código de barras a 2 px por módulo, así que tampoco se autollenó nada. Subir el número de caché NO arregla esa visita: arregla la SEGUNDA. Cualquiera a quien ya se le hubiera mandado el enlace tenía una visita rota pendiente. Por eso el CSS del escáner vive ahora en el