/* =====================================================================
 * Linkealia · main.css
 * Estructura: tokens → reset → tipografía → layout → componentes
 * ===================================================================== */

/* ---------- 1 · Design tokens ---------- */
:root {
  /* Paleta */
  --lka-bg-deep:     #0a0d12;
  --lka-bg:          #0c0f14;
  --lka-bg-soft:     #121821;
  --lka-bg-elev:     #1b2432;

  --lka-text:        #F5F4F1;
  --lka-text-muted:  #a4abb5;
  --lka-text-dim:    #6f7884;

  --lka-yellow:      #F2D700;
  --lka-yellow-soft: #FFEC55;
  --lka-yellow-deep: #b89e00;
  --lka-mint:        #8AE7C5;
  --lka-rose:        #ff8a80;

  --lka-stroke:      rgba(245, 244, 241, 0.10);
  --lka-stroke-2:    rgba(245, 244, 241, 0.18);

  /* Tipografía nativa (sin webfonts externas) */
  --lka-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --lka-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Tamaños fluidos */
  --lka-fs-xs:    0.8125rem;
  --lka-fs-sm:    0.9375rem;
  --lka-fs-base:  1rem;
  --lka-fs-lg:    1.125rem;
  --lka-fs-xl:    clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  --lka-fs-2xl:   clamp(1.5rem,  1.2rem  + 1.2vw, 2rem);
  --lka-fs-3xl:   clamp(2rem,    1.4rem  + 2.5vw, 3rem);
  --lka-fs-4xl:   clamp(2.5rem,  1.6rem  + 4vw,   4.5rem);

  /* Espaciado */
  --lka-sp-1: 0.25rem;
  --lka-sp-2: 0.5rem;
  --lka-sp-3: 0.75rem;
  --lka-sp-4: 1rem;
  --lka-sp-5: 1.5rem;
  --lka-sp-6: 2rem;
  --lka-sp-7: 3rem;
  --lka-sp-8: 4.5rem;
  --lka-sp-9: 6rem;

  /* Radios */
  --lka-r-sm: 8px;
  --lka-r-md: 14px;
  --lka-r-lg: 22px;
  --lka-r-pill: 999px;

  /* Layout */
  --lka-container: 1240px;

  /* Movimiento */
  --lka-ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --lka-dur-1: 180ms;
  --lka-dur-2: 320ms;
  --lka-dur-3: 600ms;
}

/* ---------- 2 · Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--lka-font-sans);
  font-size:var(--lka-fs-base);
  line-height:1.6;
  color:var(--lka-text);
  background:var(--lka-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color var(--lka-dur-1) var(--lka-ease)}
a:hover{color:var(--lka-yellow)}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--lka-yellow);color:var(--lka-bg-deep)}
:focus-visible{outline:2px solid var(--lka-yellow);outline-offset:3px;border-radius:4px}

/* ---------- 3 · Tipografía ---------- */
h1,h2,h3,h4{font-weight:600;line-height:1.15;letter-spacing:-0.01em;color:var(--lka-text)}
h1{font-size:var(--lka-fs-4xl);letter-spacing:-0.025em}
h2{font-size:var(--lka-fs-3xl);letter-spacing:-0.02em}
h3{font-size:var(--lka-fs-2xl)}
h4{font-size:var(--lka-fs-xl)}
p{color:var(--lka-text-muted)}
.lka-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--lka-fs-xs);text-transform:uppercase;letter-spacing:.18em;
  color:var(--lka-yellow);
}
.lka-eyebrow::before{content:"";width:18px;height:1px;background:var(--lka-yellow)}

/* ---------- 4 · Layout ---------- */
.lka-container{max-width:var(--lka-container);margin-inline:auto;padding-inline:var(--lka-sp-5)}
.lka-section{padding-block:var(--lka-sp-8)}
.lka-section--tight{padding-block:var(--lka-sp-7)}
.lka-grid{display:grid;gap:var(--lka-sp-5)}
.lka-grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.lka-grid--2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}

/* ---------- 5 · Header / Nav ---------- */
.lka-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,rgba(12,15,20,.92),rgba(12,15,20,.7) 70%,transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lka-stroke);
}
.lka-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.lka-logo{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:-0.02em}
.lka-logo svg{width:28px;height:28px}
.lka-nav{display:flex;align-items:center;gap:var(--lka-sp-5)}
.lka-nav a{font-size:var(--lka-fs-sm);color:var(--lka-text-muted)}
.lka-nav a:hover,.lka-nav a[aria-current="page"]{color:var(--lka-text)}
@media (max-width:820px){
  .lka-nav{display:none}
}

