/* KairSun Web — CONVERSIÓN v1 (sticky CTA mobile + FAQ + banda honesta)
 *
 * Qué es: componente post-hero del home (ES/EN) sin JS y sin tocar las
 * páginas. Dueño: agente Conversión. Ver docs/screens/67_conversion.md.
 *
 * Piezas:
 *   1. .ksc-sticky-cta — barra inferior glass, solo mobile (≤860px) y solo
 *      en `body[data-cta-mode="waitlist"]`. Aparece cuando el sentinel
 *      `.ksc-watch--hero` (último hijo del hero) sube 16-34% del viewport y
 *      se oculta cuando `.ksc-watch--waitlist` (último hijo de la banda)
 *      asoma 4-14%. Scroll-driven puro con named view timelines + timeline-
 *      scope hoisteado en `main.story`. Sin soporte: fallback estático
 *      visible (se oculta con #waitlist:target al tocar el CTA).
 *   2. .ksc-faq — 4 `<details>` con el lenguaje visual de `.kg-faq`
 *      (ks-guide-v2.css): mismo borde, radio, "+" rotado y apertura 0fr→1fr.
 *      Reutilizable en cualquier página que cargue este CSS; si vive dentro
 *      de un `.kg`, toma el acento de la guía (`--kg-c`).
 *   3. .ksc-honest — banda de reassurance: pre-lanzamiento · sin tarjeta ·
 *      sin fecha prometida. Sin usuarios inventados ni métricas falsas.
 *
 * Reglas duras: sin prioridad forzada, sin estilos inline, sin JS, tokens de
 * marketing.css, contraste AA, targets ≥48px, foco visible heredado,
 * `prefers-reduced-motion` y `forced-colors`, responsive 320 → ultrawide,
 * z-index 900 (< overlay de nav, 1200).
 *
 * Cache: subir `?v=` en el `<link>` del HTML (ES+EN) al editar este archivo
 * (RULES §5: tools/cache-bust.mjs).
 */

/* ── 1 · Sticky CTA mobile ─────────────────────────────────────────────── */

/* Sentinelas: 1px, sin layout, solo geometría para las timelines. */
.ksc-watch {
  display: block;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

/* Último hijo del hero: ancla el "después del hero" al borde inferior real
 * del hero (main.story > .hero ya es position: relative). */
.ksc-watch--hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Base: apagada. Solo aparece en mobile + modo waitlist. */
.ksc-sticky-cta { display: none; }

@media (max-width: 860px) {
  body[data-cta-mode="waitlist"] .ksc-sticky-cta {
    position: fixed;
    z-index: 900; /* bajo .ks-nav-overlay (1200) y header (60) */
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)); /* safe-area iOS */
    display: grid;
    gap: 5px;
    margin-inline: auto;
    max-width: 560px;
    padding: 9px;
    border: 1px solid rgba(245, 196, 81, 0.32);
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 48%, rgba(45, 212, 191, 0.06)),
      rgba(6, 11, 20, 0.86);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 14px 34px rgba(0, 0, 0, 0.42);
    opacity: 0;
    visibility: hidden;
  }

  .ksc-sticky-cta__btn {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border-radius: 15px;
    font-size: clamp(0.94rem, 3.6vw, 1rem);
  }

  .ksc-sticky-cta__note {
    margin: 0;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: var(--muted, #B8C4D6);
  }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 860px) {
    body[data-cta-mode="waitlist"] .ksc-sticky-cta {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 48%, rgba(45, 212, 191, 0.06)),
        rgba(6, 11, 20, 0.6);
      backdrop-filter: blur(16px) saturate(1.5);
      -webkit-backdrop-filter: blur(16px) saturate(1.5);
    }
  }
}

/* Fallback estático: motores sin named timelines/timeline-scope muestran la
 * barra fija (el CTA no se pierde) y se oculta al ancla #waitlist. */
@supports not ((animation-timeline: --ksc-check) and (timeline-scope: --ksc-check)) {
  @media (max-width: 860px) {
    body[data-cta-mode="waitlist"] .ksc-sticky-cta {
      opacity: 1;
      visibility: visible;
    }
  }
}

