/* KairSun — Hub Cards (puertas de acceso) + lockup de marca Kairós + Sun.
 *
 * Dueño: agente Hub Cards. Se carga DESPUÉS de marketing.css: usa sus tokens
 * (--text, --muted, --gold, --gold-hi, --gold-base, --gold-deep, --mastery,
 * --font, --display, --radius-lg) y su foco global; no redefine `.btn`,
 * `.section`, `.eyebrow` ni `.section-title`.
 *
 * POR QUÉ EXISTE
 * Las tarjetas viejas (`.help-rail-card`) heredaban el shell con gradiente
 * teal/gold y un hover dorado parejo: todas gritaban lo mismo. Acá la
 * superficie es neutra y calma, y el acento vive SOLO en el medallón del
 * ícono (24 px, stroke 1.5) y en el hover (elevación + glow del tono). El
 * gesto de marca es el lockup de la fila inferior: [Kairós] ⊕ [Sun], con el
 * medallón gold→teal al centro y "KairSun" debajo, espejo del lockup del
 * footer (Kairós + Sun sobre KairSun).
 *
 * CONTRATO con el fragmento `tools/hub-cards.html`:
 *   section.hub-cards
 *     p.eyebrow + h2.section-title + p.hub-cards__lead
 *     div.hub-doors  > a.hub-card.hub-card--{guias,datos,mastery}
 *     div.hub-brand  > a.hub-card--kairos | a.hub-hinge | a.hub-card--sun
 *     a.hub-hinge > span.hub-hinge__seal > span.hub-hinge__plus
 *                 + span.hub-hinge__name (decorativo, solo ≥641 px)
 *
 * Reglas duras: sin JS, sin estilos inline, sin `!important`, contraste AA,
 * foco visible, touch ≥ 44 px, `prefers-reduced-motion`, responsive 320 px+.
 * Contraste medido sobre superficie efectiva ~#0A0B10:
 *   descripción #B8C4D6 ≈ 11:1 · títulos #F8FAFC ≈ 18:1 ·
 *   gold #F5C451 ≈ 12:1 · teal #2DD4BF ≈ 10:1.
 */