/* ---------- 6 · Botones ---------- */
.lka-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.4rem;border-radius:var(--lka-r-pill);
  font-weight:600;font-size:var(--lka-fs-sm);letter-spacing:.01em;
  transition:transform var(--lka-dur-1) var(--lka-ease),
             background var(--lka-dur-1) var(--lka-ease),
             box-shadow var(--lka-dur-2) var(--lka-ease);
  will-change:transform;
}
.lka-btn--primary{
  background:var(--lka-yellow);color:var(--lka-bg-deep);
  box-shadow:0 8px 32px -8px rgba(242,215,0,.55);
}
.lka-btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px -10px rgba(242,215,0,.7)}
.lka-btn--ghost{border:1px solid var(--lka-stroke-2);color:var(--lka-text)}
.lka-btn--ghost:hover{background:rgba(245,244,241,.06)}

/* ---------- 7 · Hero universo ---------- */
.lka-hero{
  position:relative;min-height:min(92vh,820px);
  display:flex;align-items:center;justify-content:center;
  isolation:isolate;overflow:hidden;
}
.lka-hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:-2;
}
.lka-hero__orbits{
  position:absolute;inset:0;margin:auto;
  width:min(120vmin,1100px);height:min(120vmin,1100px);
  z-index:-1;opacity:.95;
  pointer-events:none;
}
.lka-hero__inner{
  position:relative;text-align:center;
  padding-block:var(--lka-sp-8);
  max-width:840px;
}
.lka-hero h1{
  background:linear-gradient(180deg,#fff 0%,var(--lka-text) 45%,#9aa0aa 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-block:var(--lka-sp-4) var(--lka-sp-5);
}
.lka-hero h1 .lka-accent{
  background:linear-gradient(135deg,var(--lka-yellow-soft),var(--lka-yellow) 60%,var(--lka-mint));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lka-hero__lead{font-size:var(--lka-fs-lg);color:var(--lka-text-muted);margin-bottom:var(--lka-sp-6)}
.lka-hero__cta{display:flex;gap:var(--lka-sp-4);justify-content:center;flex-wrap:wrap}

/* Sol central — gradiente radial puro */
.lka-hero__sun{
  position:absolute;inset:0;margin:auto;
  width:min(48vmin,420px);height:min(48vmin,420px);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(255,236,85,.95) 0%,
      rgba(242,215,0,.85) 25%,
      rgba(184,158,0,.45) 55%,
      rgba(184,158,0,0)   72%);
  filter:blur(2px);
  z-index:-1;
  animation:lka-sun-pulse 8s ease-in-out infinite;
}

/* ---------- 8 · Tarjetas servicios ---------- */
.lka-services{padding-block:var(--lka-sp-8)}
.lka-card{
  position:relative;padding:var(--lka-sp-6);
  background:linear-gradient(180deg,rgba(27,36,50,.6),rgba(18,24,33,.4));
  border:1px solid var(--lka-stroke);
  border-radius:var(--lka-r-lg);
  transition:transform var(--lka-dur-2) var(--lka-ease),
             border-color var(--lka-dur-2) var(--lka-ease),
             box-shadow var(--lka-dur-2) var(--lka-ease);
  overflow:hidden;
}
.lka-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,transparent 30%,var(--lka-card-color,var(--lka-yellow)) 50%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity var(--lka-dur-2) var(--lka-ease);
  pointer-events:none;
}
.lka-card:hover{transform:translateY(-4px);border-color:var(--lka-stroke-2)}
.lka-card:hover::before{opacity:.7}
.lka-card__icon{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;margin-bottom:var(--lka-sp-4);
  background:rgba(245,244,241,.06);color:var(--lka-card-color,var(--lka-yellow));
}
.lka-card__title{font-size:var(--lka-fs-xl);margin-bottom:var(--lka-sp-2)}
.lka-card__desc{font-size:var(--lka-fs-sm)}
.lka-card__link{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--lka-sp-4);
  font-size:var(--lka-fs-sm);color:var(--lka-yellow);
}
.lka-card__link svg{transition:transform var(--lka-dur-1) var(--lka-ease)}
.lka-card:hover .lka-card__link svg{transform:translateX(4px)}

