/* ===== 101 · componentes dinámicos: móviles con redes sociales y widgets ===== */
.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* --- Móvil --- */
.dev { --w: 270px; width: var(--w); aspect-ratio: 9 / 19.2; border-radius: 46px; padding: 10px; background: linear-gradient(145deg, #3a3833, #121110 40%, #2a2925); box-shadow: 0 0 0 1.5px #4a4740 inset, 0 50px 90px -40px rgba(42,41,37,.65), 0 20px 40px -24px rgba(196,85,46,.45); position: relative; flex: none; }
.dev::before { content: ""; position: absolute; right: -3px; top: 22%; width: 3px; height: 12%; border-radius: 0 3px 3px 0; background: #2a2925; }
.dev-scr { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: #fff; color: #1b1a17; font: 400 11.5px/1.35 var(--sans); display: flex; flex-direction: column; }
.dev-status { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px 4px; font-size: 11px; position: relative; z-index: 5; }
.dev-status b { font-weight: 700; }
.dev-isl { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); width: 76px; height: 21px; border-radius: 20px; background: #0d0c0b; }
.dev-sig { display: flex; gap: 2px; align-items: flex-end; } .dev-sig i { width: 3px; background: currentColor; border-radius: 1px; } .dev-sig i:nth-child(1){height:5px} .dev-sig i:nth-child(2){height:7px} .dev-sig i:nth-child(3){height:9px}
.dev .i { width: 18px; height: 18px; }

/* Composición con notificaciones */
.hero-dev { position: relative; display: flex; justify-content: center; align-items: center; padding: 30px 60px; min-height: 560px; isolation: isolate; }
.hero-dev .dev { transform: rotate(-3deg); animation: devfloat 7s ease-in-out infinite; }
.hero-dev .dev.back { position: absolute; transform: translate(95px, 30px) rotate(8deg) scale(.86); opacity: .95; z-index: -1; animation: none; filter: saturate(.9); }
.dev-glow { position: absolute; inset: 15% 10%; z-index: -2; border-radius: 50%; background: radial-gradient(closest-side, rgba(224,163,58,.45), rgba(196,85,46,.18), transparent); filter: blur(20px); }
.fchip { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.95); border: 1px solid var(--line); box-shadow: 0 18px 40px -20px rgba(42,41,37,.5); font-size: 14px; z-index: 3; animation: bob 6s ease-in-out infinite; backdrop-filter: blur(8px); }
.fchip .i { width: 32px; height: 32px; padding: 7px; border-radius: 10px; color: #fff; background: var(--grad); }
.fchip b { font-weight: 700; white-space: nowrap; }
.fchip.f0 { left: 0; top: 18%; } .fchip.f1 { right: 0; bottom: 20%; animation-delay: -3s; } .fchip.f1 .i { background: var(--sage); }
@keyframes devfloat { 50% { transform: rotate(-3deg) translateY(-10px); } }
@media (max-width: 600px) { .hero-dev { padding: 20px 8px; min-height: 0; } .dev { --w: 230px; } .fchip { font-size: 12px; padding: 7px 11px 7px 7px; } .fchip .i { width: 26px; height: 26px; padding: 5px; } .fchip.f0 { left: -4px; top: 8%; } .fchip.f1 { right: -4px; bottom: 10%; } .hero-dev .dev.back { display: none; } }

/* Número animado */
.cnt { font-variant-numeric: tabular-nums; }

/* --- Instagram perfil --- */
.scr-ig { padding: 0 14px; }
.ig-top { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 10px; font-size: 15px; } .ig-top span { display: flex; gap: 14px; }
.ig-prof { display: flex; align-items: center; gap: 16px; }
.ig-av { width: 70px; height: 70px; border-radius: 50%; padding: 3px; background: conic-gradient(#f3c96b, #e0a33a, #c4552e, #8a4f6d, #f3c96b); flex: none; display: block; }
.ig-av > i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(135deg, #f2b48f, #c4552e 60%, #8a4f6d); }
.ig-av.sm { width: 26px; height: 26px; padding: 2px; } .ig-av.sm > i { border-width: 2px; }
.ig-stats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.ig-stats b { display: block; font-size: 15px; } .ig-stats small { font-size: 9.5px; color: #666; }
.ig-bio { display: grid; gap: 1px; margin: 10px 0 8px; font-size: 11px; } .ig-link { color: #3a6ea5; font-weight: 600; }
.ig-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ig-btns i { font-style: normal; text-align: center; padding: 6px; border-radius: 8px; background: var(--terra); color: #fff; font-weight: 700; } .ig-btns i.alt { background: #efefef; color: #111; }
.ig-hl { display: flex; gap: 10px; margin: 12px 0 8px; } .ig-hl i { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #ddd; }
.ig-hl .h0 { background: #f6e3d9; } .ig-hl .h1 { background: #f8ecd2; } .ig-hl .h2 { background: #e4ece2; } .ig-hl .h3 { background: #f1e1e9; } .ig-hl .h4 { background: #ebe7dc; }
.ig-tabs { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; border-top: 1px solid #eee; padding: 7px 0; } .ig-tabs .i:first-child { color: #111; } .ig-tabs .i { color: #aaa; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -14px; }
.ig-grid i { position: relative; aspect-ratio: 1; display: grid; place-items: start end; padding: 5px; color: #fff; }
.ig-grid .t0 { background: linear-gradient(135deg, #c4552e, #8a4f6d); } .ig-grid .t1 { background: linear-gradient(135deg, #f3c96b, #e0a33a); } .ig-grid .t2 { background: linear-gradient(135deg, #9dbb99, #6f8f6c); } .ig-grid .t3 { background: linear-gradient(135deg, #e9b3b8, #d98c7a); } .ig-grid .t4 { background: linear-gradient(135deg, #f2b48f, #c4552e); }
.ig-grid .i { width: 13px; height: 13px; }
.ig-grid .pop { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; fill: #fff; stroke: none; opacity: 0; }
.on .ig-grid .pop { animation: heartpop 3.2s ease-out 1s infinite; }
@keyframes heartpop { 0% { opacity: 0; transform: scale(.3); } 15% { opacity: 1; transform: scale(1.15); } 30% { transform: scale(1); } 55% { opacity: 1; } 75%, 100% { opacity: 0; transform: scale(1); } }

/* --- Reel / TikTok --- */
.scr-reel, .scr-tt { color: #fff; background: #0d0c0b; }
.reel-bg, .tt-bg { position: absolute; inset: 0; background: radial-gradient(60% 40% at 70% 30%, rgba(243,201,107,.55), transparent 60%), linear-gradient(170deg, #c4552e 0%, #8a4f6d 55%, #2a2925 100%); }
.tt-bg { background: radial-gradient(60% 40% at 30% 35%, rgba(157,187,153,.6), transparent 60%), linear-gradient(170deg, #2a2925 0%, #6f8f6c 50%, #1b1a17 100%); }
.on .reel-bg, .on .tt-bg { animation: pan 9s ease-in-out infinite alternate; }
@keyframes pan { to { filter: hue-rotate(-18deg) brightness(1.08); transform: scale(1.08); } }
.scr-reel .dev-status, .scr-tt .dev-status { color: #fff; }
.reel-prog { position: relative; z-index: 2; margin: 2px 16px 0; height: 2px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.reel-prog i, .tt-bar i { display: block; height: 100%; width: 0; background: #fff; }
.on .reel-prog i, .on .tt-bar i { animation: prog 8s linear infinite; }
@keyframes prog { to { width: 100%; } }
.reel-top, .tt-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; font-size: 16px; }
.tt-top { justify-content: center; gap: 14px; font-size: 13px; } .tt-top span { opacity: .7; } .tt-top b { border-bottom: 2px solid #fff; padding-bottom: 2px; } .tt-top .i { position: absolute; right: 16px; }
.reel-hook, .tt-hook { position: relative; z-index: 2; margin: 22% 18px 0; display: grid; gap: 4px; justify-items: start; font: 800 17px/1.2 var(--display); }
.reel-hook span { background: #fff; color: #1b1a17; padding: 3px 8px; border-radius: 6px; }
.tt-hook { text-shadow: 0 2px 10px rgba(0,0,0,.4); font-size: 16px; } .tt-hook b { color: #f3c96b; }
.reel-side, .tt-side { position: absolute; right: 10px; bottom: 96px; z-index: 2; display: grid; gap: 14px; justify-items: center; }
.reel-side span, .tt-side span { display: grid; justify-items: center; gap: 2px; font-size: 10px; } .reel-side b, .tt-side b { font-weight: 700; font-size: 10px; }
.reel-side .i, .tt-side .i { width: 26px; height: 26px; }
.beat { fill: #fff; } .on .beat { animation: beat 1.6s ease-in-out infinite; } @keyframes beat { 15% { transform: scale(1.25); fill: #ff5a6e; stroke: #ff5a6e; } 30% { transform: scale(1); } }
.reel-cap, .tt-cap { position: absolute; left: 14px; right: 60px; bottom: 26px; z-index: 2; display: grid; gap: 5px; font-size: 11px; }
.reel-cap div { display: flex; align-items: center; gap: 7px; } .reel-cap em { font-style: normal; border: 1px solid #fff; border-radius: 6px; padding: 1px 7px; font-size: 10px; }
.reel-cap p, .tt-cap p { margin: 0; } .tt-cap p span { font-weight: 700; }
.reel-cap > span, .tt-cap > span { display: flex; align-items: center; gap: 5px; overflow: hidden; } .reel-cap .i, .tt-cap .i { width: 13px; height: 13px; }
.mq { overflow: hidden; white-space: nowrap; flex: 1; } .mq span { display: inline-block; } .on .mq span { animation: mq 9s linear infinite; } @keyframes mq { to { transform: translateX(-50%); } }
.floaters i { position: absolute; bottom: 90px; right: calc(4% + var(--x) * .3); z-index: 3; opacity: 0; color: #ff5a6e; }
.floaters .i { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.on .floaters i { animation: floatup 4.2s ease-out infinite; animation-delay: var(--d); } @keyframes floatup { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-190px) translateX(-20px) scale(1.2); } }
.tt-av { position: relative; } .tt-av > i { display: block; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(135deg, #f2b48f, #c4552e); }
.tt-av em { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: #fe2c55; display: grid; place-items: center; } .tt-av em .i { width: 12px; height: 12px; }
.tt-disc i { display: block; width: 32px; height: 32px; border-radius: 50%; background: conic-gradient(#2a2925, #555, #2a2925, #555, #2a2925); border: 6px solid #111; box-shadow: inset 0 0 0 4px #c4552e; }
.on .tt-disc i { animation: spin 4s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.tt-bar { position: absolute; left: 0; right: 0; bottom: 14px; height: 2px; background: rgba(255,255,255,.25); z-index: 2; }

/* --- Reddit --- */
.scr-reddit { background: #f6f7f8; }
.rd-top { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; background: #fff; font-size: 13px; } .rd-top .i { margin-left: auto; }
.rd-logo, .rd-sub { width: 24px; height: 24px; border-radius: 50%; background: #ff4500; box-shadow: inset 0 0 0 6px #ff4500, inset 0 0 0 9px #fff; } .rd-sub { width: 16px; height: 16px; box-shadow: none; background: linear-gradient(135deg, #c4552e, #8a4f6d); }
.rd-sort { display: flex; gap: 8px; padding: 8px 12px; } .rd-sort b, .rd-sort span { font-size: 11px; padding: 4px 10px; border-radius: 999px; background: #e9ebed; } .rd-sort b { background: #1b1a17; color: #fff; }
.rd-post { background: #fff; margin: 0 0 8px; padding: 10px 12px; display: grid; gap: 7px; }
.rd-meta { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #777; } .rd-meta b { color: #1b1a17; }
.rd-title { margin: 0; font-weight: 700; font-size: 13px; line-height: 1.3; }
.rd-flair { display: flex; gap: 6px; } .rd-flair span { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #f8ecd2; } .rd-flair .v { display: inline-flex; gap: 3px; align-items: center; background: #e4ece2; color: #3d6b3a; } .rd-flair .i { width: 10px; height: 10px; }
.rd-img { height: 120px; border-radius: 10px; background: linear-gradient(135deg, #f2b48f, #c4552e 55%, #8a4f6d); position: relative; overflow: hidden; }
.rd-img i { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-100%); } .on .rd-img i { animation: shine 3s ease-in-out infinite; } @keyframes shine { 60%, 100% { transform: translateX(100%); } }
.rd-act { display: flex; gap: 10px; } .rd-act > span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: #eceef0; font-size: 11px; } .rd-act .i { width: 15px; height: 15px; }
.upv { color: #ff4500; } .on .upv { animation: upv 2.4s ease-in-out infinite; } @keyframes upv { 20% { transform: translateY(-3px); fill: #ff4500; } 40% { transform: none; } }

/* --- X --- */
.scr-x { background: #fff; }
.xp-top { display: grid; grid-template-columns: 1fr 1fr; text-align: center; border-bottom: 1px solid #eee; font-size: 12.5px; } .xp-top b, .xp-top span { padding: 8px 0 10px; } .xp-top b { box-shadow: inset 0 -3px 0 #1d9bf0; } .xp-top span { color: #666; }
.xp-post { padding: 12px 14px; border-bottom: 1px solid #eee; display: grid; gap: 8px; } .xp-post p { margin: 0; font-size: 12.5px; }
.xp-head { display: flex; gap: 8px; align-items: center; } .xp-head div { display: grid; font-size: 11px; } .xp-head span { color: #666; }
.xp-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #f2b48f, #c4552e); flex: none; } .xp-av.b { background: linear-gradient(135deg, #9dbb99, #6f8f6c); }
.xp-v { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: #1d9bf0; color: #fff; vertical-align: -2px; } .xp-v .i { width: 9px; height: 9px; stroke-width: 3; }
.xp-poll { display: grid; gap: 5px; } .xp-poll div { position: relative; display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; font-size: 11.5px; overflow: hidden; }
.xp-poll div::before { content: ""; position: absolute; inset: 0; width: 0; background: #d7ecfb; z-index: 0; transition: width 1.4s ease; } .on .xp-poll div::before { width: var(--w); } .xp-poll div:first-child::before { background: #b3dcf8; }
.xp-poll span, .xp-poll b { position: relative; z-index: 1; } .xp-poll small { color: #666; font-size: 10px; }
.xp-met { display: flex; justify-content: space-between; color: #555; font-size: 10.5px; } .xp-met span { display: inline-flex; align-items: center; gap: 3px; } .xp-met .i { width: 14px; height: 14px; }
.on .spin { animation: spin 3s linear infinite; }
.xp-media { height: 90px; border-radius: 12px; background: linear-gradient(135deg, #9dbb99, #6f8f6c); display: grid; place-items: center; filter: saturate(.9); position: relative; overflow: hidden; }
.xp-media::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(10px); background: rgba(0,0,0,.25); } .xp-media span { position: relative; display: inline-flex; gap: 5px; align-items: center; color: #fff; font-size: 11px; font-weight: 700; }

/* --- Telegram --- */
.scr-tg { background: #dfe7ee; }
.tg-top, .wa-top { display: flex; align-items: center; gap: 9px; padding: 6px 12px 10px; background: #fff; } .tg-top div, .wa-top div { display: grid; font-size: 11px; flex: 1; } .tg-top span, .wa-top span { color: #3a8dde; font-size: 10px; }
.tg-av { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #f3c96b; display: grid; place-items: center; font: 800 11px var(--display); font-style: normal; flex: none; }
.tg-pin { display: flex; gap: 8px; align-items: center; padding: 6px 12px; background: #fff; border-top: 1px solid #eee; font-size: 10.5px; } .tg-pin span { display: grid; } .tg-pin b { color: #3a8dde; } .tg-pin .i { color: #3a8dde; }
.tg-feed { padding: 10px; display: grid; gap: 8px; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.4) 0 2px, transparent 3px) 0 0 / 26px 26px, #d6e2cf; flex: 1; align-content: start; }
.tg-msg { background: #fff; border-radius: 12px 12px 12px 4px; padding: 8px 10px; font-size: 11.5px; max-width: 92%; box-shadow: 0 1px 1px rgba(0,0,0,.08); } .tg-msg b { color: #c4552e; font-size: 10.5px; } .tg-msg p { margin: 2px 0 4px; }
.tg-foot { display: flex; gap: 5px; align-items: center; } .tg-foot small { margin-left: auto; color: #8a9aa8; font-size: 9.5px; display: inline-flex; gap: 3px; align-items: center; } .tg-foot .i { width: 11px; height: 11px; }
.tg-r { font-size: 10px; background: #eef3f8; border-radius: 999px; padding: 1px 7px; }
.tg-poll { display: grid; gap: 4px; } .tg-poll i { display: block; height: 7px; border-radius: 4px; background: #3a8dde; width: 0; transition: width 1.3s ease .4s; } .on .tg-poll i { width: var(--w); }
.tg-msg.new { opacity: 0; transform: translateY(12px) scale(.96); } .on .tg-msg.new { animation: msgin .5s ease 1.6s forwards; } @keyframes msgin { to { opacity: 1; transform: none; } }

/* --- Chat (fan) y WhatsApp --- */
.scr-chat, .scr-wa { background: #f4f1ec; }
.ch-top { display: flex; align-items: center; gap: 9px; padding: 6px 12px 10px; background: #fff; border-bottom: 1px solid #eee; } .ch-top div { display: grid; font-size: 11px; } .ch-top span { color: #3d9a52; font-size: 10px; }
.ch-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #9dbb99, #6f8f6c); flex: none; }
.ch-body { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ch-body p { margin: 0; padding: 8px 11px; border-radius: 16px; max-width: 80%; font-size: 11.5px; }
.ch-body .in { background: #fff; align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.ch-body .out { background: var(--ink); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.scr-wa .ch-body .out { background: #d9f7c9; color: #1b1a17; } .wa-top span { color: #3d9a52; }
.ch-ppv { align-self: flex-end; width: 72%; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px -8px rgba(0,0,0,.25); position: relative; }
.ch-blur { height: 90px; background: linear-gradient(135deg, #f2b48f, #c4552e 55%, #8a4f6d); display: grid; place-items: center; filter: blur(0); position: relative; }
.ch-blur::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(8px); background: rgba(255,255,255,.12); transition: opacity .6s; }
.ch-blur span { position: relative; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.35); display: grid; place-items: center; color: #fff; transition: opacity .4s; }
.ch-ppv-f { display: flex; justify-content: space-between; padding: 7px 10px; font-size: 11px; } .ch-ppv-f span { font-weight: 800; color: var(--terra); }
.ch-unl { position: absolute; top: 8px; left: 8px; display: inline-flex; gap: 4px; align-items: center; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: #3d9a52; border-radius: 999px; padding: 3px 8px; opacity: 0; } .ch-unl .i { width: 11px; height: 11px; stroke-width: 3; }
.on .ch-ppv .ch-blur::before, .on .ch-ppv .ch-blur span { animation: unlock .6s ease 3.4s forwards; } .on .ch-unl { animation: fadein .4s ease 3.6s forwards; }
@keyframes unlock { to { opacity: 0; } } @keyframes fadein { to { opacity: 1; } }
.typing { display: inline-flex !important; gap: 4px; background: #fff; align-self: flex-start; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: #aaa; animation: dots 1.2s infinite; } .typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes dots { 30% { transform: translateY(-4px); background: #666; } 60% { transform: none; } }
.ch-input { display: flex; align-items: center; justify-content: space-between; margin: 8px 10px 14px; padding: 9px 12px; background: #fff; border-radius: 999px; color: #999; } .ch-input .i { color: var(--terra); }
.seq > * { opacity: 0; transform: translateY(10px); } .on .seq > * { animation: msgin .45s ease forwards; animation-delay: calc(var(--d, 0) * .9s + .3s); }

/* --- Panel de ingresos --- */
.scr-dash { background: #faf8f4; padding: 0 14px; gap: 10px; }
.db-top { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; } .db-top b { font-size: 14px; } .db-top span { font-size: 10px; background: #eee; border-radius: 999px; padding: 3px 8px; }
.db-total { background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 14px; display: grid; gap: 2px; } .db-total small { color: #b7b3a6; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; }
.db-total .cnt { font: 800 24px/1.1 var(--display); background: linear-gradient(100deg, #fff, #f3c96b); -webkit-background-clip: text; background-clip: text; color: transparent; } .db-total em { font-style: normal; color: #9fd3a4; font-size: 10.5px; font-weight: 600; }
.db-chart { background: #fff; border-radius: 14px; padding: 8px; border: 1px solid #eee; } .db-chart svg { width: 100%; height: 64px; display: block; }
.db-chart polygon { fill: rgba(224,163,58,.18); } .db-chart polyline { fill: none; stroke: var(--terra); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 0; }
.on .db-chart polyline { animation: draw 2s ease forwards; } @keyframes draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.db-src { background: #fff; border-radius: 14px; padding: 10px; border: 1px solid #eee; display: grid; gap: 7px; }
.db-src div { display: grid; grid-template-columns: 78px 1fr 28px; align-items: center; gap: 6px; font-size: 10px; } .db-src b { text-align: right; }
.db-src i { height: 7px; border-radius: 4px; width: 0; transition: width 1.2s ease .3s; } .on .db-src i { width: var(--w); }
.db-src .s { background: var(--sage); } .db-src .m { background: var(--grad); } .db-src .p { background: var(--plum); }
.db-feed { display: grid; gap: 6px; } .db-feed p { margin: 0; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 7px 10px; font-size: 10.5px; }
.db-feed p small { margin-left: auto; color: #999; } .db-feed .i { color: var(--terra); width: 15px; height: 15px; }
.on .db-feed p { animation: msgin .5s ease both; } .on .db-feed p:nth-child(2) { animation-delay: .6s; }

/* --- Precios --- */
.scr-price { background: #faf8f4; padding: 0 14px; gap: 10px; }
.pr-top { padding-top: 6px; font-size: 14px; }
.pr-card { border-radius: 16px; padding: 14px; background: var(--grad); color: #fff; display: grid; gap: 3px; box-shadow: 0 14px 30px -16px rgba(196,85,46,.7); } .pr-card span { font-size: 10.5px; opacity: .9; }
.pr-card .cnt { font: 800 26px/1.1 var(--display); } .pr-card small { font-size: 10px; background: rgba(255,255,255,.2); border-radius: 999px; padding: 3px 8px; justify-self: start; }
.pr-list { background: #fff; border-radius: 14px; border: 1px solid #eee; } .pr-list div { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; font-size: 11px; } .pr-list div:last-child { border: 0; } .pr-list b { color: var(--sage); }
.pr-toggle { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 10px 12px; font-size: 11px; }
.sw { position: relative; width: 36px; height: 21px; border-radius: 999px; background: #ccc; display: inline-block; transition: background .25s; flex: none; } .sw i { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .25s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.sw.on, input:checked + .sw { background: var(--sage); } .sw.on i, input:checked + .sw i { transform: translateX(15px); }
.pr-note { color: #999; text-align: center; font-size: 9.5px; }

/* --- Calendario --- */
.scr-cal { background: #faf8f4; padding: 0 12px; gap: 10px; }
.cl-top { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; } .cl-top b { font-size: 13px; } .cl-top span { font-size: 10px; color: #999; }
.cl-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cl-week div { display: grid; align-content: start; gap: 3px; min-height: 150px; background: #fff; border-radius: 8px; padding: 4px 3px; border: 1px solid #eee; }
.cl-week b { text-align: center; font-size: 10px; color: #999; } .cl-week i { font-style: normal; font-size: 7.5px; font-weight: 700; border-radius: 5px; padding: 4px 2px; text-align: center; color: #fff; }
.cl-week .reel { background: var(--terra); } .cl-week .feed { background: var(--sage); } .cl-week .hist { background: var(--amber); color: #1b1a17; } .cl-week .ppv { background: var(--plum); } .cl-week .dir { background: var(--ink); }
.on .cl-week i { animation: msgin .4s ease both; } .on .cl-week div:nth-child(2) i { animation-delay: .15s; } .on .cl-week div:nth-child(3) i { animation-delay: .3s; } .on .cl-week div:nth-child(4) i { animation-delay: .45s; } .on .cl-week div:nth-child(5) i { animation-delay: .6s; } .on .cl-week div:nth-child(6) i { animation-delay: .75s; } .on .cl-week div:nth-child(7) i { animation-delay: .9s; }
.cl-sess { display: flex; gap: 10px; align-items: center; background: var(--ink); color: #fff; border-radius: 14px; padding: 10px 12px; font-size: 10.5px; } .cl-sess span { display: grid; } .cl-sess b { color: #f3c96b; } .cl-sess .i { color: #f3c96b; width: 22px; height: 22px; }
.cl-leg { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 10px; color: #777; } .cl-leg i { width: 9px; height: 9px; border-radius: 3px; margin-left: 6px; } .cl-leg .reel { background: var(--terra); } .cl-leg .feed { background: var(--sage); } .cl-leg .ppv { background: var(--plum); }

/* --- Protección DMCA --- */
.scr-dmca { background: #faf8f4; padding: 0 14px; gap: 12px; }
.dm-top { display: flex; align-items: center; gap: 8px; padding-top: 8px; font-size: 14px; } .dm-top .i { width: 28px; height: 28px; padding: 5px; border-radius: 9px; background: var(--ink); color: #f3c96b; }
.dm-stat { display: grid; gap: 6px; } .dm-stat span { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 9px 10px; font-size: 11px; }
.dm-stat .ok { width: 9px; height: 9px; border-radius: 50%; background: #3d9a52; box-shadow: 0 0 0 4px #e4f2e6; }
.dm-list { display: grid; gap: 8px; position: relative; } .dm-list div { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 12px; padding: 10px; border: 1px solid #eee; font-size: 10.5px; } .dm-list span { display: grid; } .dm-list span b { font-size: 11.5px; }
.st { width: 26px; height: 26px; border-radius: 8px; flex: none; } .st.a { background: var(--amber); } .st.p { background: var(--plum); } .st.s { background: var(--sage); }
.dm-scan { display: grid; gap: 5px; font-size: 10px; color: #777; } .dm-scan i { height: 5px; border-radius: 4px; background: #eee; position: relative; overflow: hidden; }
.dm-scan i::after { content: ""; position: absolute; inset: 0; width: 35%; background: var(--grad); border-radius: 4px; } .on .dm-scan i::after { animation: scan 2.2s ease-in-out infinite; } @keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* --- Contrato --- */
.scr-doc { background: #efece5; padding: 0 14px; }
.dc-top { display: flex; align-items: center; gap: 8px; padding: 8px 0 12px; font-size: 13px; } .dc-top .i { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: var(--terra); color: #fff; }
.dc-paper { background: #fff; border-radius: 12px; padding: 14px 12px; display: grid; gap: 10px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); }
.dc-paper > div { display: flex; gap: 8px; align-items: center; font-size: 11px; } .dc-paper .i { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #e4ece2; color: #3d6b3a; stroke-width: 3; }
.dc-sign { flex-direction: column; align-items: flex-start !important; margin-top: 8px; } .dc-sign i { display: block; width: 70%; height: 24px; border-bottom: 1.5px solid #333; background: no-repeat left bottom / 0 100% linear-gradient(transparent 55%, transparent); position: relative; }
.dc-sign i::after { content: ""; position: absolute; left: 6px; bottom: 4px; width: 0; height: 14px; border-radius: 50%; border-top: 2px solid var(--terra); transition: width 1s ease 3.8s; } .on .dc-sign i::after { width: 70%; } .dc-sign span { font-size: 9.5px; color: #888; }
.dc-seal { position: absolute; right: 18px; bottom: 60px; width: 58px; height: 58px; border-radius: 50%; background: var(--ink); color: #f3c96b; display: grid; place-items: center; font: 800 14px var(--display); font-style: normal; box-shadow: 0 0 0 5px #efece5; transform: scale(0) rotate(-40deg); }
.on .dc-seal { animation: seal .5s cubic-bezier(.2,1.6,.4,1) 4.3s forwards; } @keyframes seal { to { transform: scale(1) rotate(-12deg); } }

/* ===== Showcase (móvil + explicación) ===== */
.showcase { margin: 12px 0 46px; display: grid; gap: 10px 30px; align-items: center; grid-template-columns: minmax(0, 1fr); background: linear-gradient(135deg, #fff, #fbf1e8); border: 1px solid var(--line); border-radius: 26px; padding: 18px; overflow: hidden; }
@media (min-width: 760px) { .showcase { grid-template-columns: auto 1fr; padding: 10px 34px 10px 0; } .showcase.flip { grid-template-columns: 1fr auto; padding: 10px 0 10px 34px; } .showcase.flip .hero-dev { order: 2; } }
.showcase .hero-dev { min-height: 0; padding: 26px 44px; } .showcase .dev { --w: 230px; }
.showcase figcaption { display: grid; gap: 10px; } .showcase figcaption b { font: 800 clamp(22px, 2.4vw, 28px)/1.15 var(--display); color: var(--ink); }
.showcase ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; } .showcase li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--ink-2); }
.showcase li .i { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--sage); color: #fff; stroke-width: 3; margin-top: 1px; } .showcase small { color: var(--ink-3); font-size: 12.5px; }
.showcase .fchip { font-size: 12.5px; } .showcase .fchip .i { width: 28px; height: 28px; }
.prose .showcase li::marker { content: none; }

/* ===== Widgets ===== */
.widget { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px; margin: 8px 0 40px; box-shadow: 0 24px 50px -38px rgba(42,41,37,.4); }
.w-head { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; margin-bottom: 18px; }
.w-head > .i { grid-row: span 2; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--grad); color: #fff; }
.w-head b { font: 800 19px/1.2 var(--display); color: var(--ink); } .w-head span { font-size: 14px; color: var(--ink-3); }
.w-note { display: block; margin-top: 12px; color: var(--ink-3); font-size: 13px; }
.w-range { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin-bottom: 14px; font-size: 14.5px; color: var(--ink-2); }
.w-range output { font-weight: 800; color: var(--ink); } .w-range input { grid-column: 1 / -1; width: 100%; accent-color: var(--terra); }
.w-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; } .w-split div { border-radius: 14px; padding: 12px; background: var(--cream-2); }
.w-split small { display: block; font-size: 12px; color: var(--ink-3); } .w-split b { font: 800 clamp(17px, 2vw, 22px)/1.2 var(--display); } .w-split .of b { color: var(--ink-3); } .w-split .you { background: #e4ece2; } .w-split .you b { color: #3d6b3a; }
.w-bar { display: flex; height: 12px; border-radius: 8px; overflow: hidden; margin-top: 12px; } .w-bar .you { background: var(--sage); } .w-bar .of { background: var(--cream-3); flex: 1; }
@media (max-width: 560px) { .w-split { grid-template-columns: 1fr; } }
.w-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .w-cols > div { border-radius: 16px; padding: 14px; display: grid; gap: 4px; } .w-cols small { font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.w-cols b { font: 800 24px/1.1 var(--display); } .w-cols span { font-size: 13.5px; color: var(--ink-2); } .w-cols em { font-style: normal; font-weight: 800; color: var(--ink); }
.w-cols .bad { background: #fbe9e4; } .w-cols .bad small, .w-cols .bad b { color: #a0412d; } .w-cols .good { background: #e4ece2; } .w-cols .good small, .w-cols .good b { color: #3d6b3a; }
.w-diff { margin: 12px 0 0; font-size: 15px; } .w-diff b { color: var(--terra); }
.flag-list { display: grid; gap: 8px; }
.flag { display: flex; gap: 12px; align-items: center; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; font-size: 15px; color: var(--ink-2); transition: border-color .15s, background .15s; }
.flag input { position: absolute; opacity: 0; pointer-events: none; } .flag > i { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line); display: grid; place-items: center; flex: none; color: transparent; transition: .15s; }
.flag > i .i { width: 15px; height: 15px; stroke-width: 3; } .flag:has(input:checked) { border-color: var(--terra); background: #fbefe6; color: var(--ink); } .flag input:checked + i { background: var(--terra); border-color: var(--terra); color: #fff; }
.flag input:focus-visible + i { outline: 2px solid var(--terra); outline-offset: 2px; }
.rcheck .flag:has(input:checked) { border-color: var(--sage); background: #f1f6ef; } .rcheck .flag input:checked + i { background: var(--sage); border-color: var(--sage); }
.flag-res { margin-top: 16px; border-radius: 16px; padding: 16px; background: #f1f6ef; transition: background .3s; } .flag-res b { font-size: 17px; display: block; } .flag-res p { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-2); }
.flag-res .meter { height: 10px; border-radius: 6px; background: rgba(0,0,0,.08); overflow: hidden; margin-bottom: 10px; } .flag-res .meter i { display: block; height: 100%; width: 3%; background: var(--sage); transition: width .4s, background .3s; }
.flag-res[data-level="1"] { background: #fff8e8; } .flag-res[data-level="1"] .meter i { background: var(--amber); } .flag-res[data-level="2"] { background: #fbe9e4; } .flag-res[data-level="2"] .meter i { background: #c4552e; } .flag-res[data-level="2"] b { color: #a0412d; }
.rc-prog { display: flex; align-items: center; gap: 12px; margin-top: 14px; } .rc-prog i { flex: 1; height: 10px; border-radius: 6px; background: var(--cream-2); position: relative; overflow: hidden; } .rc-prog i::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: var(--sage); transition: width .3s; }
.fn-track { position: relative; display: grid; gap: 12px; } @media (min-width: 700px) { .fn-track { grid-template-columns: repeat(4, 1fr); } }
.fn-step { position: relative; z-index: 1; border-radius: 16px; padding: 16px 14px; display: grid; gap: 4px; background: #fff; border: 1.5px solid var(--line); opacity: 0; transform: translateY(10px); }
.on .fn-step { animation: msgin .5s ease forwards; animation-delay: calc(var(--i) * .25s); } .fn-step i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; margin-bottom: 4px; } .fn-step .i { width: 22px; height: 22px; }
.fn-step:nth-child(1) i { background: var(--terra); } .fn-step:nth-child(2) i { background: var(--amber); } .fn-step:nth-child(3) i { background: var(--sage); } .fn-step:nth-child(4) i { background: var(--plum); }
.fn-step b { font-size: 16px; color: var(--ink); } .fn-step span { font-size: 13.5px; color: var(--ink-3); }
.fn-flow { position: absolute; left: 4%; right: 4%; top: 36px; height: 4px; z-index: 0; background: repeating-linear-gradient(90deg, var(--cream-3) 0 8px, transparent 8px 14px); display: none; } @media (min-width: 700px) { .fn-flow { display: block; } }
.fn-flow i { position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--terra); opacity: 0; } .on .fn-flow i { animation: flow 3.5s linear infinite; } .fn-flow i:nth-child(2) { animation-delay: .7s; } .fn-flow i:nth-child(3) { animation-delay: 1.4s; } .fn-flow i:nth-child(4) { animation-delay: 2.1s; } .fn-flow i:nth-child(5) { animation-delay: 2.8s; }
@keyframes flow { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { left: 100%; opacity: 0; transform: scale(.4); } }
.ht-bar { position: relative; display: grid; grid-template-columns: 1fr 1.4fr 2.2fr 1fr; gap: 4px; } @media (max-width: 600px) { .ht-bar { grid-template-columns: 1fr 1fr; } }
.ht-seg { border-radius: 14px; padding: 14px 12px; display: grid; gap: 3px; color: #fff; } .ht-seg b { font: 800 18px var(--display); } .ht-seg span { font-weight: 700; font-size: 14px; } .ht-seg small { font-size: 12.5px; opacity: .9; }
.ht-seg.g { background: var(--terra); } .ht-seg.p { background: #d8743a; } .ht-seg.c { background: var(--amber); color: #1b1a17; } .ht-seg.l { background: var(--plum); }
.ht-head { position: absolute; top: -8px; bottom: -8px; left: 0; width: 3px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 3px rgba(255,255,255,.8); } .on .ht-head { animation: head 7s linear infinite; } @keyframes head { to { left: 100%; } }
@media (max-width: 600px) { .ht-head { display: none; } }
.xs-demo { display: grid; gap: 16px; align-items: center; } @media (min-width: 700px) { .xs-demo { grid-template-columns: 1fr 1fr; } }
.xs-post { border: 1px solid #e6e6e6; border-radius: 18px; padding: 14px; display: grid; gap: 10px; font-size: 13px; } .xs-post .xp-head div { font-size: 13px; }
.xs-media { position: relative; height: 170px; border-radius: 14px; background: linear-gradient(135deg, #f2b48f, #c4552e 55%, #8a4f6d); overflow: hidden; }
.xs-warn { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; color: #fff; background: rgba(20,20,20,.45); backdrop-filter: blur(16px); transition: opacity .4s; } .xs-warn .i { width: 26px; height: 26px; } .xs-warn small { opacity: .85; }
.xsens:not(.sens-on) .xs-warn { opacity: 0; }
.xs-switch { display: flex; gap: 12px; align-items: center; cursor: pointer; font-size: 14.5px; } .xs-switch input { position: absolute; opacity: 0; } .xs-switch span { display: grid; } .xs-switch small { color: var(--ink-3); } .xs-switch .sw { width: 46px; height: 26px; } .xs-switch .sw i { width: 22px; height: 22px; } .xs-switch input:checked + .sw i { transform: translateX(20px); }
.xs-switch input:focus-visible + .sw { outline: 2px solid var(--terra); outline-offset: 3px; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--cream-2); margin-bottom: 14px; } .tabs button { font: 700 14px var(--sans); border: 0; background: none; padding: 8px 18px; border-radius: 999px; cursor: pointer; color: var(--ink-2); } .tabs button.on { background: var(--ink); color: var(--cream); }
.tt-table { width: 100%; border-collapse: collapse; font-size: 15px; } .tt-table th { text-align: left; width: 40%; padding: 12px 10px; border-bottom: 1px solid var(--line); color: var(--ink); } .tt-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.tt-table[data-show="canal"] td[data-t="grupo"], .tt-table[data-show="grupo"] td[data-t="canal"] { display: none; } .tt-table tr:last-child th, .tt-table tr:last-child td { border: 0; }
.prose .tt-table { display: table; border: 0; background: none; }
.rl-cols { display: grid; gap: 10px; } @media (min-width: 700px) { .rl-cols { grid-template-columns: repeat(3, 1fr); } }
.rl { border-radius: 16px; padding: 16px; } .rl b { display: flex; align-items: center; gap: 8px; font-size: 16px; } .rl b::before { content: ""; width: 14px; height: 14px; border-radius: 50%; }
.rl ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.rl.ok { background: #eef5ec; } .rl.ok b::before { background: #3d9a52; box-shadow: 0 0 0 4px #d3e8d0; } .rl.mid { background: #fff6e2; } .rl.mid b::before { background: var(--amber); box-shadow: 0 0 0 4px #f6e2b5; } .rl.no { background: #fbe9e4; } .rl.no b::before { background: #c4552e; box-shadow: 0 0 0 4px #f3cfc4; }
.dd { display: grid; gap: 10px; } @media (min-width: 700px) { .dd { grid-template-columns: 1fr 1fr; } }
.dd > div { border-radius: 16px; padding: 16px; display: grid; gap: 8px; } .dd > div > b { font: 800 20px var(--display); } .dd span { display: flex; gap: 8px; align-items: center; font-size: 14.5px; color: var(--ink-2); }
.dd .i { width: 22px; height: 22px; padding: 4px; border-radius: 50%; color: #fff; stroke-width: 3; } .dd .yes { background: #eef5ec; } .dd .yes .i { background: #3d9a52; } .dd .no { background: #fbe9e4; } .dd .no .i { background: #c4552e; }
.sg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 700px) { .sg-grid { grid-template-columns: repeat(4, 1fr); } }
.sg { border-radius: 16px; padding: 16px 14px; display: grid; gap: 4px; background: var(--cream-2); position: relative; overflow: hidden; } .sg b { font-size: 16px; } .sg span { font-size: 13.5px; color: var(--ink-2); }
.sg i { width: 34px; height: 34px; border-radius: 50%; margin-bottom: 6px; position: relative; } .sg i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid; opacity: 0; } .on .sg i::after { animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.sg.n i { background: var(--amber); color: var(--amber); } .sg.a i { background: var(--sage); color: var(--sage); } .sg.t i { background: var(--terra); color: var(--terra); } .sg.d i { background: var(--plum); color: var(--plum); }
.sg.a i::after { animation-delay: .6s !important; } .sg.t i::after { animation-delay: 1.2s !important; } .sg.d i::after { animation-delay: 1.8s !important; }
.mix-bar { display: flex; height: 54px; border-radius: 14px; overflow: hidden; gap: 3px; } .mix-bar i { width: 0; display: grid; place-items: center; color: #fff; font: 800 15px var(--display); font-style: normal; transition: width 1.2s cubic-bezier(.3,.9,.3,1); overflow: hidden; }
.on .mix-bar i { width: var(--w); } .mix-bar .s, .mix-leg .s { background: var(--sage); } .mix-bar .m, .mix-leg .m { background: var(--terra); } .mix-bar .p, .mix-leg .p { background: var(--plum); } .mix-bar .c, .mix-leg .c { background: var(--amber); } .mix-bar .c { color: #1b1a17; }
.mix-leg { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 14px; color: var(--ink-2); } .mix-leg span { display: inline-flex; gap: 7px; align-items: center; } .mix-leg i { width: 12px; height: 12px; border-radius: 4px; }
.clk-row { display: grid; gap: 10px; } @media (min-width: 700px) { .clk-row { grid-template-columns: repeat(3, 1fr); } }
.clk { position: relative; border-radius: 18px; padding: 18px; background: var(--cream-2); display: grid; gap: 2px; overflow: hidden; } .clk.me { background: var(--ink); color: var(--cream); }
.clk small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; } .clk-t { font: 800 38px/1.1 var(--display); font-variant-numeric: tabular-nums; } .clk.me .clk-t { color: #f3c96b; } .clk span { font-size: 14px; }
.clk-dial { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 58px; height: 58px; border-radius: 50%; border: 2px solid currentColor; opacity: .35; }
.clk-dial i { position: absolute; left: 50%; bottom: 50%; width: 2px; border-radius: 2px; background: currentColor; transform-origin: bottom center; } .clk-dial .h { height: 16px; margin-left: -1px; } .clk-dial .m { height: 23px; margin-left: -1px; }
.clk-diff { margin: 12px 0 0; font-size: 15px; color: var(--ink-2); }

/* Secciones de páginas con móviles */
.dev-section .showcase { margin: 0; }
.dev-pair { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .hero-dev .dev, .fchip, .beat, .upv, .spin, .mq span, .tt-disc i, .floaters i, .reel-prog i, .tt-bar i, .reel-bg, .tt-bg, .dm-scan i::after, .ht-head, .fn-flow i, .sg i::after, .ig-grid .pop { animation: none !important; }
  .seq > *, .fn-step, .tg-msg.new { opacity: 1 !important; transform: none !important; animation: none !important; }
}
.ig-stats span { display: grid; justify-items: center; min-width: 0; } .ig-stats small { font-size: 8.5px; white-space: nowrap; }
.db-feed p span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .db-feed p small { white-space: nowrap; }