/* ═══════════════════════════════════════════════════════════
   RODIZIO COLOMBIA — links.css
   Árbol de links premium. Depende de styles.css para variables
   y fuentes. Solo estilos exclusivos de esta página.
═══════════════════════════════════════════════════════════ */

/* ── RESET DE PÁGINA ── */
.links-page {
  min-height: 100vh;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════
   FONDO CON SLIDESHOW
═══════════════════════════════════════════════════════════ */
.lk-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.lk-bg-images {
  position: absolute;
  inset: 0;
}

.lk-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.lk-bg-img.active { opacity: 1; }

.lk-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6,2,1,0.78) 0%,
    rgba(10,5,2,0.70) 40%,
    rgba(6,2,1,0.85) 100%
  );
  backdrop-filter: blur(1px);
}

/* Embers flotantes */
.lk-embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.lk-ember {
  position: absolute;
  bottom: -10px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #e8884a 0%, #b94f2f 60%, transparent 100%);
  animation: lkEmberRise 5s ease-in infinite;
  animation-delay: var(--d);
  opacity: 0;
}
@keyframes lkEmberRise {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  10%  { opacity: 0.9; }
  80%  { opacity: 0.4; }
  100% { transform: translateY(-100vh) scale(0.3); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL
═══════════════════════════════════════════════════════════ */
.lk-main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px 60px;
}

.lk-card {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ═══════════════════════════════════════════════════════════
   HEADER: AVATAR + NOMBRE
═══════════════════════════════════════════════════════════ */
.lk-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.lk-avatar-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 3px;
  background: var(--grad-fire);
  box-shadow: 0 0 0 4px rgba(185,79,47,0.18), 0 0 40px rgba(185,79,47,0.22);
  animation: lkAvatarGlow 3s ease-in-out infinite;
}
@keyframes lkAvatarGlow {
  0%,100% { box-shadow: 0 0 0 4px rgba(185,79,47,0.18), 0 0 40px rgba(185,79,47,0.22); }
  50%      { box-shadow: 0 0 0 6px rgba(201,146,79,0.30), 0 0 60px rgba(201,146,79,0.28); }
}

.lk-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--bg-card);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.lk-avatar img { width: 100%; height: 100%; object-fit: contain; }

.lk-brand {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.3px;
}
.lk-brand em {
  font-family: var(--font-display);
  font-style: italic;
  background: var(--grad-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lk-tagline {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.lk-verified {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lk-vdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22a84f;
  animation: lkPulse 1.8s ease-in-out infinite;
}
@keyframes lkPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(0.8); }
}

/* ═══════════════════════════════════════════════════════════
   CTA PRINCIPAL
═══════════════════════════════════════════════════════════ */
.lk-hero-cta { width: 100%; }

.lk-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 16px;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}

.lk-btn-primary {
  background: linear-gradient(135deg, #1fad4e 0%, #17923f 100%);
  box-shadow: 0 8px 32px rgba(31,173,78,0.35);
  color: #fff;
}
.lk-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 48px rgba(31,173,78,0.50);
}

.lk-btn-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  animation: lkBtnPulse 2.4s ease-out infinite;
  pointer-events: none;
  background: rgba(255,255,255,0.08);
}
@keyframes lkBtnPulse {
  0%   { opacity: 0; transform: scale(0.95); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.04); }
}

.lk-btn-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
}

.lk-btn-text {
  display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.lk-btn-text strong {
  font-family: var(--font-head);
  font-size: 15px; font-weight: 700;
}
.lk-btn-text small {
  font-size: 11px; opacity: 0.85;
}

.lk-btn-arrow {
  font-size: 18px;
  font-weight: 700;
  opacity: 0.8;
  transition: transform var(--transition);
}
.lk-btn:hover .lk-btn-arrow { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════
   STRIP DE PRODUCTOS
═══════════════════════════════════════════════════════════ */
.lk-products-strip {
  background: rgba(22,22,22,0.6);
  border: 1px solid var(--bg-border);
  border-radius: 18px;
  padding: 16px 18px;
  backdrop-filter: blur(12px);
}

.lk-strip-label {
  font-family: var(--font-head);
  font-size: 9px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-align: center;
}

.lk-products-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.lk-product-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: 14px;
  text-decoration: none;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.lk-product-chip:hover {
  transform: translateY(-4px);
  border-color: rgba(185,79,47,0.4);
  box-shadow: 0 10px 28px rgba(185,79,47,0.15);
}
.lk-product-chip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
}
.lk-product-chip span {
  font-family: var(--font-head);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  text-align: center;
}
.lk-product-chip-exp { border-color: rgba(201,146,79,0.3); }
.lk-product-chip-exp span { color: var(--accent-gold); }
.lk-product-chip-exp:hover { border-color: rgba(201,146,79,0.55); }

/* ═══════════════════════════════════════════════════════════
   DIVIDER
═══════════════════════════════════════════════════════════ */
.lk-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 9px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-muted);
}
.lk-div-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bg-border), transparent);
}

