/* Páginas link-in-bio de deagrapa */
*, *::before, *::after { box-sizing: border-box; }
/* Tema base: naranja */
body.bio {
  --bg: linear-gradient(180deg, #FF7A2A 0%, #FF5A00 100%);
  --text: #FFFFFF;
  --sub: rgba(255, 255, 255, .88);
  --btn-bg: #FFFFFF;
  --btn-text: #2A211C;
  --btn-hover: #FFF3EA;
  --ico: #FF6A13;
  --avatar-ring: rgba(255, 255, 255, .65);
  --badge-bg: rgba(255, 255, 255, .18);
  --badge-text: #FFFFFF;
  margin: 0; min-height: 100vh; background: var(--bg); background-attachment: fixed; color: var(--text);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.5;
}
body.bio.theme-blanco { --bg: #FFFFFF; --text: #241B16; --sub: #6E655F; --btn-bg: #FF6A13; --btn-text: #FFFFFF; --btn-hover: #E85A05; --ico: #FFFFFF; --avatar-ring: #FFE7D6; --badge-bg: #FFF3EA; --badge-text: #C24A02; }
body.bio.theme-noche { --bg: #17110E; --text: #FFF6EF; --sub: #C9BDB4; --btn-bg: #2A201B; --btn-text: #FFF6EF; --btn-hover: #362922; --ico: #FF7A2A; --avatar-ring: #FF6A13; --badge-bg: #2A201B; --badge-text: #FFB98C; }
body.bio.theme-atardecer { --bg: linear-gradient(160deg, #FF5F6D 0%, #FFC371 100%); --btn-bg: rgba(255, 255, 255, .95); --btn-text: #3A1D1D; --btn-hover: #FFFFFF; --ico: #FF5F6D; }
body.bio.theme-menta { --bg: linear-gradient(180deg, #E9FFF5 0%, #C8F4E4 100%); --text: #0D3B30; --sub: #3E6A5F; --btn-bg: #0D3B30; --btn-text: #E9FFF5; --btn-hover: #145244; --ico: #2EC4A0; --avatar-ring: #2EC4A0; --badge-bg: rgba(13, 59, 48, .08); --badge-text: #0D3B30; }
body.bio.theme-papel { --bg: #F5EFE6; --text: #2A211C; --sub: #6E655F; --btn-bg: transparent; --btn-text: #2A211C; --btn-hover: #EDE4D8; --ico: #2A211C; --avatar-ring: #2A211C; --badge-bg: transparent; --badge-text: #6E655F; }
body.bio.theme-papel .bio-link { border: 2px solid #2A211C; box-shadow: 4px 4px 0 #2A211C; }
body.bio.theme-papel .bio-link:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #2A211C; }

.bio-draft { background: #241B16; color: #FFE7D6; text-align: center; font-size: .85rem; padding: 8px 12px; font-weight: 600; }
.bio-wrap { max-width: 560px; margin: 0 auto; padding: 48px 20px 32px; min-height: 100vh; display: flex; flex-direction: column; }
.bio-head { text-align: center; margin-bottom: 28px; }
.bio-avatar { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 16px; border: 4px solid var(--avatar-ring); overflow: hidden; background: var(--btn-bg); color: var(--ico); display: grid; place-items: center; font-weight: 800; font-size: 2.2rem; }
.bio-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-head h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; letter-spacing: -.01em; }
.bio-text { color: var(--sub); margin: 0 auto 6px; max-width: 420px; font-size: 1rem; }
.bio-meta { color: var(--sub); font-size: .88rem; margin: 0; opacity: .9; }
.bio-links { display: flex; flex-direction: column; gap: 12px; }
.bio-link {
  display: flex; align-items: center; gap: 12px; background: var(--btn-bg); color: var(--btn-text);
  padding: 15px 18px; border-radius: 16px; text-decoration: none; font-weight: 600; font-size: 1rem;
  transition: transform .12s ease, background .15s, box-shadow .15s; box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.bio-link:hover { background: var(--btn-hover); transform: translateY(-1px); }
.bio-link:active { transform: translateY(0); }
.bio-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--ico); flex: none; }
body.bio.theme-blanco .bio-ico { background: rgba(255, 255, 255, .18); }
.bio-label { flex: 1; text-align: center; margin-right: 46px; }
.bio-empty { text-align: center; color: var(--sub); }
.bio-foot { margin-top: auto; padding-top: 40px; text-align: center; }
.bio-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--badge-bg); color: var(--badge-text); text-decoration: none; font-size: .82rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; }
.bio-badge:hover { text-decoration: underline; }
.bio-badge-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #FF6A13; color: #fff; font-weight: 800; font-size: .8rem; }
@media (max-width: 420px) { .bio-wrap { padding-top: 36px; } .bio-label { margin-right: 0; text-align: left; } }

/* Insignias (logros) bajo el nombre */
.bio-ach { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0; margin: 12px 0 0; }
.bio-ach li { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--badge-bg); color: var(--badge-text); }
body.bio.theme-papel .bio-ach li { border: 1.5px solid #2A211C; }

/* Pantalla de redirección (puente) */
body.redir { margin: 0; min-height: 100vh; font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #fff;
  background: radial-gradient(circle at 20% 10%, #FF8B45 0%, rgba(255, 139, 69, 0) 45%), linear-gradient(160deg, #FF7A2A 0%, #FF5A00 60%, #E84E00 100%); }
.redir-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 32px 20px; text-align: center; }
.redir-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; }
.redir-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #fff; color: #FF6A13; font-size: 1.5rem; }
.redir-card { width: 100%; max-width: 440px; background: #fff; color: #241B16; border-radius: 26px; padding: 30px 26px 24px; box-shadow: 0 30px 70px rgba(120, 40, 0, .28); }
.redir-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: -66px auto 12px; border: 4px solid #fff; display: block; background: #FFE7D6; }
.redir-kicker { margin: 0; color: #7A6E66; font-size: .95rem; }
.redir-host { margin: 4px 0 2px; font-size: clamp(1.5rem, 6vw, 2.1rem); font-weight: 800; color: #E85A05; word-break: break-all; line-height: 1.15; }
.redir-from { margin: 0 0 18px; color: #7A6E66; font-size: .9rem; }
.redir-count { position: relative; width: 120px; height: 120px; margin: 0 auto 18px; }
.redir-count svg { transform: rotate(-90deg); }
.redir-count .ring-bg { fill: none; stroke: #FFE7D6; stroke-width: 8; }
.redir-count .ring { fill: none; stroke: #FF6A13; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 0; animation: redir-ring linear forwards; }
@keyframes redir-ring { to { stroke-dashoffset: 327; } }
.redir-count span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; font-weight: 800; color: #241B16; }
.redir-go { display: inline-block; background: #FF6A13; color: #fff; text-decoration: none; font-weight: 700; padding: 13px 30px; border-radius: 999px; }
.redir-go:hover { background: #E85A05; }
.redir-safe { margin: 14px 0 0; font-size: .78rem; color: #9A8E86; }
.redir-cta { color: #fff; font-weight: 600; font-size: .92rem; text-decoration: none; background: rgba(255, 255, 255, .16); padding: 10px 18px; border-radius: 999px; }
.redir-cta:hover { background: rgba(255, 255, 255, .26); }
body.redir .bio-draft { position: fixed; top: 0; left: 0; right: 0; z-index: 5; }