/* Plantilla "linkme": copia del aspecto de link.me (medido en una página real de link.me el 12-oct-2026).
   En el móvil, link.me escala casi todo con el ancho de la pantalla: las medidas van en vw a partir
   de las medidas a 390 px (1vw = 3,9 px). En el ordenador, columna fija de 566 px sobre la foto
   difuminada, con sus medidas en px. Código nuestro: de link.me solo se ha copiado el aspecto. */
html, body { background: #000; margin: 0; }
/* Como link.me: sin barra de desplazamiento visible (en el ordenador no descentra la columna). */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
/* link.me usa Inter sin el eje de tamaño óptico (letra de texto también en el nombre grande): sin
   esto, nuestra Inter 4 elige la versión "display" a 32 px y el nombre sale 11 px más estrecho. */
body.lm { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-optical-sizing: none; -webkit-font-smoothing: antialiased; }
.lm a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.lm img { display: block; max-width: 100%; }
.lm-fondo { display: none; }

.lm-caja { position: relative; width: 100%; background: #000; padding-bottom: 1px; display: flex; flex-direction: column; min-height: 100vh; }
.lm-hero { position: relative; width: 100vw; height: 100vw; margin-bottom: 6.9333vw; overflow: hidden; }
.lm-hero img { width: 100%; height: 100%; object-fit: cover; }
.lm-cuerpo { position: relative; top: -44vw; margin-bottom: -44vw; display: flex; flex-direction: column; }

.lm-datos { position: relative; display: flex; flex-direction: column; align-items: center; }
.lm-datos::after { content: ""; position: absolute; left: 0; right: 0; top: -21.6026vw; bottom: -1px;
  background: linear-gradient(rgba(5, 0, 0, 0) 12%, rgba(0, 0, 0, 0.38) 46%, rgba(0, 0, 0, 0.88) 76%, rgb(0, 0, 0) 100%); }
.lm-nombre { position: relative; z-index: 2; display: flex; justify-content: center; width: 100%; margin-bottom: 0.4103vw; }
.lm-nombre-w { position: relative; display: flex; align-items: center; }
.lm-nombre h2 { margin: 0; font-size: 32px; font-weight: 750; line-height: 40px; letter-spacing: 0.25px; color: #fff; text-align: center; white-space: nowrap; }
.lm-verif { position: absolute; left: 100%; top: 9.5px; width: 21px; height: 21px; margin-left: 3px; }
.lm-usuario { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; width: 100%; padding-bottom: 8px;
  font-size: 14px; font-weight: 500; line-height: 15px; color: rgba(255, 255, 255, 0.5); }
.lm-redes { position: relative; z-index: 2; display: flex; justify-content: center; width: 100%; }
.lm-redes-in { display: flex; padding: 2px 0 3.7330vw 2px; }
.lm-redes span { display: flex; padding: 0.25vw; }
.lm-redes a { display: flex; align-items: center; justify-content: center; width: 10.0513vw; height: 10.1795vw; border-radius: 6.6670vw; overflow: hidden; }
.lm-redes img { width: 100%; height: 100%; object-fit: cover; }

.lm-zona { position: relative; z-index: 2; background: #000; display: flex; flex-direction: column; }
.lm-lista { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 12px; padding: 0 16px; }
.lm-tarjeta { position: relative; display: block; overflow: hidden; background: #000; margin-bottom: 2.6670vw; }
.lm-tarjeta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lm-tarjeta::after, .lm-sombra { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(35, 6, 35, 0) 0%, rgba(6, 13, 18, 0.6) 128.76%); }
.lm-tarjeta::after { z-index: 1; }
.lm-sombra { z-index: 3; }
.lm-grande { width: 100%; border-radius: 3.2vw; }
.lm-grande .lm-hueco { height: 53.3333vw; margin-bottom: 2.6670vw; }
.lm-peq { width: calc(50% - 6px); height: 28.2821vw; border-radius: 4vw; }
.lm-insignia { position: absolute; z-index: 9; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; }
.lm-insignia img { border-radius: 50%; object-fit: cover; }
.lm-grande .lm-insignia { top: 2.4vw; left: 7px; width: 10vw; height: 10vw; }
.lm-grande .lm-insignia img { width: 8vw; height: 8vw; }
.lm-peq .lm-insignia { top: 1.86vw; left: 7px; width: 5.8vw; height: 5.8vw; }
.lm-peq .lm-insignia img { width: 4.8vw; height: 4.8vw; }
.lm-etiqueta { position: absolute; left: 0; right: 0; bottom: 1.35vw; z-index: 4; }
.lm-etiqueta div { display: flex; align-items: flex-end; justify-content: center; min-height: 23px; height: 100%; color: #fff; text-align: center; font-weight: 600; }
.lm-etiqueta span { display: flex; align-items: flex-end; overflow: hidden; min-height: 23px; }
.lm-grande .lm-etiqueta { top: 48.6497vw; }
.lm-grande .lm-etiqueta div { margin: 0 2.2956vw; font-size: 18px; line-height: 23.4px; }
.lm-peq .lm-etiqueta { top: 21.0256vw; }
.lm-peq .lm-etiqueta div { margin: 0 1.1098vw; font-size: 3.7330vw; line-height: 4.8529vw; }

.lm-galeria { margin-bottom: 4px; overflow: hidden; }
.lm-galeria-in { position: relative; padding: 16px; border-radius: 16px; overflow: hidden; }
.lm-galeria-scroll { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lm-galeria-scroll::-webkit-scrollbar { display: none; }
.lm-galeria-fila { display: flex; gap: 12px; align-items: flex-start; }
.lm-galeria-fila img { flex: 0 0 auto; width: 23.0769vw; height: 23.0769vw; border-radius: 16px; object-fit: cover; }
.lm-galeria-borde { position: absolute; top: 0; bottom: 0; right: 0; width: 40px; z-index: 10; pointer-events: none;
  background: linear-gradient(to left, rgb(0, 0, 0), rgba(0, 0, 0, 0)); }
.lm-pie { height: 70px; background: #000; }

/* Barra de arriba que aparece al bajar (foto pequeña, nombre y verificado). */
.lm-cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 9; height: 52px; display: flex; align-items: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.lm-cabecera.lm-visible { opacity: 1; }
.lm-cabecera-fondo { position: absolute; inset: 0; z-index: -1; background: rgb(18, 18, 18); box-shadow: rgba(13, 14, 54, 0.1) 0 3.12px 7.2813px 0; }
.lm-cabecera-perfil { display: flex; align-items: center; padding-left: 4vw; }
.lm-cabecera-perfil img.lm-cabecera-foto { width: 8vw; height: 8vw; border-radius: 50%; object-fit: cover; margin-right: 2.6670vw; }
.lm-cabecera-perfil span { font-size: 16.6413px; font-weight: 600; line-height: 24.962px; color: #fff; }
.lm-cabecera-perfil img.lm-cabecera-verif { width: 16.6px; height: 16.6px; margin-left: 3.9px; margin-bottom: 2px; }

@media (min-width: 768px) {
  html, body { background: #fff; }
  .lm-fondo { display: block; position: fixed; inset: 0; z-index: -2; filter: blur(50px); pointer-events: none; }
  .lm-fondo img { width: 100%; height: 100%; max-width: none; object-fit: fill; }
  .lm-caja { width: 566px; margin: 34px auto 0; border-radius: 30px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.5) 0 1px 10px 2px; min-height: 0; padding-bottom: 0; }
  .lm-hero { width: 566px; height: 546px; margin-bottom: 0; }
  .lm-cuerpo { top: -139px; margin-bottom: -139px; }
  .lm-datos::after { top: -144px; bottom: 0; }
  .lm-nombre { margin-bottom: 0; }
  .lm-redes-in { padding: 2px 0 11px 2px; }
  .lm-redes span { padding: 1px; }
  .lm-redes a { width: 37.5px; height: 38px; border-radius: 25px; }
  .lm-lista { padding: 0; margin: 0 14px; }
  .lm-tarjeta { margin-bottom: 10px; border-radius: 12px; }
  .lm-grande .lm-hueco { height: 316px; margin-bottom: 10px; }
  .lm-peq { width: 262px; height: 151px; }
  .lm-grande .lm-insignia { top: 14px; left: 12px; width: 40px; height: 40px; }
  .lm-grande .lm-insignia img { width: 40px; height: 40px; }
  .lm-peq .lm-insignia { top: 10px; left: 10px; width: 28px; height: 28px; }
  .lm-peq .lm-insignia img { width: 28px; height: 28px; }
  .lm-etiqueta { bottom: 6px; top: auto !important; }
  .lm-grande .lm-etiqueta div { margin: 0 10px; font-size: 20px; line-height: 26px; }
  .lm-peq .lm-etiqueta div { margin: 0 5px; font-size: 16px; line-height: 20.8px; }
  .lm-galeria-fila img { width: 136px; height: 136px; }
  .lm-pie { height: 71px; }
  .lm-cabecera { left: 50%; right: auto; width: 566px; transform: translateX(-50%); height: 50px; padding-top: 0; }
  .lm-cabecera-perfil { padding-left: 15px; }
  .lm-cabecera-perfil img.lm-cabecera-foto { width: 30px; height: 30px; margin-right: 10px; }
  .lm-cabecera-perfil img.lm-cabecera-verif { width: 13px; height: 13px; margin-left: 5px; }
}