/* Tarjeta digital (plantilla única). Los colores y la tipografía vienen del diseño de cada negocio
   como variables: --td-fondo, --td-texto, --td-acento, --td-lleno, --td-vacio, --td-fuente. */
.td,.td *,.td *::before,.td *::after,.tdp *,.tdp *::before,.tdp *::after{box-sizing:border-box}
.td{position:relative;width:100%;max-width:420px;margin:0 auto;padding:22px 22px 18px;border-radius:26px;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;gap:12px;color:var(--td-texto);background:var(--td-fondo);font-family:var(--td-fuente);
  box-shadow:0 28px 56px -26px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.12)}
.td.con-fondo::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--td-imagen) center/cover no-repeat}
.td.con-fondo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--td-fondo) 88%,transparent),color-mix(in srgb,var(--td-fondo) 70%,transparent) 45%,color-mix(in srgb,var(--td-fondo) 92%,transparent))}
.td *{margin:0}
.td-cab{display:flex;align-items:center;gap:12px;min-height:52px}
.td-logo{flex:none;width:52px;height:52px;border-radius:14px;object-fit:cover;background:#fff}
.td-negocio{font:800 clamp(22px,6vw,28px)/1.05 var(--td-fuente);letter-spacing:-.02em;overflow-wrap:anywhere}
.td-cliente{margin-top:6px;font:700 19px/1.2 var(--td-fuente);overflow-wrap:anywhere}
.td-progreso{font-size:15px;font-weight:500;opacity:.88;font-family:system-ui,sans-serif}
.td-barra{height:8px;border-radius:99px;background:color-mix(in srgb,var(--td-texto) 18%,transparent);overflow:hidden}
.td-barra span{display:block;height:100%;border-radius:inherit;background:var(--td-acento);transition:width .6s cubic-bezier(.22,1,.36,1)}
.td-sellos{display:grid;grid-template-columns:repeat(var(--td-cols),1fr);gap:8px;margin:4px 0 2px}
.td-sello{display:block;aspect-ratio:1}
.td-sello svg{display:block;width:100%;height:100%;overflow:visible}
.td-sello svg>circle,.td-sello svg>path:first-child{fill:transparent;stroke:var(--td-vacio);stroke-opacity:.55;stroke-width:2.2;stroke-dasharray:4 3.4}
.td-sello.lleno svg>circle,.td-sello.lleno svg>path:first-child{fill:var(--td-lleno);stroke:var(--td-lleno);stroke-opacity:1;stroke-dasharray:none}
.td-sello.con-logo{border-radius:50%;border:2px dashed color-mix(in srgb,var(--td-vacio) 55%,transparent);overflow:hidden}
.td-sello.con-logo.lleno{border:2px solid var(--td-lleno);background:#fff}
.td-sello.con-logo img{display:block;width:100%;height:100%;object-fit:cover}
.td-sello.recien{animation:td-sellar .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes td-sellar{0%{transform:scale(1.9) rotate(-20deg);opacity:0}60%{opacity:1}100%{transform:none}}
.td-premio{display:grid;gap:2px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--td-texto) 12%,transparent)}
.td-premio strong{font:700 16px/1.25 var(--td-fuente)}
.td-premio span{font-size:14px;opacity:.85;font-family:system-ui,sans-serif}
.td-felicidades{display:grid;gap:4px;padding:16px;border-radius:18px;text-align:center;color:#000;background:var(--td-acento);
  animation:td-aparecer .45s cubic-bezier(.22,1,.36,1) both}
.td-mensaje{font:800 21px/1.15 var(--td-fuente)}
.td-desbloqueo{font-weight:700;font-size:16px}
.td-instruccion{font-size:14px;opacity:.8}
@keyframes td-aparecer{from{opacity:0;transform:translateY(8px) scale(.97)}}
.td.completa{box-shadow:0 0 0 4px var(--td-acento),0 28px 56px -26px rgba(0,0,0,.55)}
.td-qr{display:flex;align-items:center;gap:14px;margin-top:4px;padding:12px;border-radius:16px;background:#fff;color:#111}
.td-qr-caja{flex:none;width:104px;height:104px}
.td-qr-caja svg{display:block;width:100%;height:100%}
.td-qr-texto{display:grid;gap:4px;font:500 14px/1.3 system-ui,sans-serif}
.td-qr-texto b{font:700 18px ui-monospace,Consolas,monospace;letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){.td *{animation:none!important;transition:none!important}}

/* ---------- página pública de la tarjeta ---------- */
.tdp [hidden]{display:none!important}
.tdp{margin:0;min-height:100dvh;overflow-x:hidden;background:#F2F3F1;color:#102A1A;font:16px/1.5 "Figtree",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.tdp main{max-width:460px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(28px + env(safe-area-inset-bottom,0px))}
.tdp-acciones{display:grid;gap:10px;margin-top:20px}
.tdp-agregar{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 20px;border:0;border-radius:16px;cursor:pointer;
  font:800 17px/1.1 "Figtree",system-ui,sans-serif;letter-spacing:.01em;color:#fff;background:#000;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.tdp-agregar svg{width:22px;height:22px;flex:none}
.tdp-agregar:active{transform:scale(.98)}
.tdp-secundario{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:15px}
.tdp-secundario a,.tdp-secundario button{font:600 15px "Figtree",system-ui,sans-serif;color:#102A1A;background:none;border:0;padding:6px 2px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tdp-estado{margin:14px 0 0;text-align:center;font-size:13px;color:#55605A}
.tdp-error{max-width:380px;margin:18vh auto 0;text-align:center}
.tdp-error h1{font:800 24px/1.2 "Figtree",system-ui,sans-serif;margin:0 0 8px}
.tdp-cargando{height:520px;max-width:420px;margin:0 auto;border-radius:26px;background:linear-gradient(90deg,#e6e8e5,#f1f2f0,#e6e8e5);background-size:200% 100%;animation:tdp-brillo 1.2s linear infinite}
@keyframes tdp-brillo{to{background-position:-200% 0}}

/* hoja «Agregar al inicio» */
.tdp-hoja{position:fixed;inset:auto 0 0 0;width:100%;max-width:460px;max-height:92dvh;margin:0 auto;padding:0;border:0;border-radius:24px 24px 0 0;overflow:auto;
  overscroll-behavior:contain;color:#102A1A;background:#fff;font:15px/1.45 "Figtree",system-ui,sans-serif}
.tdp-hoja[open]{animation:tdp-subir .32s cubic-bezier(.22,1,.36,1)}
.tdp-hoja::backdrop{background:rgba(0,0,0,.5)}
@keyframes tdp-subir{from{transform:translateY(40px);opacity:0}}
@media (min-width:640px){.tdp-hoja{inset:0;margin:auto;height:fit-content;border-radius:24px}}
.tdp-hoja-in{padding:20px 18px 0}
.tdp-hoja h2{margin:0 0 4px;font:800 22px/1.15 "Figtree",system-ui,sans-serif;letter-spacing:-.01em}
.tdp-hoja .intro{margin:0 0 12px;color:#4B6152}
.tdp-beneficios{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.tdp-beneficios li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;font-weight:600}
.tdp-beneficios i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#E6F2E2;color:#156709;font-style:normal;font-size:17px}
.tdp-so{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;margin:0 0 14px;border-radius:14px;background:#F2F3F1}
.tdp-so button{min-height:42px;border:0;border-radius:11px;font:700 15px "Figtree",system-ui,sans-serif;color:#4B6152;background:none;cursor:pointer}
.tdp-so button:focus-visible,.tdp-cerrar:focus-visible,.tdp-instalar:focus-visible{outline:2px solid #000;outline-offset:2px}
.tdp-hoja h2:focus{outline:none}
.tdp-so button[aria-pressed=true]{color:#000;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.tdp-pasos{margin:0;padding:0;list-style:none;counter-reset:p;display:grid;gap:10px}
.tdp-pasos li{counter-increment:p;display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start}
.tdp-pasos li::before{content:counter(p);width:26px;height:26px;font-size:14px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:#000}
.tdp-pasos b{font-weight:700}
.tdp-icono{display:inline-block;width:20px;height:20px;vertical-align:-4px;margin:0 2px}
.tdp-aviso{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:#FFF6D6;color:#4a3800;font-size:15px}
.tdp-instalar{width:100%;min-height:54px;margin:0 0 14px;border:0;border-radius:14px;font:800 17px "Figtree",system-ui,sans-serif;color:#fff;background:#156709;cursor:pointer}
.tdp-nota{margin:12px 0 0;font-size:13.5px;color:#55605A}
.tdp-hoja-pie{position:sticky;bottom:0;margin:12px -18px 0;padding:10px 18px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,#fff 14px)}
.tdp-cerrar{width:100%;min-height:48px;border:1px solid #d6dbd6;border-radius:14px;font:700 16px "Figtree",system-ui,sans-serif;background:#fff;color:#102A1A;cursor:pointer}
.tdp-toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:9;padding:12px 18px;border-radius:12px;
  background:#000;color:#fff;font-weight:600;font-size:15px;box-shadow:0 12px 28px -8px rgba(0,0,0,.4)}