/* ---------- 9 · Ecosistema / Casos ---------- */
.lka-ecosystem{position:relative;padding-block:var(--lka-sp-9)}
.lka-ecosystem__title{text-align:center;max-width:760px;margin-inline:auto;margin-bottom:var(--lka-sp-7)}
.lka-cases{padding-block:var(--lka-sp-8)}
.lka-case{
  background:var(--lka-bg-soft);
  border:1px solid var(--lka-stroke);
  border-radius:var(--lka-r-lg);
  padding:var(--lka-sp-6);
}
.lka-case__metric{display:flex;align-items:baseline;gap:.4rem}
.lka-case__metric strong{font-size:var(--lka-fs-3xl);color:var(--lka-yellow)}
.lka-case__client{font-size:var(--lka-fs-xs);text-transform:uppercase;letter-spacing:.18em;color:var(--lka-text-dim)}

/* ---------- 10 · CTA final ---------- */
.lka-cta{
  position:relative;margin:var(--lka-sp-8) auto;max-width:1100px;
  padding:var(--lka-sp-8) var(--lka-sp-7);
  border-radius:var(--lka-r-lg);
  background:radial-gradient(ellipse at 30% 0%,rgba(242,215,0,.18),transparent 60%),
             linear-gradient(180deg,var(--lka-bg-elev),var(--lka-bg-soft));
  border:1px solid var(--lka-stroke-2);
  text-align:center;overflow:hidden;
}
.lka-cta h2{margin-bottom:var(--lka-sp-4)}
.lka-cta p{max-width:580px;margin-inline:auto;margin-bottom:var(--lka-sp-6)}

/* ---------- 11 · Footer ---------- */
.lka-footer{
  border-top:1px solid var(--lka-stroke);
  padding-block:var(--lka-sp-7) var(--lka-sp-5);
  font-size:var(--lka-fs-sm);
  color:var(--lka-text-muted);
}
.lka-footer__grid{display:grid;gap:var(--lka-sp-6);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:var(--lka-sp-6)}
.lka-footer__col h5{font-size:var(--lka-fs-sm);color:var(--lka-text);margin-bottom:var(--lka-sp-3);text-transform:uppercase;letter-spacing:.16em}
.lka-footer__col a{display:block;padding-block:.25rem;color:var(--lka-text-muted)}
.lka-footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--lka-sp-3);padding-top:var(--lka-sp-5);border-top:1px solid var(--lka-stroke);color:var(--lka-text-dim)}

/* ---------- 12 · Formularios ---------- */
.lka-form{display:grid;gap:var(--lka-sp-4);max-width:640px;margin-inline:auto}
.lka-field{display:flex;flex-direction:column;gap:.4rem}
.lka-field label{font-size:var(--lka-fs-sm);color:var(--lka-text-muted)}
.lka-field input,.lka-field textarea,.lka-field select{
  background:var(--lka-bg-soft);border:1px solid var(--lka-stroke);
  border-radius:var(--lka-r-sm);padding:.8rem 1rem;
  transition:border-color var(--lka-dur-1) var(--lka-ease);
}
.lka-field input:focus,.lka-field textarea:focus,.lka-field select:focus{
  border-color:var(--lka-yellow);outline:none;
}
.lka-field--error input,.lka-field--error textarea{border-color:var(--lka-rose)}
.lka-field__error{font-size:var(--lka-fs-xs);color:var(--lka-rose)}
.lka-alert{padding:1rem 1.2rem;border-radius:var(--lka-r-sm);border:1px solid var(--lka-stroke-2)}
.lka-alert--ok{background:rgba(138,231,197,.08);color:var(--lka-mint);border-color:rgba(138,231,197,.3)}
.lka-alert--err{background:rgba(255,138,128,.08);color:var(--lka-rose);border-color:rgba(255,138,128,.3)}

/* ---------- 13 · Breadcrumbs ---------- */
.lka-breadcrumbs{font-size:var(--lka-fs-xs);color:var(--lka-text-dim);padding-block:var(--lka-sp-4)}
.lka-breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none}
.lka-breadcrumbs li+li::before{content:"›";margin-right:.5rem;color:var(--lka-text-dim)}
.lka-breadcrumbs a:hover{color:var(--lka-text)}

/* ---------- 14 · Error pages ---------- */
.lka-error{min-height:100vh;display:grid;place-items:center;background:var(--lka-bg)}
.lka-error__wrap{text-align:center;padding:var(--lka-sp-6)}
.lka-error__code{font-size:clamp(4rem,8vw,7rem);font-weight:700;color:var(--lka-yellow);line-height:1}
.lka-error h1{margin-block:var(--lka-sp-3) var(--lka-sp-4)}

