/* ListoNet v13.1.45 · Mascota Kim
   Módulo aislado: planes, FAB y banner. */

.ln-kim {
  position: absolute;
  width: var(--ln-kim-size, 96px);
  height: var(--ln-kim-size, 96px);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.ln-kim-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.26));
  user-select: none;
  -webkit-user-drag: none;
}

/* Posiciones genéricas para widgets configurables fuera de las cards. */
.ln-kim-pos-bottom-right  { right: -8px; bottom: -10px; }
.ln-kim-pos-bottom-left   { left: -8px; bottom: -10px; }
.ln-kim-pos-top-right     { right: -8px; top: -10px; }
.ln-kim-pos-top-left      { left: -8px; top: -10px; }
.ln-kim-pos-bottom-center { left: 50%; bottom: -12px; transform: translateX(-50%); }

/* ===== Planes ===== */
.ln-kim-plan {
  z-index: 8;
  opacity: 1;
  pointer-events: none;
}
.ln-kim-plan .ln-kim-img {
  border-radius: 0 !important;
  transform-origin: bottom center;
}

/* ===== FAB =====
   Solo el FAB conserva formato circular porque ahí Kim funciona como icono. */
.ln-kim-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.18);
  flex: none;
}
.ln-kim-fab-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
  transition: transform .2s ease;
}
.fab-pill:hover .ln-kim-fab-img { transform: scale(1.08); }

/* ===== Banner ===== */
.ln-kim-banner {
  position: absolute;
  bottom: 4px;
  left: 0;
  width: var(--ln-kim-size, 110px);
  height: var(--ln-kim-size, 110px);
  pointer-events: none !important;
  z-index: 2;
  opacity: 0;
  transform: translate3d(var(--ln-kim-x,0px),0,0) scaleX(1);
  transition: opacity .2s ease;
  will-change: transform;
}
.ln-kim-banner.ln-kim-activo { opacity: 1; }
.ln-kim-banner.ln-kim-flip {
  transform: translate3d(var(--ln-kim-x,0px),0,0) scaleX(-1);
}
.ln-kim-banner .ln-kim-img {
  border-radius: 0 !important;
  transform-origin: 50% 100%;
}

/* Microanimaciones de estado. El desplazamiento horizontal queda en el contenedor. */
.ln-kim-banner[data-kim-state="caminar"] .ln-kim-img {
  animation: ln-kim-walk-step .48s ease-in-out infinite;
}
.ln-kim-banner[data-kim-state="lamerse"] .ln-kim-img {
  animation: ln-kim-lick .9s ease-in-out infinite;
}
.ln-kim-banner[data-kim-state="saluda"] .ln-kim-img {
  animation: ln-kim-wave .7s ease-in-out infinite alternate;
}
.ln-kim-banner[data-kim-state="apunta"] .ln-kim-img {
  animation: ln-kim-point .75s ease-in-out infinite alternate;
}

@keyframes ln-kim-walk-step {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}
@keyframes ln-kim-lick {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  45% { transform: translateY(4px) rotate(4deg) scale(.985); }
  70% { transform: translateY(1px) rotate(-2deg) scale(1.01); }
}
@keyframes ln-kim-wave {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-7px) rotate(3deg); }
}
@keyframes ln-kim-point {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-4px) rotate(4deg); }
}

/* X, CTA, texto e imagen publicitaria siempre por delante de la mascota. */
.lnb-cerrar { z-index: 20; }
.lnb-boton,
.lnb-titulo,
.lnb-mensaje,
.lnb-imagen { position: relative; z-index: 3; }

/* Visibilidad por dispositivo */
@media (max-width: 640px) {
  .ln-kim-hide-mobile { display: none !important; }
  .ln-kim-banner {
    width: min(var(--ln-kim-size,110px), 20vh);
    height: min(var(--ln-kim-size,110px), 20vh);
  }
}
@media (min-width: 641px) {
  .ln-kim-hide-desktop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ln-kim,
  .ln-kim-plan,
  .ln-kim-banner,
  .ln-kim-banner .ln-kim-img {
    animation: none !important;
    transition: opacity .2s ease !important;
  }
  .ln-kim-banner { transform: translate3d(0,0,0) !important; }
}

/* ===== v14.1.1 · Módulos configurables del index (Kim o banner por sección) ===== */
/* Posiciones adicionales para Kim de sección, además de las bottom/top ya definidas. */
.ln-kim-pos-center { left: 50%; bottom: -10px; transform: translateX(-50%); }
.ln-kim-pos-left    { left: -8px; bottom: 8px; }
.ln-kim-pos-right   { right: -8px; bottom: 8px; }

.ln-kim-modulo { z-index: 4; }
/* Contenedores que no declaraban position:relative propio (necesario para Kim de sección). */
.plans-section,
.site-footer { position: relative; }
@media (max-width: 640px) {
  .ln-kim-modulo {
    width: var(--ln-kim-size-movil, 90px);
    height: var(--ln-kim-size-movil, 90px);
  }
}

.ln-modulo-banner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 18px auto;
  max-width: 980px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(15, 30, 24, .78);
  border: 1px solid rgba(168, 230, 53, .22);
}
.ln-modulo-banner-img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; flex: none; }
.ln-modulo-banner-body { flex: 1 1 220px; min-width: 0; }
.ln-modulo-banner-titulo { display: block; color: #f5fbf7; font-weight: 700; }
.ln-modulo-banner-texto { margin: 4px 0 0; color: #a8b6aa; font-size: 13px; line-height: 1.45; }
.ln-modulo-banner-cta {
  flex: none; text-decoration: none; font-weight: 700; font-size: 13px;
  padding: 8px 16px; border-radius: 999px; color: #06230d;
  background: linear-gradient(135deg, #a8e635, #4ade80);
}
@media (max-width: 640px) {
  .ln-modulo-banner--sin-movil { display: none !important; }
}
@media (min-width: 641px) {
  .ln-modulo-banner--sin-desktop { display: none !important; }
}