/* Paginas legales de stickers.fm. Mismo tono que la app: blanco, tinta #15161B, naranja #FC4C02. */ :root { --ink:#15161B; --muted:#6C6C78; --line:#EDEDF1; --brand:#FC4C02; --soft:#F5F5F7; } * { box-sizing: border-box; } html, body { margin:0; padding:0; } body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:#fff; font-size:16px; line-height:1.62; } header.top { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line); } .top-in { max-width:760px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:14px; } .brand { font-weight:800; letter-spacing:-.4px; text-decoration:none; color:var(--ink); font-size:18px; } .spacer { flex:1; } /* Selector de idioma: dos pildoras, la activa en naranja. */ .langs { display:flex; gap:6px; } .langs button { border:1px solid var(--line); background:#fff; color:var(--muted); font:inherit; font-size:13px; font-weight:700; padding:6px 12px; border-radius:999px; cursor:pointer; } .langs button[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:#fff; } main { max-width:760px; margin:0 auto; padding:28px 20px 72px; } h1 { font-size:30px; line-height:1.2; letter-spacing:-.6px; margin:8px 0 6px; } h2 { font-size:20px; line-height:1.3; margin:34px 0 8px; } h3 { font-size:16px; margin:24px 0 6px; } p, li { color:#3A3A44; } ul, ol { padding-left:22px; } li { margin:5px 0; } strong { color:var(--ink); } a { color:var(--brand); text-decoration:none; word-break:break-word; } a:hover { text-decoration:underline; } code { background:var(--soft); padding:1px 6px; border-radius:6px; font-size:14px; } blockquote { margin:18px 0; padding:12px 16px; background:var(--soft); border-radius:12px; color:#5A5A64; } hr { border:0; border-top:1px solid var(--line); margin:30px 0; } table { width:100%; border-collapse:collapse; margin:16px 0; font-size:15px; } th, td { border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top; } th { background:#F8F8FA; } /* Formularios */ .field { margin:14px 0; } .field label { display:block; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:6px; } .field input, .field textarea, .field select { width:100%; font:inherit; color:var(--ink); background:var(--soft); border:1px solid transparent; border-radius:14px; padding:13px 14px; } .field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--brand); background:#fff; } .field textarea { min-height:110px; resize:vertical; } .check { display:flex; gap:10px; align-items:flex-start; margin:14px 0; } .check input { margin-top:3px; width:18px; height:18px; accent-color:var(--brand); flex:none; } .check label { font-size:14.5px; color:#3A3A44; } button.primary { width:100%; font:inherit; font-weight:800; font-size:16px; color:#fff; background:var(--brand); border:0; border-radius:999px; padding:15px; cursor:pointer; margin-top:10px; } button.primary:disabled { opacity:.45; cursor:default; } .note { font-size:14px; color:var(--muted); } .ok, .err { border-radius:14px; padding:14px 16px; margin:16px 0; font-weight:600; } .ok { background:#E9F7EE; color:#1B7F3B; } .err { background:#FDECEC; color:#B42318; } [hidden] { display:none !important; } /* El idioma que se ve. En la clase de y no por bloque, para que sin JavaScript la pagina salga en INGLES en lugar de mostrar los dos idiomas uno detras del otro. */ html.lang-en [data-lang="es"] { display:none !important; } html.lang-es [data-lang="en"] { display:none !important; } footer { border-top:1px solid var(--line); } .foot-in { max-width:760px; margin:0 auto; padding:22px 20px 40px; font-size:14px; color:var(--muted); } .foot-in a { color:var(--muted); text-decoration:underline; } /* El espaciado va en el del idioma, no en el pie: los enlaces viven DENTRO de ese span, asi que un gap en el contenedor de arriba solo separaria los dos idiomas entre si. */ .foot-in span[data-lang] { display:flex; flex-wrap:wrap; gap:16px; }