/*
 * Fondos de la tarjeta, compartidos por la home, el estudio del panel y la app del cliente.
 * Estilo: f-grad (por defecto), f-liso, f-malla, f-img. Textura encima: t-puntos, t-rayas,
 * t-cuadros, t-ondas, t-confeti. Las texturas usan el color del texto (currentColor),
 * así se ven bien sobre fondos claros y oscuros. Cargar después del resto de estilos.
 */
.fondo{--tex:none;background:var(--tex),linear-gradient(var(--ang,145deg),var(--c1),var(--c2))}
.fondo.f-liso{background:var(--tex),var(--c1)}
.fondo.f-malla{background:var(--tex),radial-gradient(circle at 12% 8%,var(--c2),transparent 55%),radial-gradient(circle at 96% 96%,color-mix(in srgb,var(--c2) 60%,#fff),transparent 48%),radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--c1) 70%,#000),transparent 45%),var(--c1)}
.fondo.f-img{background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,.22) 45%,rgba(0,0,0,.62)),var(--bgimg) center/cover,var(--c1)}
/* Los fondos dibujados de las plantillas ya son oscuros: velo mucho más suave */
.fondo.f-img.f-dib{background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.04) 45%,rgba(0,0,0,.4)),var(--bgimg) center/cover,var(--c1)}
.fondo.t-puntos{--tex:radial-gradient(color-mix(in srgb,currentColor 22%,transparent) 1.6px,transparent 1.8px) 0 0/14px 14px}
.fondo.t-rayas{--tex:repeating-linear-gradient(-45deg,color-mix(in srgb,currentColor 12%,transparent) 0 3px,transparent 3px 14px)}
.fondo.t-cuadros{--tex:linear-gradient(color-mix(in srgb,currentColor 12%,transparent) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,color-mix(in srgb,currentColor 12%,transparent) 1px,transparent 1px) 0 0/20px 20px}
.fondo.t-ondas{--tex:radial-gradient(circle at 50% 0,transparent 9px,color-mix(in srgb,currentColor 14%,transparent) 10px 11.5px,transparent 12.5px) 0 0/24px 14px}
.fondo.t-confeti{--tex:radial-gradient(circle,color-mix(in srgb,var(--c2) 85%,#fff) 2.5px,transparent 3px) 6px 9px/46px 46px,radial-gradient(circle,color-mix(in srgb,currentColor 25%,transparent) 2px,transparent 2.5px) 29px 31px/46px 46px,radial-gradient(circle,rgba(255,255,255,.55) 1.8px,transparent 2.3px) 34px 6px/46px 46px}

/* Botones para elegir fondo y textura (muestra pequeña de cada uno) */
.fondos-op{display:flex;flex-wrap:wrap;gap:8px}
.fondos-op button{width:46px;height:46px;border-radius:12px;border:2px solid transparent;cursor:pointer;color:#0a0a0a;position:relative;outline:1px solid rgba(255,255,255,.14);transition:transform .15s,border-color .15s}
.fondos-op button:hover{transform:translateY(-2px)}
.fondos-op button.on{border-color:#d4ff3a}
.fondos-op button span{position:absolute;inset:auto 0 -20px;font-size:10.5px;color:#9b9ba4;white-space:nowrap;text-align:center}
.fondos-op{padding-bottom:20px}

/* Dibujos de tampón dentro de los sellos (assets/js/iconos.js cambia el emoji por ellos) */
.sello-img{width:64%;height:64%;object-fit:contain;display:block;margin:auto;pointer-events:none}
.st.on .sello-img[src*="sello-"],.ap-sellos i.on .sello-img[src*="sello-"]{filter:var(--sello-filtro,none)}
/* Icono propio en lugar del emoji con que empieza un botón o una etiqueta */
.ic-ini{width:1.3em;height:1.3em;object-fit:contain;vertical-align:-.28em;display:inline-block}
/* Emoji de cualquier texto cambiado por su icono propio */
img.emo{height:1.25em;width:auto;max-width:none;vertical-align:-.28em;display:inline-block;margin:0 .05em}
/* Cuando el icono ocupa solo una casilla de icono (lista de premios, notificaciones…), más grande */
.rw .ic img.emo,.notif .ic img.emo,.ni img.emo,.ico img.emo{height:78%;max-height:2.4em;width:auto;margin:0;vertical-align:middle}
.st .mid img.emo{height:1.6em}
.st>img.emo,.ap-sellos i>img.emo,.pass .lg>img.emo{width:64%;height:64%;object-fit:contain;display:block;margin:auto;vertical-align:middle;pointer-events:none}
/* El premio va en una casilla con borde: un poco más grande para que pese igual que los sellos */
.st>img[src*="ui-premio"],.ap-sellos i>img[src*="ui-premio"],i.reg>img[src*="ui-premio"]{width:80%;height:80%;object-fit:contain;display:block;margin:auto}

/* Marcas pintadas desde el CSS (listas con ✓, desplegables con +, flecha del menú): también iconos propios */
.acc-ventajas li::before,.hero .trust span::before,.fmt li::before,.plan li::before,.todo span.ok::before,.summary li::before,.plan-c li::before{content:"";display:inline-block;width:1.2em;height:1.2em;background:url(../img/iconos/ui-ok.webp) center/contain no-repeat;vertical-align:-.25em}
.s-reglas li::before{content:"";background:url(../img/iconos/ui-ok.webp) center/contain no-repeat}
.faq summary::after,.acc>summary::after{content:"+";color:var(--lima);font-size:26px;font-weight:400;line-height:1;flex:0 0 auto;transition:transform .3s}
.biz::after{content:"";width:16px;height:16px;background:url(../img/iconos/e-abajo.webp) center/contain no-repeat}
/* Las fotos nunca se repiten (por redondeo asomaba la fila de abajo por arriba) */
[data-foto]{background-repeat:no-repeat!important;background-position:center!important}