/* links.softopiax.com: página de enlaces (estilo "link in bio") con la marca de base.css.
   Una columna estrecha, centrada; cada enlace es una tarjeta con icono, título y una línea. */
.lk-body { min-height: 100vh; background: radial-gradient(120% 60% at 50% 0%, var(--blue-100) 0%, var(--bg-2) 55%); }
.lk { width: min(480px, 100% - 32px); margin-inline: auto; padding: 48px 0 32px; }

.lk-head { display: grid; justify-items: center; text-align: center; gap: 14px; margin-bottom: 28px; }
.lk-logo { margin: 0; line-height: 0; }
.lk-logo img { width: 200px; height: auto; }
.lk-bio { color: var(--muted); font-size: 15px; max-width: 30ch; }

.lk-list { display: grid; gap: 12px; }
.lk-card, .lk-row { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.lk-card { padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 1px 2px rgba(11, 31, 107, .05); transition: transform .15s, box-shadow .15s, border-color .15s; }
a.lk-card:hover, .lk-row:hover { border-color: var(--blue-200); }
a.lk-card:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -18px rgba(30, 91, 255, .55); }
.lk-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--blue-50); color: var(--blue); }
.lk-ico svg { width: 22px; height: 22px; }
.lk-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.lk-t { font: 700 17px/1.2 var(--body); letter-spacing: -.01em; }
.lk-s { font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.lk-go { flex: none; width: 18px; height: 18px; color: var(--muted); }

/* Destacado: la oferta del sitio web, en el degradado del logo */
.lk-feat { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 18px 40px -18px rgba(10, 68, 202, .8); }
.lk-feat .lk-ico { background: rgba(255, 255, 255, .16); color: #fff; }
.lk-feat .lk-s, .lk-feat .lk-go { color: rgba(255, 255, 255, .85); }
.lk-feat .lk-s b { color: #fff; }
.lk-feat .was { color: rgba(255, 255, 255, .7); }
.lk-s .was { font-size: 1em; vertical-align: 0; margin-right: .15em; }
.lk-top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.lk-top .off { background: #fff; color: #b42318; padding: 4px 8px; font-size: 10px; }
.lk-cuenta { padding: 4px 8px; font-size: 11px; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #fff; }
.oferta-terminada .lk-top { display: none; }

/* Talleres: una tarjeta con su enlace principal y una fila por taller */
.lk-group { display: grid; gap: 0; padding: 6px; }
.lk-row { padding: 10px; border-radius: 12px; border: 1px solid transparent; }
.lk-row-main { padding: 8px 10px 12px; }
.lk-row + .lk-row:not(.lk-row-main) { border-top-color: var(--line); border-radius: 0; }
.lk-row:not(.lk-row-main):hover { background: var(--blue-50); border-radius: 12px; }
.lk-date { flex: none; display: grid; justify-items: center; text-align: center; width: 44px; font: 600 10px/1 var(--mono); text-transform: uppercase; color: var(--blue); }
.lk-date b { font: 800 20px/1 var(--cond); font-stretch: 72%; color: var(--ink); margin-bottom: 2px; }
.lk-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; }
.lk-price { flex: none; font: 600 13px var(--mono); color: var(--blue-deep); background: var(--blue-50); border-radius: 999px; padding: 4px 10px; }

.lk-wa .lk-ico { background: var(--ok-bg); color: var(--ok-ink); }

.lk-foot { background: none; padding: 0; display: grid; justify-items: center; gap: 14px; margin-top: 32px; color: var(--muted); font-size: 12.5px; }
.lk-social { display: flex; gap: 10px; font: inherit; text-transform: none; }
.lk-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: color .15s, border-color .15s; }
.lk-social a:hover { color: var(--blue); border-color: var(--blue-200); }
.lk-social svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) { .lk-card, .lk-social a { transition: none; } a.lk-card:hover { transform: none; } }