/* ═══════════════════════════════════════════════════════════
   LINKS SOCIALES
═══════════════════════════════════════════════════════════ */
.lk-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lk-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid var(--bg-border);
  background: rgba(22,22,22,0.55);
  backdrop-filter: blur(12px);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
  position: relative;
  overflow: hidden;
}
.lk-link::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition);
  border-radius: inherit;
}
.lk-link:hover { transform: translateY(-3px) scale(1.01); }
.lk-link:hover::before { opacity: 1; }

/* Iconos */
.lk-link-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0;
}

/* Cuerpo */
.lk-link-body {
  display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.lk-link-body strong {
  font-family: var(--font-head);
  font-size: 15px; font-weight: 700;
  color: var(--text-primary);
}
.lk-link-body small {
  font-size: 11px;
  color: var(--text-muted);
}

/* Badges */
.lk-link-badge {
  font-family: var(--font-head);
  font-size: 9px; font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 50px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── WhatsApp ── */
.lk-link-wa { border-color: rgba(37,211,102,0.28); }
.lk-link-wa::before { background: rgba(37,211,102,0.05); }
.lk-link-wa:hover { border-color: rgba(37,211,102,0.5); box-shadow: 0 12px 36px rgba(37,211,102,0.15); }
.lk-icon-wa { background: rgba(37,211,102,0.14); color: #25d366; }
.lk-badge-live {
  background: rgba(34,168,79,0.15);
  border: 1px solid rgba(34,168,79,0.3);
  color: #22a84f;
  animation: lkBadgeLive 2s ease-in-out infinite;
}
@keyframes lkBadgeLive {
  0%,100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── Instagram ── */
.lk-link-ig { border-color: rgba(225,48,108,0.22); }
.lk-link-ig::before { background: rgba(225,48,108,0.05); }
.lk-link-ig:hover { border-color: rgba(225,48,108,0.45); box-shadow: 0 12px 36px rgba(225,48,108,0.14); }
.lk-icon-ig {
  background: linear-gradient(135deg, rgba(253,87,35,0.18) 0%, rgba(225,48,108,0.18) 50%, rgba(131,58,180,0.18) 100%);
  color: #e1306c;
}
.lk-badge-ig {
  background: rgba(225,48,108,0.12);
  border: 1px solid rgba(225,48,108,0.28);
  color: #e1306c;
}

/* ── Facebook ── */
.lk-link-fb { border-color: rgba(24,119,242,0.2); }
.lk-link-fb::before { background: rgba(24,119,242,0.05); }
.lk-icon-fb { background: rgba(24,119,242,0.14); color: #1877f2; }

/* ── TikTok ── */
.lk-link-tt { border-color: rgba(254,44,85,0.2); }
.lk-link-tt::before { background: rgba(254,44,85,0.04); }
.lk-icon-tt { background: rgba(0,0,0,0.3); color: #fff; }

/* ── Facebook y TikTok activos ── */
.lk-badge-soon {
  background: rgba(107,92,78,0.2);
  border: 1px solid rgba(107,92,78,0.3);
  color: var(--text-muted);
}

/* ── Web ── */
.lk-link-web { border-color: rgba(185,79,47,0.28); }
.lk-link-web::before { background: rgba(185,79,47,0.05); }
.lk-link-web:hover { border-color: rgba(185,79,47,0.5); box-shadow: 0 12px 36px rgba(185,79,47,0.14); }
.lk-icon-web { background: rgba(185,79,47,0.14); color: var(--accent-lt); }
.lk-badge-web {
  background: rgba(185,79,47,0.12);
  border: 1px solid rgba(185,79,47,0.28);
  color: var(--accent-lt);
}

/* ── Mapas ── */
.lk-link-maps { border-color: rgba(66,133,244,0.22); }
.lk-link-maps::before { background: rgba(66,133,244,0.05); }
.lk-link-maps:hover { border-color: rgba(66,133,244,0.45); box-shadow: 0 12px 36px rgba(66,133,244,0.14); }
.lk-icon-maps { background: rgba(66,133,244,0.14); color: #4285f4; }
.lk-badge-maps {
  background: rgba(66,133,244,0.12);
  border: 1px solid rgba(66,133,244,0.28);
  color: #4285f4;
}

/* ═══════════════════════════════════════════════════════════
   CTA EXPERIENCIA
═══════════════════════════════════════════════════════════ */
.lk-cta-exp {
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(201,146,79,0.12) 0%, rgba(185,79,47,0.10) 100%);
  border: 1px solid rgba(201,146,79,0.28);
  overflow: hidden;
  backdrop-filter: blur(12px);
  transition: transform var(--transition), box-shadow var(--transition);
}
.lk-cta-exp:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(201,146,79,0.18); }

.lk-exp-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}

.lk-exp-text {
  display: flex; flex-direction: column; gap: 3px; flex: 1;
}
.lk-exp-eyebrow {
  font-family: var(--font-head);
  font-size: 9px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--accent-gold);
}
.lk-exp-text strong {
  font-family: var(--font-head);
  font-size: 15px; font-weight: 700;
  color: var(--text-primary);
}
.lk-exp-text p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.lk-exp-btn {
  flex-shrink: 0;
  padding: 11px 18px;
  border-radius: 12px;
  background: var(--grad-gold);
  color: #1a0e08;
  font-family: var(--font-head);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.lk-exp-btn:hover { transform: scale(1.04); box-shadow: 0 6px 20px rgba(201,146,79,0.4); }

/* ═══════════════════════════════════════════════════════════
   FOOTER MINI
═══════════════════════════════════════════════════════════ */
.lk-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
}

.lk-theme-row { width: 100%; display: flex; justify-content: center; }

.lk-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 50px;
  background: rgba(36,36,36,0.6);
  border: 1px solid var(--bg-border);
  font-family: var(--font-head);
  font-size: 11px; font-weight: 700;
  color: var(--text-muted);
  backdrop-filter: blur(8px);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
}
.lk-theme-btn:hover { color: var(--text-secondary); border-color: rgba(185,79,47,0.3); }

.lk-footer-copy {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-head);
  letter-spacing: 1px;
}

.lk-monster {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color var(--transition);
  font-family: var(--font-head);
}
.lk-monster:hover { color: var(--accent-lt); }
.lk-monster strong { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════
   MODO CLARO — overrides
═══════════════════════════════════════════════════════════ */
body.light-mode .lk-bg-overlay {
  background: linear-gradient(
    180deg,
    rgba(249,244,238,0.80) 0%,
    rgba(239,232,222,0.72) 40%,
    rgba(249,244,238,0.88) 100%
  );
}
body.light-mode .lk-products-strip,
body.light-mode .lk-link {
  background: rgba(255,255,255,0.72);
}
body.light-mode .lk-theme-btn {
  background: rgba(255,255,255,0.7);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .lk-main { padding: 36px 16px 52px; }
  .lk-brand { font-size: 22px; }
  .lk-avatar-ring { width: 88px; height: 88px; }
  .lk-exp-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lk-exp-btn { width: 100%; text-align: center; }
  .lk-link-badge { display: none; }
}

@media (max-width: 360px) {
  .lk-products-row { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .lk-link { padding: 13px 14px; gap: 11px; }
  .lk-link-icon { width: 40px; height: 40px; }
}
/* ── Facebook activo ── */
.lk-link-fb:hover { border-color: rgba(24,119,242,0.5); box-shadow: 0 12px 36px rgba(24,119,242,0.15); }
.lk-badge-fb {
  background: rgba(24,119,242,0.12);
  border: 1px solid rgba(24,119,242,0.28);
  color: #1877f2;
}

/* ── TikTok activo ── */
.lk-link-tt:hover { border-color: rgba(254,44,85,0.45); box-shadow: 0 12px 36px rgba(254,44,85,0.15); }
.lk-badge-tt {
  background: rgba(254,44,85,0.12);
  border: 1px solid rgba(254,44,85,0.28);
  color: #fe2c55;
}

/* Grid 4 cols mobile */
@media (max-width: 380px) {
  .lk-products-row { grid-template-columns: repeat(2, 1fr); }
}