body:has(#waitlist:target) .ksc-sticky-cta {
  opacity: 0;
  visibility: hidden;
}

/* Scroll-driven: las timelines viven en las sentinelas; main.story las
 * hoistea con timeline-scope para que la barra (hermana, no descendiente)
 * pueda resolverlas. */
@supports ((animation-timeline: --ksc-check) and (timeline-scope: --ksc-check)) {
  main.story {
    timeline-scope: --ksc-after-hero, --ksc-before-waitlist, --ksc-rail;
  }

  #producto { view-timeline-name: --ksc-rail; }
  .ksc-watch--hero { view-timeline-name: --ksc-after-hero; }
  .ksc-watch--waitlist { view-timeline-name: --ksc-before-waitlist; }

  @media (max-width: 860px) {
    body[data-cta-mode="waitlist"] .ksc-sticky-cta {
      animation-name: ksc-cta-in, ksc-cta-out;
      animation-duration: 1ms; /* Firefox exige duración non-zero; el timeline manda */
      animation-timing-function: linear, linear;
      animation-fill-mode: forwards, forwards;
      animation-timeline: --ksc-after-hero, --ksc-before-waitlist;
      animation-range: cover 16% cover 34%, cover 4% cover 14%;
    }
  }
}

@keyframes ksc-cta-in {
  from { opacity: 0; visibility: hidden; }
  to { opacity: 1; visibility: visible; }
}