.hub-cards {
  --hub-surface: rgba(9, 9, 11, 0.55);
  --hub-surface-hi: rgba(24, 24, 27, 0.72);
  --hub-line: rgba(255, 255, 255, 0.12);
  --hub-ink: var(--text, #F8FAFC);
  --hub-muted: var(--muted, #B8C4D6);
  --hub-gold: var(--gold, #F5C451);
  --hub-gold-hi: var(--gold-hi, #FFE9B8);
  --hub-gold-base: var(--gold-base, #FFD777);
  --hub-gold-deep: var(--gold-deep, #E8A93E);
  --hub-teal: var(--mastery, #2DD4BF);
  --hub-focus: var(--gold-base, #FFD777);
  --hub-gap: 12px;
  --hub-hinge-w: 80px;
  /* Motion: alias de marketing.css (con fallback). Mismo lenguaje que el
   * footer Kairós+Sun: la bisagra y el sello comparten curva y tiempos. */
  --hub-t-fast: var(--dur-1, 140ms);
  --hub-t-mid: var(--dur-2, 240ms);
  --hub-t-slow: var(--dur-3, 420ms);
  --hub-ease: var(--ease-spring, cubic-bezier(0.2, 0.85, 0.25, 1));
  --hub-ease-out: var(--ease-out, cubic-bezier(0.22, 0.9, 0.24, 1));
  --hub-lift: var(--lift-2, -2px);
  --hub-stagger: 55ms;
  margin: 8px auto 28px;
  max-width: var(--max, 1120px);
}

.hub-cards .eyebrow { margin-bottom: 6px; }
.hub-cards .section-title { margin: 0 0 8px; font-size: clamp(1.25rem, 2.4vw, 1.55rem); }
.hub-cards__lead {
  margin: 0 0 18px;
  max-width: 42rem;
  color: var(--hub-muted);
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---------- Grillas: 3 puertas + lockup (Kairós | ⊕ | Sun) ---------- */

.hub-doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hub-gap);
  align-items: stretch;
}

.hub-brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  margin-top: var(--hub-gap);
}

/* ---------- Card: superficie neutra, acento solo en ícono/hover ---------- */

.hub-card {
  --hub-accent: var(--hub-gold);
  --hub-ring: rgba(245, 196, 81, 0.45);
  --hub-wash: rgba(245, 196, 81, 0.1);
  --hub-glow: rgba(245, 196, 81, 0.22);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  min-height: 44px;
  padding: 20px;
  border: 1px solid var(--hub-line);
  border-radius: var(--radius-lg, 16px);
  background: var(--hub-surface);
  color: var(--hub-ink);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color var(--hub-t-fast) var(--hub-ease-out),
    background-color var(--hub-t-fast) var(--hub-ease-out),
    box-shadow var(--hub-t-mid) var(--hub-ease-out),
    transform var(--hub-t-mid) var(--hub-ease);
}
.hub-card:hover,
.hub-card:focus-visible {
  color: var(--hub-ink);
  border-color: var(--hub-ring);
  background: var(--hub-surface-hi);
}
.hub-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 38px -26px rgba(0, 0, 0, 0.95),
    0 0 28px -10px var(--hub-glow);
}
.hub-card:focus-visible {
  outline: 2px solid var(--hub-focus);
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px rgba(45, 212, 191, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 38px -26px rgba(0, 0, 0, 0.95),
    0 0 28px -10px var(--hub-glow);
}

/* Medallón premium: rim + sheen + depth (liquid glass, §34 RULES). */
.hub-card__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hub-line);
  border-radius: 14px;
  color: var(--hub-accent);
  background:
    radial-gradient(120% 120% at 30% 12%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -10px 16px -12px rgba(0, 0, 0, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.35);
  transition:
    border-color var(--hub-t-mid) var(--hub-ease-out),
    box-shadow var(--hub-t-mid) var(--hub-ease-out),
    transform var(--hub-t-mid) var(--hub-ease);
}
.hub-card__icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.hub-card__icon svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 24px;
  height: 24px;
}

.hub-card:hover .hub-card__icon,
.hub-card:focus-visible .hub-card__icon {
  border-color: var(--hub-ring);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -10px 16px -12px rgba(0, 0, 0, 0.9),
    0 0 0 4px var(--hub-wash),
    0 10px 22px -12px var(--hub-glow);
}

.hub-card__title {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hub-ink);
}
.hub-card--brand .hub-card__title {
  font-family: var(--display, "Cinzel", "Times New Roman", Georgia, serif);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.hub-card__desc {
  margin: 0;
  max-width: 38ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--hub-muted);
  text-wrap: pretty;
}

/* ---------- Acento por puerta ---------- */

.hub-card--guias { --hub-accent: var(--hub-gold); }
.hub-card--datos {
  --hub-accent: var(--hub-teal);
  --hub-ring: rgba(45, 212, 191, 0.45);
  --hub-wash: rgba(45, 212, 191, 0.1);
  --hub-glow: rgba(45, 212, 191, 0.24);
}
.hub-card--mastery {
  --hub-accent: #F8E7B0;
  --hub-ring: rgba(245, 196, 81, 0.45);
  --hub-glow: rgba(245, 196, 81, 0.2);
}
.hub-card--kairos {
  --hub-accent: var(--hub-gold-hi);
  --hub-ring: rgba(245, 196, 81, 0.45);
  --hub-wash: rgba(45, 212, 191, 0.12);
  --hub-glow: rgba(255, 233, 184, 0.22);
}
.hub-card--sun {
  --hub-accent: var(--hub-gold);
  --hub-ring: rgba(245, 196, 81, 0.5);
  --hub-wash: rgba(245, 196, 81, 0.12);
  --hub-glow: rgba(245, 196, 81, 0.28);
}

.hub-card--datos .hub-card__icon {
  background:
    radial-gradient(120% 120% at 30% 12%, rgba(45, 212, 191, 0.2), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}
/* Mastery: borde líquido gold+teal (espeja .nav-chip--mastery). */
.hub-card--mastery .hub-card__icon {
  border-color: transparent;
  background:
    radial-gradient(120% 120% at 30% 12%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 56%) padding-box,
    linear-gradient(135deg, rgba(24, 28, 38, 0.72), rgba(12, 18, 28, 0.55)) padding-box,
    linear-gradient(135deg, rgba(245, 196, 81, 0.55), rgba(45, 212, 191, 0.5)) border-box;
}
/* Kairós: medallón amanecer (teal arriba, gold abajo). */
.hub-card--kairos .hub-card__icon {
  border-color: transparent;
  background:
    radial-gradient(140% 120% at 30% 12%, rgba(45, 212, 191, 0.2), rgba(255, 255, 255, 0) 58%) padding-box,
    linear-gradient(180deg, rgba(45, 212, 191, 0.16), rgba(245, 196, 81, 0.12)) padding-box,
    linear-gradient(180deg, rgba(45, 212, 191, 0.45), rgba(245, 196, 81, 0.5)) border-box;
}
/* El anillo líquido manda: el hover no pisa el borde gradiente. */
.hub-card--mastery:hover .hub-card__icon,
.hub-card--mastery:focus-visible .hub-card__icon,
.hub-card--kairos:hover .hub-card__icon,
.hub-card--kairos:focus-visible .hub-card__icon {
  border-color: transparent;
}
.hub-card--sun .hub-card__icon {
  background:
    radial-gradient(130% 130% at 50% 12%, rgba(245, 196, 81, 0.26), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

/* ---------- Bisagra "+": lockup de marca (Kairós ⊕ Sun = KairSun) ----------
 * En desktop el hueco entre Kairós y Sun es 0: la hairline es la costura y el
 * medallón la cruza. El "+" (Cinzel, gradiente gold→teal) gira 90° al
 * hover/focus, espejo del `.ksf-plus` del footer; "KairSun" (decorativo)
 * cierra el lockup debajo. El link lleva aria-label; el resto es aria-hidden.
 */

.hub-hinge {
  position: relative;
  display: grid;
  place-items: center;
  min-width: var(--hub-hinge-w);
  min-height: 44px;
  border-radius: var(--radius-lg, 16px);
  text-decoration: none;
  color: var(--hub-ink);
}
.hub-hinge::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  transform: translateY(-50%) scaleX(0.92);
  transform-origin: 50% 50%;
  background: linear-gradient(
    90deg,
    rgba(245, 196, 81, 0),
    rgba(245, 196, 81, 0.5) 32%,
    rgba(45, 212, 191, 0.5) 68%,
    rgba(45, 212, 191, 0)
  );
  opacity: 0.6;
  pointer-events: none;
  transition:
    opacity var(--hub-t-mid) var(--hub-ease-out),
    transform var(--hub-t-slow) var(--hub-ease-out);
}
.hub-hinge__seal {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(24, 28, 38, 0.92), rgba(10, 12, 17, 0.96)) padding-box,
    linear-gradient(135deg, var(--hub-gold) 0%, var(--hub-gold-hi) 42%, var(--hub-teal) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 26px -14px rgba(0, 0, 0, 0.9),
    0 0 22px -10px rgba(245, 196, 81, 0.4);
  transition:
    box-shadow var(--hub-t-mid) var(--hub-ease-out),
    transform var(--hub-t-mid) var(--hub-ease);
}
.hub-hinge__seal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
.hub-hinge__plus {
  position: relative;
  z-index: 1;
  font-family: var(--display, "Cinzel", "Times New Roman", Georgia, serif);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hub-gold);
  background-image: linear-gradient(
    135deg,
    var(--hub-gold) 0%,
    var(--hub-gold-hi) 42%,
    var(--hub-teal) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* "KairSun": sella el lockup debajo del medallón (desktop). */
.hub-hinge__name {
  display: none;
  font-family: var(--display, "Cinzel", "Times New Roman", Georgia, serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  white-space: nowrap;
  color: var(--hub-gold-hi);
  background-image: linear-gradient(
    135deg,
    var(--hub-gold-hi) 0%,
    var(--hub-gold-base) 52%,
    var(--hub-gold-deep) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Sin soporte de clip de texto, ni el "+" ni "KairSun" quedan invisibles. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .hub-hinge__plus,
  .hub-hinge__name {
    background: none;
    color: var(--hub-gold);
    -webkit-text-fill-color: currentColor;
  }
}
/* La costura se enciende cuando el lockup está en juego (hover o foco). */
.hub-brand:hover .hub-hinge::before,
.hub-brand:focus-within .hub-hinge::before { opacity: 0.95; }
.hub-brand:hover .hub-hinge__name,
.hub-brand:focus-within .hub-hinge__name { opacity: 1; }
.hub-hinge:hover .hub-hinge__seal,
.hub-hinge:focus-visible .hub-hinge__seal {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 30px -12px rgba(0, 0, 0, 0.95),
    0 0 0 5px rgba(245, 196, 81, 0.14),
    0 0 26px -6px rgba(45, 212, 191, 0.4);
}

/* ---------- Foco (además del global gold+teal de marketing.css) ---------- */

.hub-cards a:focus-visible {
  outline: 2px solid var(--hub-focus);
  outline-offset: 2px;
}
.hub-cards a.hub-hinge:focus-visible { outline: none; }
.hub-hinge:focus-visible .hub-hinge__seal {
  outline: 2px solid var(--hub-focus);
  outline-offset: 3px;
}

/* ---------- Desktop: costura viva entre Kairós y Sun ---------- */

@media (min-width: 641px) {
  .hub-hinge__name {
    position: absolute;
    top: calc(50% + 33px);
    left: 50%;
    transform: translateX(-50%);
    display: block;
    opacity: 0.8;
    pointer-events: none;
    transition: opacity var(--hub-t-mid) var(--hub-ease-out);
  }
  .hub-card--kairos::after,
  .hub-card--sun::after {
    content: "";
    position: absolute;
    top: 16%;
    bottom: 16%;
    width: 1px;
    opacity: 0;
    transform: scaleY(0.7);
    transform-origin: 50% 50%;
    pointer-events: none;
    transition:
      opacity var(--hub-t-mid) var(--hub-ease-out),
      transform var(--hub-t-slow) var(--hub-ease-out);
  }
  .hub-card--kairos::after {
    right: 0;
    background: linear-gradient(180deg, rgba(255, 233, 184, 0), rgba(255, 233, 184, 0.9) 50%, rgba(255, 233, 184, 0));
  }
  .hub-card--sun::after {
    left: 0;
    background: linear-gradient(180deg, rgba(245, 196, 81, 0), rgba(245, 196, 81, 0.9) 50%, rgba(245, 196, 81, 0));
  }
  .hub-brand:hover .hub-card--kairos::after,
  .hub-brand:hover .hub-card--sun::after,
  .hub-brand:focus-within .hub-card--kairos::after,
  .hub-brand:focus-within .hub-card--sun::after {
    opacity: 0.7;
  }
}

/* ---------- Movimiento: lift/giro solo si el usuario lo permite ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hub-card {
    transition:
      border-color var(--hub-t-fast) var(--hub-ease-out),
      background-color var(--hub-t-fast) var(--hub-ease-out),
      box-shadow var(--hub-t-mid) var(--hub-ease-out),
      transform var(--hub-t-mid) var(--hub-ease);
  }
  .hub-card:hover,
  .hub-card:focus-visible { transform: translateY(var(--hub-lift)); }
  .hub-card:hover .hub-card__icon,
  .hub-card:focus-visible .hub-card__icon {
    transform: translateY(var(--lift-1, -1px)) scale(1.04);
  }
  .hub-hinge__plus { transition: transform var(--hub-t-mid) var(--hub-ease); }
  .hub-hinge:hover .hub-hinge__seal,
  .hub-hinge:focus-visible .hub-hinge__seal { transform: scale(1.05); }
  .hub-hinge:hover .hub-hinge__plus,
  .hub-hinge:focus-visible .hub-hinge__plus { transform: rotate(90deg); }
}

/* Bisagra viva: la costura se dibuja al hover/focus del lockup, espejo del
 * `.ksf-plus` del footer (misma curva, mismos tiempos). */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  .hub-brand:hover .hub-hinge::before,
  .hub-brand:focus-within .hub-hinge::before {
    transform: translateY(-50%) scaleX(1);
  }

  .hub-brand:hover .hub-card--kairos::after,
  .hub-brand:hover .hub-card--sun::after,
  .hub-brand:focus-within .hub-card--kairos::after,
  .hub-brand:focus-within .hub-card--sun::after { transform: scaleY(1); }
}

/* Entrada fallback (sin scroll-driven animations): rise con stagger sutil. */
@keyframes hub-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hub-doors > *,
    .hub-brand > * {
      animation: hub-rise var(--hub-t-slow) var(--hub-ease-out) both;
    }

    .hub-doors > :nth-child(2) { animation-delay: var(--hub-stagger); }
    .hub-doors > :nth-child(3) { animation-delay: calc(var(--hub-stagger) * 2); }
    .hub-brand > :nth-child(2) { animation-delay: var(--hub-stagger); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hub-card,
  .hub-card__icon,
  .hub-hinge::before,
  .hub-hinge__seal,
  .hub-hinge__name { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .hub-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hub-brand {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hub-gap);
  }
  .hub-hinge { min-height: 68px; }
  .hub-hinge::before {
    top: calc(-1 * var(--hub-gap));
    bottom: calc(-1 * var(--hub-gap));
    left: 50%;
    right: auto;
    width: 1px;
    height: auto;
    transform: translateX(-50%) scaleY(0.92);
    background: linear-gradient(
      180deg,
      rgba(245, 196, 81, 0),
      rgba(245, 196, 81, 0.5) 32%,
      rgba(45, 212, 191, 0.5) 68%,
      rgba(45, 212, 191, 0)
    );
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .hub-brand:hover .hub-hinge::before,
  .hub-brand:focus-within .hub-hinge::before {
    transform: translateX(-50%) scaleY(1);
  }
}
@media (max-width: 560px) {
  .hub-doors { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .hub-card { padding: 16px; gap: 10px; }
  .hub-cards { --hub-hinge-w: 64px; }
}

/* ---------- Alto contraste forzado (Windows): sin gradiente en texto ---------- */

@media (forced-colors: active) {
  .hub-card { border-color: CanvasText; }
  .hub-hinge::before { background: CanvasText; }
  .hub-hinge__seal { background: Canvas; border-color: CanvasText; box-shadow: none; }
  .hub-hinge__seal::before { background: Canvas; }
  .hub-hinge__plus,
  .hub-hinge__name {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}