/* ---------- 15 · Utilidades ---------- */
.lka-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lka-divider{height:1px;background:linear-gradient(90deg,transparent,var(--lka-stroke-2),transparent);margin:var(--lka-sp-7) 0}

/* =====================================================================
 * 16 · Tipografía Onest (humanista libre, alternativa a Mozaic HUM)
 *      Descarga las .woff2 desde https://fonts.google.com/specimen/Onest
 *      y déjalas en /public/assets/fonts/. Si no están, cae a system fonts.
 * ===================================================================== */
@font-face {
  font-family: 'Onest';
  src: url('/assets/fonts/Onest-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('/assets/fonts/Onest-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('/assets/fonts/Onest-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('/assets/fonts/Onest-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --lka-font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable',
                   'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* =====================================================================
 * 17 · Sistema solar (home)
 * ===================================================================== */
.lka-solar {
  position: relative;
  min-height: min(100vh, 980px);
  isolation: isolate;
  overflow: hidden;
  padding: var(--lka-sp-6) var(--lka-sp-5);
}
.lka-solar__stars {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -2;
}
.lka-solar__halo {
  position: absolute; inset: 0; margin: auto;
  width: min(80vmin, 900px); height: min(80vmin, 900px);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(242, 215, 0, 0.18) 0%,
    rgba(242, 215, 0, 0.05) 35%,
    transparent 65%);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
  animation: lka-halo-breathe 9s ease-in-out infinite;
}
@keyframes lka-halo-breathe {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.04); opacity: 1;   }
}

/* --- Núcleo (Sofia + chat) --- */
.lka-core {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: clamp(60px, 14vh, 140px) auto 0;
  text-align: center;
}
.lka-core__avatar {
  width: 92px; height: 92px;
  margin: 0 auto var(--lka-sp-4);
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow:
    0 0 0 1px rgba(242, 215, 0, 0.4),
    0 0 60px rgba(242, 215, 0, 0.35),
    0 0 120px rgba(242, 215, 0, 0.18);
}
.lka-core__hello {
  font-size: var(--lka-fs-xs);
  letter-spacing: 0.28em;
  color: var(--lka-text-dim);
  margin-bottom: var(--lka-sp-3);
}
.lka-core__title {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--lka-sp-5);
}
.lka-core__accent { color: var(--lka-yellow); font-weight: 600; }

/* Chat input */
.lka-chat {
  display: flex; align-items: center; gap: 8px;
  background: rgba(16, 21, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 244, 241, 0.10);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  max-width: 480px;
  margin: 0 auto;
  transition: border-color 200ms var(--lka-ease), box-shadow 200ms var(--lka-ease);
}
.lka-chat:focus-within {
  border-color: var(--lka-yellow);
  box-shadow: 0 0 0 4px rgba(242, 215, 0, 0.12);
}
.lka-chat__input {
  flex: 1;
  background: transparent; border: 0;
  font: inherit; color: var(--lka-text);
  padding: 10px 4px;
  min-width: 0;
}
.lka-chat__input::placeholder { color: var(--lka-text-dim); }
.lka-chat__input:focus { outline: none; }
.lka-chat__send {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--lka-yellow);
  color: var(--lka-bg-deep);
  display: grid; place-items: center;
  transition: transform 160ms var(--lka-ease), filter 160ms var(--lka-ease);
}
.lka-chat__send:hover:not(:disabled) { transform: scale(1.05); filter: brightness(1.06); }
.lka-chat__send:disabled, .lka-chat__input:disabled { opacity: .5; cursor: not-allowed; }
.lka-chat__hint {
  font-size: var(--lka-fs-xs);
  color: var(--lka-text-dim);
  margin-top: var(--lka-sp-3);
}
.lka-chat__hint a { color: var(--lka-yellow); }