@keyframes ksc-cta-out {
  from { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}

/* Sin movimiento: sin fade; aparece/desaparece seco en el mismo rango. */
@supports ((animation-timeline: --ksc-check) and (timeline-scope: --ksc-check)) {
  @media (max-width: 860px) and (prefers-reduced-motion: reduce) {
    body[data-cta-mode="waitlist"]:not(.ks-media-section-in-view) .ksc-sticky-cta {
      animation-name: ksc-cta-in, ksc-cta-out !important;
      animation-duration: 1ms !important;
      animation-fill-mode: forwards, forwards !important;
      animation-timeline: --ksc-after-hero, --ksc-before-waitlist !important;
      animation-range: cover 16% cover 34%, cover 4% cover 14% !important;
      animation-timing-function: steps(1, end) !important;
    }
  }
}

@media (forced-colors: active) {
  body[data-cta-mode="waitlist"] .ksc-sticky-cta {
    background: Canvas;
    border-color: CanvasText;
  }
  .ksc-sticky-cta__note { color: CanvasText; }
}

@media print {
  body[data-cta-mode="waitlist"] .ksc-sticky-cta { display: none; }
}

/* ── 2 · FAQ de home (estilo guías, reutilizable) ──────────────────────── */

.ksc-faq-section {
  --max: 920px; /* .wrap lee --max del propio elemento → columna 880 */
  display: grid;
  gap: 14px;
}

.ksc-faq-lead {
  margin-bottom: 0;
}

.ksc-faq {
  --ksc-accent: var(--kg-c, var(--gold, #F5C451));
  --ksc-accent-soft: var(--kg-c-soft, var(--gold-hi, #FFE9B8));
  --ksc-line: rgba(255, 255, 255, 0.14);
  --ksc-surface: rgba(255, 255, 255, 0.04);
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.ksc-faq details {
  border: 1px solid var(--ksc-line);
  border-radius: 14px;
  background: var(--ksc-surface);
  transition: border-color 0.18s ease;
}

.ksc-faq details[open] { border-color: color-mix(in srgb, var(--ksc-accent) 38%, transparent); }
.ksc-faq details:hover { border-color: color-mix(in srgb, var(--ksc-accent) 30%, transparent); }

.ksc-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text, #F8FAFC);
  border-radius: 13px;
}

.ksc-faq summary::-webkit-details-marker { display: none; }

.ksc-faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ksc-accent) 45%, transparent);
  color: var(--ksc-accent-soft);
  font-weight: 800;
  line-height: 1;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 0.16s ease,
    color 0.16s ease;
}

.ksc-faq details[open] summary::after {
  transform: rotate(45deg);
  border-color: color-mix(in srgb, var(--ksc-accent) 75%, transparent);
  color: var(--ksc-accent);
}

.ksc-faq summary:hover { background: color-mix(in srgb, var(--ksc-accent) 6%, transparent); }

.ksc-faq :is(a, summary):focus-visible {
  outline: 2px solid var(--ksc-accent);
  outline-offset: 3px;
  border-radius: 8px;
}

.ksc-faq a { color: var(--ksc-accent-soft); }
.ksc-faq a:hover { color: var(--ksc-accent); }

.ksc-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 16px 16px;
  color: var(--text-2, #E2E8F0);
  font-size: 0.95rem;
  line-height: 1.62;
}

.ksc-faq details[open] .ksc-faq__answer { grid-template-rows: 1fr; }

.ksc-faq__answer > p {
  margin: 0;
  min-height: 0;
  overflow: hidden;
  max-width: 68ch;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ksc-faq details[open] .ksc-faq__answer > p {
  opacity: 1;
  transform: none;
}

/* ── 3 · Banda de reassurance honesta ──────────────────────────────────── */

.ksc-honest {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(16px, 3.5vw, 22px) clamp(16px, 3.5vw, 24px);
  border: 1px solid rgba(245, 196, 81, 0.26);
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(245, 196, 81, 0.1), transparent 58%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.ksc-honest__title {
  margin: 0 0 12px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2, #E2E8F0);
}

.ksc-honest__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 14px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ksc-honest__item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: start;
}

.ksc-honest__ico {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: var(--gold-base, #FFD777);
  background: rgba(245, 196, 81, 0.12);
  border: 1px solid rgba(245, 196, 81, 0.32);
}

.ksc-honest__ico svg { width: 14px; height: 14px; }

.ksc-honest__item strong {
  color: var(--text, #F8FAFC);
  font-size: 0.98rem;
  line-height: 1.3;
}

.ksc-honest__item small {
  color: var(--text-2, #E2E8F0);
  font-size: 0.84rem;
  line-height: 1.45;
}

.ksc-honest__foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted, #B8C4D6);
  font-size: 0.78rem;
}

/* ── Reduced motion + forced colors de FAQ/banda ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ksc-faq summary::after,
  .ksc-faq__answer > p,
  .ksc-faq details {
    transition: none;
  }
}

@media (forced-colors: active) {
  .ksc-honest { background: Canvas; border-color: CanvasText; }
  .ksc-honest__title,
  .ksc-honest__item strong,
  .ksc-honest__item small,
  .ksc-honest__foot { color: CanvasText; }
  .ksc-honest__ico { color: CanvasText; border-color: CanvasText; background: Canvas; }
  .ksc-faq summary::after { border-color: CanvasText; color: CanvasText; }
}

/* ── Micro-responsive (320) ────────────────────────────────────────────── */

@media (max-width: 380px) {
  .ksc-sticky-cta__btn {
    padding: 0 10px;
    font-size: 0.9rem;
  }
  .ksc-faq summary { padding: 12px 13px; }
  .ksc-faq__answer { padding: 0 13px 14px; }
}

/* ── 4 · Sticky CTA desktop (≥1100px) ─────────────────────────────────────
 * Caja glass abajo-derecha (~340px, < 1/3 del viewport) con el mensaje
 * Founder completo. Solo en `body[data-cta-mode="waitlist"]`.
 * Sin timelines: fallback estático visible (se oculta con #waitlist:target).
 * Con timelines: aparece tras el hero y se oculta antes de #waitlist, con
 * las mismas sentinelas que el mobile (nada de JS, nada tapa el footer
 * porque la banda de waitlist lo esconde antes del pie).
 * z-index 800: bajo overlay de nav (1200) y sobre el contenido.
 */
.ksc-desk-cta { display: none; }

@media (min-width: 1100px) {
  body[data-cta-mode="waitlist"] .ksc-desk-cta {
    position: fixed;
    z-index: 800;
    right: 20px;
    bottom: 20px;
    display: grid;
    gap: 8px;
    width: min(340px, 30vw);
    max-width: calc(100vw - 40px);
    padding: 18px;
    border: 1px solid rgba(245, 196, 81, 0.32);
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 48%, rgba(45, 212, 191, 0.06)),
      rgba(6, 11, 20, 0.86);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 14px 34px rgba(0, 0, 0, 0.42);
    opacity: 1;
    visibility: visible;
  }

  .ksc-desk-cta__kicker {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-base, #FFD777);
  }

  .ksc-desk-cta__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text, #F8FAFC);
    text-wrap: balance;
  }

  .ksc-desk-cta__note {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    color: var(--muted, #B8C4D6);
  }

  .ksc-desk-cta__btn {
    width: 100%;
    min-height: 50px;
    margin-top: 4px;
  }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 1100px) {
    body[data-cta-mode="waitlist"] .ksc-desk-cta {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 48%, rgba(45, 212, 191, 0.06)),
        rgba(6, 11, 20, 0.6);
      backdrop-filter: blur(16px) saturate(1.5);
      -webkit-backdrop-filter: blur(16px) saturate(1.5);
    }
  }
}

/* Sin soporte de timelines: visible estático; se oculta al ancla #waitlist. */
body:has(#waitlist:target) .ksc-desk-cta {
  opacity: 0;
  visibility: hidden;
}

/* Con timelines: mismo show/hide scroll-driven que el mobile. */
@supports ((animation-timeline: --ksc-check) and (timeline-scope: --ksc-check)) {
  @media (min-width: 1100px) {
    body[data-cta-mode="waitlist"] .ksc-desk-cta {
      animation-name: ksc-cta-in, ksc-cta-out, ksc-cta-in, ksc-cta-out;
      animation-duration: 1ms;
      animation-timing-function: linear, linear, linear, linear;
      animation-fill-mode: forwards, forwards, forwards, forwards;
      animation-timeline: --ksc-after-hero, --ksc-rail, --ksc-rail, --ksc-before-waitlist;
      animation-range: cover 16% cover 34%, cover 0% cover 2%, cover 97% cover 100%, cover 4% cover 14%;
    }
  }
}

/* Sin movimiento: sin fade en desktop tampoco. */
@supports ((animation-timeline: --ksc-check) and (timeline-scope: --ksc-check)) {
  @media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
    body[data-cta-mode="waitlist"]:not(.ks-media-section-in-view) .ksc-desk-cta {
      animation-name: ksc-cta-in, ksc-cta-out, ksc-cta-in, ksc-cta-out !important;
      animation-duration: 1ms !important;
      animation-fill-mode: forwards, forwards, forwards, forwards !important;
      animation-timeline: --ksc-after-hero, --ksc-rail, --ksc-rail, --ksc-before-waitlist !important;
      animation-range: cover 16% cover 34%, cover 0% cover 2%, cover 97% cover 100%, cover 4% cover 14% !important;
      animation-timing-function: steps(1, end) !important;
    }
  }
}

@media (forced-colors: active) {
  body[data-cta-mode="waitlist"] .ksc-desk-cta {
    background: Canvas;
    border-color: CanvasText;
  }
  .ksc-desk-cta__kicker,
  .ksc-desk-cta__title,
  .ksc-desk-cta__note { color: CanvasText; }
}

@media print {
  body[data-cta-mode="waitlist"] .ksc-desk-cta { display: none; }
}

/* ── 5 · Player de video: volver a la miniatura ─────────────────────────── */

.ks-media-back {
  position: absolute;
  z-index: 3;
  top: 10px;
  inset-inline-start: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(2, 13, 26, 0.78);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.ks-media-back:focus-visible {
  outline: 2px solid var(--gold-hi, #FFE9B8);
  outline-offset: 2px;
}

.ks-media-player iframe:focus-visible {
  outline: 2px solid var(--gold-hi, #FFE9B8);
  outline-offset: -3px;
}