/* /soporte/ (SupportPage.php), on top of vivo.css: the app's help screen (HelpScreen.jsx) */
.sup-hero{position:relative;margin-top:18px;padding:20px 100px 20px 18px;border-radius:var(--rx);background:var(--violets);overflow:hidden}
.sup-hero::before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-40px;top:-50px;background:var(--bg);opacity:.35}
.sup-hero h1,.sup-hero p{position:relative}
.sup-hero p{color:var(--ink2);font-size:13px;line-height:18px;margin-top:6px}
.sup-hero-e{position:absolute;right:14px;top:16px;transform:rotate(-8deg)}
.sup-jump{margin-top:14px}
/* Compra seguro */
.sup-safe{list-style:none;margin:0;padding:14px;border-radius:var(--rl);background:var(--oks);display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.sup-safe li{display:flex;align-items:flex-start;gap:12px}
.sup-ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:14px;background:var(--s1);flex:none}
.sup-safe b{display:block}
.sup-safe p{color:var(--ink2);font-size:13px;line-height:18px;margin-top:2px}
/* Cómo vender rápido */
.sup-sell{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:600px){.sup-sell{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sup-sell li{position:relative;padding:14px;border-radius:var(--rl);background:var(--s2)}
.sup-sell .sup-ic{width:52px;height:52px;border-radius:18px;background:var(--tb)}
.sup-n{position:absolute;right:14px;top:14px;display:flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--tb);font-size:11px;font-weight:800}
.sup-sell b{display:block;margin-top:10px}
.sup-sell p{color:var(--ink2);font-size:13px;line-height:18px;margin-top:4px}
/* the platform's support */
.sup-c{margin-top:34px;padding:18px;border-radius:var(--rx);background:var(--s2)}
.sup-c-h{display:flex;align-items:flex-start;gap:12px}
.sup-c-h>div{flex:1;min-width:0}
.sup-c-h p{color:var(--ink2);font-size:13px;line-height:18px;margin-top:4px}
.sup-c-e{order:2;transform:rotate(8deg)}
.sup-warn{margin-top:14px;align-items:flex-start;box-shadow:inset 0 0 0 1.5px currentColor}
.sup-warn p{font-size:14px;line-height:20px}
.sup-warn b{display:block;margin-bottom:2px}
.sup-ad{margin-top:12px;padding:14px;border-radius:var(--rl);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line)}
.sup-ad-t{display:flex;align-items:center;gap:8px;font-weight:700}
.sup-ad ol{display:grid;gap:4px;margin:8px 0 12px;padding-left:22px;color:var(--ink2);font-size:13px;line-height:19px}
.sup-ad ol b{color:var(--ink)}
.sup-form{margin-top:18px}
.sup-topics{border:0;margin:0;padding:0;min-width:0}
.sup-topics legend{padding:0;margin-bottom:10px;font-weight:700}
.sup-tl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:700px){.sup-tl{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sup-t{position:relative;display:block;cursor:pointer}
.sup-t input{position:absolute;opacity:0;pointer-events:none}
.sup-t span{display:flex;align-items:center;gap:8px;height:100%;min-height:52px;padding:8px 10px;border-radius:14px;background:var(--s1);box-shadow:inset 0 0 0 1.5px var(--line);font-size:13px;line-height:17px;font-weight:600;overflow-wrap:anywhere}
.sup-t input:checked+span{background:var(--brands);box-shadow:inset 0 0 0 2px var(--brand)}
.sup-t input:focus-visible+span{outline:2.5px solid var(--cielo);outline-offset:2px}
.sup-hint{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--cielos);font-size:13px;line-height:18px}
.sup-hint .i{color:var(--cielo);margin-top:1px}
.sup-ok{display:flex;align-items:flex-start;gap:10px;margin:16px 0 14px;padding:12px;border-radius:14px;background:var(--s1);box-shadow:inset 0 0 0 1.5px var(--line);font-size:14px;line-height:20px;cursor:pointer}
.sup-ok input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--brand)}
.sup-ok:has(input:checked){box-shadow:inset 0 0 0 2px var(--ok)}
.sup-why{text-align:center;margin-top:8px}
.sup-hours{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:6px}
.sup-hours .i{width:13px;height:13px}
/* Lo legal */
.sup-legal{margin-top:28px;text-align:center}
.sup-legal h2{font-size:11px;line-height:14px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink3)}
.sup-legal ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:8px 0 0;padding:0;font-size:14px}