/* Panel conversación */
.lka-chat-panel {
  margin-top: var(--lka-sp-5);
  text-align: left;
  background: rgba(12, 15, 20, 0.85);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(245, 244, 241, 0.08);
  border-radius: 18px;
  padding: 18px;
  max-height: 50vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.lka-chat-msg {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: var(--lka-fs-sm);
  line-height: 1.5;
  max-width: 90%;
  animation: lka-fade-up 280ms var(--lka-ease) both;
}
.lka-chat-msg--user {
  margin-left: auto;
  background: rgba(242, 215, 0, 0.16);
  color: var(--lka-text);
  border: 1px solid rgba(242, 215, 0, 0.3);
}
.lka-chat-msg--sofia {
  margin-right: auto;
  background: rgba(245, 244, 241, 0.04);
  border: 1px solid rgba(245, 244, 241, 0.08);
}
.lka-chat-msg--error {
  margin-right: auto;
  background: rgba(255, 138, 128, 0.08);
  border: 1px solid rgba(255, 138, 128, 0.3);
  color: var(--lka-rose);
}
.lka-chat-typing {
  display: inline-flex; gap: 4px; align-items: center;
}
.lka-chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lka-text-dim);
  animation: lka-typing 1.2s ease-in-out infinite;
}
.lka-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.lka-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes lka-typing {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-4px); opacity: 1; }
}

/* =====================================================================
 * 18 · Sistema orbital · 2 anillos concéntricos
 *      .lka-orbit rota alrededor del centro de la sección.
 *      .lka-orbit__pos se desplaza al radio del anillo.
 *      .lka-planet (el contenido) contra-rota para mantener el texto recto.
 * ===================================================================== */
:root {
  /* Radios responsivos: se encogen automáticamente en viewports estrechos */
  --lka-ring-inner: clamp(180px, 22vw, 270px);
  --lka-ring-outer: clamp(240px, 30vw, 350px);
}

.lka-rings {
  position: absolute;
  top: 50%; left: 50%;
  width: min(80vmin, 780px);
  height: min(80vmin, 780px);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.lka-orbits {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.lka-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  animation: lka-orbit-spin calc(var(--d, 60) * 1s) linear infinite;
  animation-delay: calc(var(--o, 0) / 360 * var(--d, 60) * -1s);
}
.lka-orbit__pos {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%) translateX(var(--lka-ring-inner));
  pointer-events: auto;
  transition: transform 280ms var(--lka-ease);
}
.lka-orbit--outer .lka-orbit__pos {
  transform: translate(-50%, -50%) translateX(var(--lka-ring-outer));
}

