/* KairSun Web — GUÍAS v3 (lote B) + v4 VIDA: capa aditiva sobre ks-guide-v2.css.
 *
 * El sistema vive en `ks-guide-v2.css` (hero, chips, mini-UI, pasos, tabla,
 * FAQ animada, cards, CTA y reveal por scroll de los bloques). Este archivo
 * NO redefine nada de eso: sólo suma lo que el lote B necesita y no existe
 * en el sistema, más el encendido v4 de ítems internos.
 *
 * Aporta: reveal por scroll de ítems internos (pasos y cards) con rangos
 * largos entry→cover y borde que toma color, marco de
 * mini-UI con hover y caption acentuada, flecha de navegación en las cards,
 * temas de card para las guías de economía/salud/cuenta y halo animado del
 * CTA. Se linkea DESPUÉS de `ks-guide-v2.css`.
 *
 * Reglas duras: sin JS, sin estilos inline, sin prioridad forzada, contraste
 * AA, foco visible, `prefers-reduced-motion` y responsive.
 *
 * El interior de los mocks es reemplazable por screenshots: acá sólo se pule
 * el marco y el motion, no la fidelidad interna.
 */

/* ── Reveal por scroll de ítems internos ─────────────────────────────────── */
/* Los bloques de `.kg` ya se revelan con el sistema de v2. Acá se suman los
 * pasos y las cards, con la misma filosofía de v2: sin `fill`, así una
 * captura full-page o un lector sin scroll nunca pierde contenido.
 * v4: recorrido más largo (entry→cover) y color que se enciende en el borde,
 * en una segunda animación con su propio timeline para no pisar el reveal. */

@keyframes kgb-reveal {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes kgb-ignite-step {
  from { border-color: var(--kg-line); }
  to { border-color: rgba(245, 196, 81, 0.52); border-color: color-mix(in srgb, var(--kg-c) 52%, var(--kg-line)); }
}

@keyframes kgb-ignite-card {
  from { border-color: var(--kg-line); }
  to { border-color: rgba(245, 196, 81, 0.52); border-color: color-mix(in srgb, var(--c) 52%, var(--kg-line)); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kg-steps .kg-step {
      animation: kgb-reveal linear, kgb-ignite-step linear;
      animation-timeline: view(), view();
      animation-range: entry 0% cover 32%, entry 10% cover 34%;
    }
    .kg-cards .kg-card {
      animation: kgb-reveal linear, kgb-ignite-card linear;
      animation-timeline: view(), view();
      animation-range: entry 0% cover 32%, entry 10% cover 34%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .kg-steps .kg-step,
  .kg-cards .kg-card { animation: none; opacity: 1; transform: none; }
}

/* ── Marco de mini-UI (el mock real sigue intacto adentro) ───────────────── */

.kg-ui .phone { transition: transform 0.3s ease; }

@media (hover: hover) {
  .kg-ui:hover .phone { transform: translateY(-4px); }
}

.kg-ui__caption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.kg-ui__caption::before {
  content: "";
  flex: none;
  align-self: center;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--kg-c);
  box-shadow: 0 0 10px color-mix(in srgb, var(--kg-c) 70%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .kg-ui .phone { transition: none; }
  .kg-ui:hover .phone { transform: none; }
}

/* ── Cards relacionadas: flecha y temas extra ────────────────────────────── */
/* v4: la flecha vive en una pastilla del color propio (--c) y se enciende en
 * hover; el carácter del fondo lo pone v2 (baño radial con --c). */

.kg-card { padding-right: 38px; }

.kg-card::after {
  content: "→";
  position: absolute;
  top: 14px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(245, 196, 81, 0.35);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: rgba(245, 196, 81, 0.08);
  background: color-mix(in srgb, var(--c) 8%, transparent);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
  pointer-events: none;
}

.kg-card:hover::after,
.kg-card:focus-visible::after {
  opacity: 1;
  transform: none;
  border-color: rgba(245, 196, 81, 0.60);
  border-color: color-mix(in srgb, var(--c) 60%, transparent);
  background: rgba(245, 196, 81, 0.14);
  background: color-mix(in srgb, var(--c) 14%, transparent);
}

.kg-card--suns { --c: #F5C451; }
.kg-card--salud { --c: #7CE3FF; }
.kg-card--privacidad { --c: #5BF6FF; }
.kg-card--terminos { --c: #F5C451; }
.kg-card--soporte { --c: #2BD9A0; }
.kg-card--datos { --c: #818CF8; }
.kg-card--borrar { --c: #F87171; }
.kg-card--ajustes { --c: #818CF8; }

@media (prefers-reduced-motion: reduce) {
  .kg-card::after { transition: none; }
}

/* ── CTA: halo en movimiento ─────────────────────────────────────────────── */

@keyframes kgb-cta-float {
  0%, 100% { transform: translate3d(-3%, -2%, 0) scale(1); opacity: 0.75; }
  50% { transform: translate3d(3%, 2%, 0) scale(1.06); opacity: 1; }
}

.kg-cta::after {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--kg-c) 16%, transparent),
    transparent 72%
  );
}

.kg-cta > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .kg-cta::after { animation: kgb-cta-float 7s ease-in-out infinite; }
  .kg-cta .btn { transition: transform 0.2s ease; }
  .kg-cta .btn:hover { transform: translateY(-2px); }
}

/* ── Responsive fino ─────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .kg-card { padding-right: 34px; }
}