/* Hoja compartida de la Tarjeta VIP. Los colores llegan por variables (--marca, --tinta) desde /api/config;
   el resto es el sistema: blanco, tipografía sans espaciada para el logotipo, serif para titulares, formas orgánicas. */
:root{--marca:#1F1A1D;--tinta:#1F1A1D;--sobre-marca:#FFFFFF;--marca-texto:var(--marca);--gris:#6B6367;--linea:#E8E2E5;--crema:#FCEBDD;--wa:#25D366;--fondo:#FFFFFF}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.marca{margin:0;background:var(--fondo);color:var(--tinta);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  padding:max(16px,env(safe-area-inset-top)) 16px 40px;max-width:520px;margin:auto;position:relative;z-index:0;overflow-x:hidden}
/* formas orgánicas de la marca, detrás de todo */
body.marca::before,body.marca::after{content:"";position:fixed;z-index:-1;pointer-events:none;opacity:.10;background:var(--marca);
  -webkit-mask:url("/formas.svg") no-repeat center/contain;mask:url("/formas.svg") no-repeat center/contain}
body.marca::before{width:min(62vw,360px);height:min(62vw,360px);top:calc(-.22 * min(62vw,360px));left:calc(-.36 * min(62vw,360px));transform:rotate(-12deg)}
body.marca::after{width:min(70vw,420px);height:min(70vw,420px);bottom:calc(-.26 * min(70vw,420px));right:calc(-.34 * min(70vw,420px));transform:rotate(38deg)}
.logo{font-weight:800;letter-spacing:.34em;color:var(--marca-texto);font-size:20px;text-align:center;text-transform:uppercase;padding-left:.34em}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:30px;line-height:1.15;text-align:center;margin:18px 0 6px;letter-spacing:-.01em}
p.s{color:var(--gris);text-align:center;margin:0 0 20px;font-size:15px}
label{display:block;font-size:14px;color:var(--gris);margin:12px 0 4px}
input,textarea,select{width:100%;font:inherit;font-size:18px;padding:14px;border:1.5px solid var(--linea);border-radius:14px;background:#fff;color:var(--tinta)}
input:focus,textarea:focus{outline:none;border-color:var(--marca)}
.chk{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px;color:var(--gris)}.chk span.t{flex:1}.chk input{margin-top:2px;width:22px;height:22px;accent-color:var(--marca)}
.chk a{color:var(--marca-texto)}
.btn{display:block;width:100%;margin-top:14px;padding:16px;border-radius:999px;border:0;font:inherit;font-size:17px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer;color:var(--sobre-marca,#fff);background:var(--marca)}
.btn.p{background:var(--marca);color:var(--sobre-marca,#fff)}
.btn.s{background:#fff;color:var(--tinta);border:1.5px solid var(--tinta);font-weight:600}
.btn.wa{background:var(--wa);color:var(--tinta)}
.btn.chico{width:auto;display:inline-block;padding:8px 14px;font-size:14px;margin:6px 0 0}
.btn:disabled{opacity:.45;cursor:default}
.msg{margin-top:12px;font-size:14px;color:var(--gris);text-align:center}.msg.err{color:#B00020}.msg.ok{color:#137333}
.nota{font-size:13px;color:var(--gris);text-align:center;margin-top:16px}.nota a{color:var(--gris)}
.hide{display:none!important}
/* la tarjeta */
.card{background:#fff;border:2px solid var(--marca);border-radius:24px;padding:26px 22px 20px;text-align:center;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;right:-60px;bottom:-70px;width:180px;height:180px;background:var(--marca);opacity:.12;
  -webkit-mask:url("/formas.svg") no-repeat center/contain;mask:url("/formas.svg") no-repeat center/contain;transform:rotate(20deg);pointer-events:none}
.card .l1,.card .l3{font-family:Georgia,"Times New Roman",serif;font-size:26px}
.card .monto{font-family:Georgia,"Times New Roman",serif;font-size:88px;line-height:1;margin:2px 0;letter-spacing:-.03em;color:var(--marca-texto)}
.card .l4{color:var(--gris);margin-top:6px}
.card hr{border:0;border-top:1px solid var(--linea);margin:18px 0 14px}
.card .cond{font-size:14px;color:var(--gris)}
.card .cod-l{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);margin-top:16px}
.card .cod{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:28px;letter-spacing:.08em;margin-top:2px}
.card.usado{border-color:var(--linea)}.card.usado .monto{font-size:40px;color:var(--gris)}
/* Temas de página (tiendas.tema): fondo y logotipo. El detalle de la tarjeta está en src/tarjeta.js (TEMAS).
   «tarjeta» es el del producto; «clasica» = formas orgánicas de la primera versión (no lleva reglas). */
body.tema-tarjeta::before,body.tema-tarjeta::after,body.tema-editorial::before,body.tema-editorial::after,body.tema-etiqueta::before,body.tema-etiqueta::after{display:none}
body.tema-tarjeta{background:#F4F2F0}
body.tema-tarjeta .logo{color:var(--tinta);font-size:16px}
body.tema-editorial{background:#FAF8F6}
body.tema-editorial .logo{font-family:Georgia,serif;font-weight:400;letter-spacing:.28em;color:var(--tinta);font-size:18px}
body.tema-etiqueta{background:color-mix(in srgb,var(--marca) 8%,#FFFBF7)}
body.tema-etiqueta .logo{font-family:Georgia,serif;font-weight:400;font-style:italic;letter-spacing:.08em;text-transform:none;font-size:26px;color:var(--tinta);padding:0}
/* bloque blanco para formularios sobre los fondos de tema */
.hoja{background:#fff;border-radius:22px;padding:6px 18px 20px;margin-top:16px;box-shadow:0 1px 2px #0000000a}
body.tema-clasica .hoja{background:none;box-shadow:none;padding:0}