.lka-planet {
  width: 220px;
  background: rgba(18, 24, 33, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(245, 244, 241, 0.12);
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 280ms var(--lka-ease),
              background   280ms var(--lka-ease),
              box-shadow   280ms var(--lka-ease);
  animation: lka-orbit-counter calc(var(--d, 60) * 1s) linear infinite;
  animation-delay: calc(var(--o, 0) / 360 * var(--d, 60) * -1s);
}

@keyframes lka-orbit-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
@keyframes lka-orbit-counter {
  from { transform: rotate(0); }
  to   { transform: rotate(-360deg); }
}

/* Hover/focus en el pos wrapper: escala suave + frenazo del sistema */
.lka-orbit__pos:hover,
.lka-orbit__pos:focus-within,
.lka-orbit__pos.is-open {
  z-index: 30;
}
.lka-orbit__pos:hover,
.lka-orbit__pos:focus-within {
  transform: translate(-50%, -50%) translateX(var(--lka-ring-inner)) scale(1.06);
}
.lka-orbit--outer .lka-orbit__pos:hover,
.lka-orbit--outer .lka-orbit__pos:focus-within {
  transform: translate(-50%, -50%) translateX(var(--lka-ring-outer)) scale(1.06);
}
.lka-orbit__pos:hover > .lka-planet,
.lka-orbit__pos:focus-within > .lka-planet,
.lka-orbit__pos.is-open > .lka-planet {
  border-color: var(--lka-card-color, var(--lka-yellow));
  background: rgba(22, 28, 38, 0.96);
  box-shadow:
    0 12px 40px -10px rgba(0, 0, 0, 0.6),
    0 0 0 1px var(--lka-card-color, var(--lka-yellow)),
    0 0 28px -4px color-mix(in srgb, var(--lka-card-color, #F2D700) 30%, transparent);
}

/* Pausa todo el sistema cuando el usuario interactúa con cualquier parte */
.lka-solar:hover .lka-orbit,
.lka-solar:focus-within .lka-orbit,
.lka-solar:hover .lka-planet,
.lka-solar:focus-within .lka-planet,
.lka-solar:hover .lka-solar__halo,
.lka-solar:focus-within .lka-solar__halo {
  animation-play-state: paused;
}
.lka-planet__head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px;
}
.lka-planet__icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--lka-card-color, #F2D700) 18%, transparent);
  color: var(--lka-card-color, var(--lka-yellow));
}
.lka-planet__name { flex: 1; }
.lka-planet__badge {
  font-size: 9.5px; letter-spacing: 0.14em;
  background: var(--lka-mint);
  color: var(--lka-bg-deep);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
}
.lka-planet__body {
  max-height: 0; opacity: 0;
  overflow: hidden;
  transition: max-height 320ms var(--lka-ease), opacity 200ms var(--lka-ease);
}
.lka-planet:hover .lka-planet__body,
.lka-planet:focus-within .lka-planet__body,
.lka-planet.is-open .lka-planet__body {
  max-height: 280px; opacity: 1;
  margin-top: 10px;
}
.lka-planet__tagline {
  font-size: 12.5px; line-height: 1.5;
  color: var(--lka-text-muted);
  margin-bottom: 8px;
}
.lka-planet__subs {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 10px;
}
.lka-planet__link {
  display: inline-block; font-size: 12.5px;
  color: var(--lka-card-color, var(--lka-yellow));
  font-weight: 600;
}

/* =====================================================================
 * 19 · Pills, badges
 * ===================================================================== */
.lka-pill {
  display: inline-block;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lka-card-color, #F2D700) 18%, transparent);
  color: var(--lka-text);
  border: 1px solid color-mix(in srgb, var(--lka-card-color, #F2D700) 40%, transparent);
}
.lka-pill--more {
  background: transparent;
  color: var(--lka-text-dim);
  border-color: rgba(245, 244, 241, 0.15);
}
.lka-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.lka-badge {
  display: inline-block;
  font-size: 10px; letter-spacing: 0.14em;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
  margin-left: 8px;
  vertical-align: middle;
}
.lka-badge--new { background: var(--lka-mint); color: var(--lka-bg-deep); }

/* =====================================================================
 * 20 · Responsive
 *      ≥1100px · 2 órbitas grandes (defaults)
 *       900-1099 · órbitas comprimidas (clamp ya las ajusta)
 *      <900px  · layout vertical zigzag (sin órbita)
 * ===================================================================== */

/* Tablet ancho / desktop pequeño: dejamos la órbita pero ajustamos el núcleo */
@media (max-width: 1100px) and (min-width: 900px) {
  .lka-solar { min-height: 820px; }
  .lka-core  { max-width: 460px; margin-top: clamp(80px, 12vh, 110px); }
  .lka-planet { width: 200px; }
}

/* Móvil + tablet vertical: pasamos a lista vertical */
@media (max-width: 899px) {
  .lka-solar { min-height: auto; padding-bottom: var(--lka-sp-7); overflow: visible; }
  .lka-solar__halo { width: 80vw; height: 80vw; }
  .lka-rings { display: none; }

  .lka-core { margin-top: var(--lka-sp-6); padding: 0 var(--lka-sp-2); }
  .lka-core__title { font-size: clamp(1.25rem, 5.4vw, 1.7rem); }
  .lka-chat { padding: 4px 4px 4px 14px; }
  .lka-chat__send { width: 34px; height: 34px; }
  .lka-chat-panel { max-height: 60vh; }

  .lka-orbits {
    position: static;
    margin-top: var(--lka-sp-7);
    display: grid;
    gap: 14px;
    padding: 0 var(--lka-sp-3);
    pointer-events: auto;
  }
  .lka-orbit {
    position: static;
    width: auto; height: auto;
    animation: none;
    display: flex;
    justify-content: center;
  }
  .lka-orbit:nth-child(odd)  { justify-content: flex-start; }
  .lka-orbit:nth-child(even) { justify-content: flex-end; }
  .lka-orbit__pos {
    position: static;
    transform: none !important;
    pointer-events: auto;
    width: min(360px, 100%);
  }
  .lka-orbit__pos:hover,
  .lka-orbit__pos:focus-within { transform: none !important; }
  .lka-planet {
    width: 100%;
    animation: none;
  }
  .lka-planet .lka-planet__body {
    max-height: 360px;
    opacity: 1;
    margin-top: 10px;
  }
}

/* Móvil estrecho */
@media (max-width: 480px) {
  .lka-core__avatar { width: 78px; height: 78px; }
  .lka-core__avatar svg { width: 78px; height: 78px; }
  .lka-planet { width: 100%; max-width: 100%; }
  .lka-orbit { justify-content: stretch !important; }
  .lka-orbit__pos { width: 100%; max-width: 100%; }
}

/* Reducción de movimiento: las órbitas se quedan paradas en su ángulo inicial */
@media (prefers-reduced-motion: reduce) {
  .lka-orbit, .lka-planet, .lka-solar__halo { animation: none !important; }
}