/* Diseños: column (panel estilo Linktree) y card (tarjeta estilo guns.lol), foto de fondo y detalles */
.fondo-img { position: fixed; inset: -24px; z-index: -1; background-size: cover; background-position: center; }

/* column: panel central sobre el fondo */
body[data-layout="column"] .page { background: var(--panel); margin-top: 12px; padding-top: 40px; border-radius: 24px 24px 0 0; min-height: calc(100dvh - 12px); }
@media (max-width: 520px) { body[data-layout="column"] .page { margin-top: 0; border-radius: 0; min-height: 100vh; } }

/* card: tarjeta chica al centro de la pantalla */
body[data-layout="card"] { display: flex; flex-direction: column; padding: 16px; min-height: 100dvh; }
body[data-layout="card"] .page { margin: auto; }
/* La tarjeta es un vidrio esmerilado que se desvanece hacia arriba: el nombre y la bio quedan casi sobre el fondo */
body[data-layout="card"] .page { position: relative; isolation: isolate; border-radius: 14px; padding: 28px 24px 24px; }
body[data-layout="card"] .page::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--panel); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(transparent 0%, rgba(0,0,0,.45) 24%, #000 52%); mask-image: linear-gradient(transparent 0%, rgba(0,0,0,.45) 24%, #000 52%); }

/* Foto grande de fondo (estilo "Héroe"): se desvanece abajo y a los costados */
.fondo-foto { position: fixed; z-index: -2; top: 0; left: 50%; translate: -50% 0; width: min(920px, 100vw); height: 80vh; background-size: cover; background-position: center 18%; opacity: .55; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 30%, transparent), linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(#000 30%, transparent), linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); mask-composite: intersect; }
body[data-layout="card"] .links { margin-top: 18px; }

/* Ícono dentro de un círculo y título centrado (estilo Linktree) */
body[data-icon="circle"] .btn > svg:first-child { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--icon-bg); color: var(--icon-fg); }
body[data-rows="center"] .btn .tx { text-align: center; justify-items: center; }
body[data-rows="center"] .btn .go { visibility: hidden; width: 44px; }

/* Tarjeta con imagen grande */
.btn.con-imagen { flex-direction: column; align-items: stretch; gap: 10px; padding: 8px 8px 12px; }
.btn.con-imagen .thumb { width: 100%; max-height: 220px; object-fit: cover; border-radius: calc(var(--btn-radius) - 4px); }
.btn.con-imagen .go { display: none; }
.btn.con-imagen .badge { position: absolute; top: 14px; right: 14px; }

/* Glitch en el nombre */
.glitch { position: relative; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: .8; }
.glitch::before { color: #0ff; animation: lt-glitch1 3s infinite steps(1); }
.glitch::after { color: #f0f; animation: lt-glitch2 3s infinite steps(1); }
@keyframes lt-glitch1 { 0%, 92%, 100% { clip-path: inset(0 0 100% 0); transform: none; } 93% { clip-path: inset(10% 0 55% 0); transform: translate(-3px); } 96% { clip-path: inset(60% 0 8% 0); transform: translate(2px); } }
@keyframes lt-glitch2 { 0%, 92%, 100% { clip-path: inset(0 0 100% 0); transform: none; } 94% { clip-path: inset(50% 0 20% 0); transform: translate(3px); } 97% { clip-path: inset(5% 0 70% 0); transform: translate(-2px); } }
.bio.typing::after { content: "|"; margin-left: 2px; animation: lt-blink 1s steps(1) infinite; }
@keyframes lt-blink { 50% { opacity: 0; } }

/* Visitas y botón de música */
.visitas { display: flex; align-items: center; gap: 6px; margin-top: 14px; align-self: start; justify-self: start; font-size: .8rem; color: var(--muted); }
.visitas svg { width: 16px; height: 16px; }
.musica { position: fixed; top: 12px; left: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--btn-border); background: var(--panel, #0008); color: var(--text); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.musica svg { width: 20px; height: 20px; }
.musica:hover { border-color: var(--accent); }

.avatar.invertido { filter: invert(1) brightness(1.8) contrast(2.4); } /* líneas finas: se refuerzan para que no se pierdan al achicar */