/* Kervyn: estética de hoja de datos de componente electrónico, con un hero oscuro
   donde una red neuronal en 3D muestra tokens atravesando capas.
   Columna de 1120 px, apartados con etiqueta de referencia y tablas con condiciones de prueba.
   Verde = kervyn-dev, azul = kervyn-data. */
:root {
  --paper: #F3F5F2;
  --panel: #E5EAE6;
  --ink: #111517;
  --ink-2: #2B322E;
  --muted: #4E5852;
  --rule: #C3CBC5;
  --accent: #0B6B4D;
  --accent-ink: #F3F5F2;
  --data: #2C50C0;
  --embed: #7B3FC4;
  --critical: #B3261E;
  --code-bg: #121816;
  --code-fg: #DCE5E0;
  --code-muted: #8E9B94;
  --hero-bg: #0A0F0D;
  --hero-ink: #E8EEEA;
  --hero-ink-2: #C3CFC8;
  --hero-muted: #9DACA4;
  --hero-accent: #4CC594;
  --hero-data: #8DA9FF;
  --hero-embed: #C4A2FF;
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E1311;
    --panel: #161D1A;
    --ink: #E6ECE8;
    --ink-2: #C9D2CC;
    --muted: #99A59E;
    --rule: #2B3631;
    --accent: #4CC594;
    --accent-ink: #08120D;
    --data: #8DA9FF;
    --embed: #C4A2FF;
    --critical: #FF8A80;
    --code-bg: #070A09;
    --code-fg: #D8E2DC;
    --code-muted: #7F8C85;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
code, pre { font-family: var(--mono); }
img, svg { max-width: 100%; }

.skip { position: absolute; left: -9999px; top: 12px; z-index: 50; padding: 10px 14px; background: var(--paper); color: var(--ink); }
.skip:focus { left: 12px; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font: 600 15px/1 var(--body);
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { color: var(--accent-ink); filter: brightness(1.08); }
.btn.is-pending { opacity: 0.5; cursor: not-allowed; }
.btn.is-pending:hover { border-color: var(--ink); color: var(--ink); filter: none; }

/* ---------- Hero oscuro con la red neuronal ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-ink);
}
.hero #neural {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 15, 13, 0.96) 0%, rgba(10, 15, 13, 0.84) 34%, rgba(10, 15, 13, 0.18) 64%, rgba(10, 15, 13, 0) 100%),
    linear-gradient(0deg, rgba(10, 15, 13, 0.9) 0%, rgba(10, 15, 13, 0) 26%);
}
.no-webgl .hero {
  background:
    radial-gradient(55% 70% at 74% 48%, rgba(76, 197, 148, 0.2), transparent 70%),
    radial-gradient(30% 40% at 80% 40%, rgba(141, 169, 255, 0.12), transparent 70%),
    var(--hero-bg);
}

.site-header { border-bottom: 1px solid rgba(232, 238, 234, 0.14); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.05em;
  color: var(--hero-ink);
  text-decoration: none;
  white-space: nowrap;
  /* Degradado del logo: verde de kervyn-dev a azul de kervyn-data */
  --lm-a: var(--hero-accent);
  --lm-b: var(--hero-data);
}

/* Logo: chip con la K calada (ver marketing/brand) */
.logo-mark { display: block; flex: none; width: 37px; height: 30px; overflow: visible; }
.logo-mark .lm-a { stop-color: var(--lm-a); }
.logo-mark .lm-b { stop-color: var(--lm-b); }
.logo-mark .pin, .logo-mark .die { transform-box: fill-box; transform-origin: center; }
.nav { display: flex; align-items: center; gap: 20px; }
.nav ul { margin-right: 8px !important; }
.nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav ul a { color: var(--hero-muted); text-decoration: none; font-size: 14.5px; white-space: nowrap; }
.nav ul a:hover { color: var(--hero-ink); }
.hero .btn-primary { background: var(--hero-accent); border-color: var(--hero-accent); color: #06100B; }
.hero .btn-ghost { border-color: rgba(232, 238, 234, 0.55); color: var(--hero-ink); }
.hero .btn-ghost:hover { border-color: var(--hero-accent); color: var(--hero-accent); }
.hero a:focus-visible { outline-color: var(--hero-accent); }

.hero-body .wrap { position: relative; padding-block: 104px 128px; }
.hero-copy { max-width: 600px; }
.eyebrow, .sec-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow { color: var(--hero-accent); }
h1 {
  font-family: var(--display);
  font-stretch: 118%;
  font-weight: 760;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 16px 0 20px;
  text-wrap: balance;
}
.lead { font-size: 18px; line-height: 1.55; color: var(--hero-ink-2); max-width: 32em; margin: 0 0 30px; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-families {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 30px 0 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--hero-ink-2);
}
.hero-families li { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-dev { background: var(--hero-accent); }
.dot-data { background: var(--hero-data); }
.dot-embed { background: var(--hero-embed); }
.soon {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hero-data);
  border: 1px dashed var(--hero-data);
  border-radius: 99px;
  padding: 1px 7px;
}
.hero-caption {
  position: absolute;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: 28px;
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--hero-muted);
}

/* Aviso del último paper, encima del titular */
.hero-news {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0 0 22px;
  padding: 5px 14px 5px 5px;
  font: 500 13px/1.3 var(--mono);
  color: var(--hero-ink);
  text-decoration: none;
  background: rgba(10, 15, 13, 0.5);
  border: 1px solid rgba(232, 238, 234, 0.25);
  border-radius: 99px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s;
}
.hero-news:hover { border-color: var(--hero-accent); }
.hero-news-tag {
  flex: none;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #06100B;
  background: var(--hero-accent);
  border-radius: 99px;
}
.hero-news-arrow { flex: none; color: var(--hero-accent); transition: transform 0.2s; }
.hero-news:hover .hero-news-arrow { transform: translateX(3px); }
.anim .hero-news-tag { animation: news-glow 2.8s ease-in-out infinite; }
@keyframes news-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 197, 148, 0); }
  50% { box-shadow: 0 0 14px 2px rgba(76, 197, 148, 0.55); }
}

/* ---------- Cifras ---------- */
.figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--ink);
}
.fig { padding: 22px 20px 22px 0; display: flex; flex-direction: column; gap: 4px; }
.fig + .fig { border-left: 1px solid var(--rule); padding-left: 20px; }
.fig-value { font-family: var(--display); font-weight: 720; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fig-label { font-size: 14px; line-height: 1.4; color: var(--muted); }

/* ---------- Secciones ---------- */
.section .wrap { padding-block: 80px; }
.section + .section .wrap { border-top: 1px solid var(--rule); }
.sec-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; max-width: 48em; }
.sec-label { color: var(--accent); }
h2 {
  margin: 0;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 720;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.sec-intro { margin: 0; color: var(--ink-2); font-size: 17px; text-wrap: pretty; }
h3 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 650; }
.tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

/* Familias de modelos */
.family { border-top: 2px solid var(--ink); padding-top: 26px; }
.family + .family { margin-top: 56px; }
.family-head { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px; align-items: end; margin-bottom: 26px; }
.family-name { font-family: var(--mono); font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.family-dev .family-name { color: var(--accent); }
.family-data .family-name { color: var(--data); }
.family-role { margin: 6px 0 0; font-size: 15px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.family-desc { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 40em; text-wrap: pretty; }

.variants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.variant { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--rule); border-radius: 4px; }
.variant-current { border: 2px solid var(--accent); padding: 17px; }
.variant-name { font-family: var(--mono); font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.variant-size { font-family: var(--display); font-weight: 720; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.variant p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.variant .variant-next { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.pill {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  border: 1.5px solid var(--muted);
  color: var(--muted);
  white-space: nowrap;
}
.pill-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pill-soon { border-style: dashed; }
.pill-data { border-color: var(--data); color: var(--data); }

.data-focus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.data-focus li { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px dashed var(--data); border-radius: 4px; }
.data-focus code { font-size: 15px; font-weight: 700; color: var(--data); }
.data-focus span { font-size: 15px; color: var(--ink-2); }
/* kervyn-embed: violeta, la tercera familia */
.family-embed .family-name { color: var(--embed); }
.pill-embed { border-color: var(--embed); color: var(--embed); }
.embed-focus li { border-color: var(--embed); }
.embed-focus code { color: var(--embed); }
.variants-embed { margin-bottom: 16px; }
.variant-embed.variant-current { border-color: var(--embed); }

/* Ventajas */
.benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
.benefit { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--ink); }
.benefit p { margin: 0; color: var(--ink-2); font-size: 15.5px; max-width: 36em; }

/* Pasos numerados (Train your own e Integración) */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; counter-increment: step; }
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
}
.steps p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.steps-compact { gap: 20px; margin-bottom: 24px; }

/* Train your own */
.section-train { background: var(--panel); }
.section-train .wrap, .section-train + .section .wrap { border-top: 0; }
.section-train .sec-label { color: var(--accent); }
.train { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.train-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.train-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.train-cta p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

/* Bloques de código */
.code-panel { min-width: 0; background: var(--code-bg); color: var(--code-fg); border-radius: 6px; overflow: hidden; }
.code-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.code-title { font-family: var(--mono); font-size: 12px; color: var(--code-muted); }
.copy {
  min-height: 36px;
  padding: 0 14px;
  font: 600 13px/1 var(--body);
  color: var(--code-fg);
  background: transparent;
  border: 1px solid var(--code-muted);
  border-radius: 3px;
  cursor: pointer;
}
.copy:hover { border-color: var(--code-fg); }
.code-panel pre { margin: 0; padding: 18px 16px 20px; overflow-x: auto; font-size: 13px; line-height: 1.6; }
.code-panel .c { color: var(--code-muted); }

/* Integración: el modelo como chip, los endpoints como pines */
.integrate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.integrate-steps { min-width: 0; }
.chip {
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 560px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.pins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pins li { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; line-height: 18px; color: var(--ink-2); white-space: nowrap; }
.pins-left li { justify-content: flex-end; }
.pins-left li::after, .pins-right li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 2px;
  background: var(--ink);
  animation: signal 5s ease-in-out infinite;
}
.pins li:nth-child(2)::after, .pins li:nth-child(2)::before { animation-delay: 0.25s; }
.pins li:nth-child(3)::after, .pins li:nth-child(3)::before { animation-delay: 0.5s; }
.pins li:nth-child(4)::after, .pins li:nth-child(4)::before { animation-delay: 0.75s; }
.pins-right li::before { animation-delay: 1.2s; }
.pins-right li:nth-child(2)::before { animation-delay: 1.45s; }
.pins-right li:nth-child(3)::before { animation-delay: 1.7s; }
.pins-right li:nth-child(4)::before { animation-delay: 1.95s; }
@keyframes signal {
  0%, 12%, 100% { background: var(--ink); }
  5% { background: var(--accent); }
}
.package {
  position: relative;
  width: 168px;
  padding: 26px 16px 18px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}
.package::before { content: ""; position: absolute; top: 9px; left: 9px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink); }
.pkg-name { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 21px; letter-spacing: 0.04em; color: var(--ink); line-height: 1.1; }
.pkg-model { font-weight: 700; color: var(--ink); letter-spacing: 0.06em; margin-bottom: 6px; }
.pkg-led { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.pkg-led::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: led 2.6s ease-in-out infinite; }
@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.chip figcaption { grid-column: 1 / -1; margin-top: 20px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* Rendimiento */
.perf { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 48px; align-items: start; }
.table-box { overflow-x: auto; min-width: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
caption { caption-side: top; text-align: left; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; padding-bottom: 10px; color: var(--ink); }
th { text-align: left; font-weight: 650; background: var(--panel); padding: 9px 10px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); white-space: nowrap; }
td { padding: 11px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
.num { text-align: right; font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.fmt { white-space: nowrap; }
.fmt small { display: block; color: var(--muted); font-size: 12.5px; }
.bar-cell { min-width: 220px; }
.bar { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.bar i { display: block; height: 10px; width: calc(var(--v) / 220 * 70%); background: var(--muted); border-radius: 1px; }
.bar.main i { background: var(--accent); }
.note { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); max-width: 46em; }
tr.is-best td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
tr.is-best .num { color: var(--accent); font-weight: 700; }
tr.is-total td { font-weight: 700; }
tr.is-total .fmt { font-family: var(--body); }
.num.is-win { color: var(--embed); font-weight: 700; }
.perf-embed { max-width: 920px; margin-top: 48px; }
.perf-embed table { min-width: 560px; }

/* Papers */
.paper { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 56px; align-items: start; }
/* Portada con un taco de hojas detrás */
.paper-cover {
  display: block;
  border-radius: 3px;
  box-shadow:
    7px 7px 0 -1px var(--paper),
    7px 7px 0 0 var(--rule),
    14px 14px 0 -1px var(--paper),
    14px 14px 0 0 var(--rule),
    0 34px 60px -30px rgba(5, 10, 8, 0.6);
}
.paper-cover img { display: block; width: 100%; height: auto; border-radius: 3px; }
.paper-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.paper-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.paper-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font: 600 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.paper-meta span:first-child { color: var(--accent); }
.paper-body h3 { font-family: var(--display); font-stretch: 112%; font-weight: 720; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; text-wrap: balance; }
.paper-sub { margin: 0; max-width: 40em; color: var(--ink-2); font-size: 17px; text-wrap: pretty; }
.paper-author { margin: 0; color: var(--ink-2); font-size: 15px; }
.paper-author b { color: var(--ink); font-weight: 650; }
.paper-author a { color: var(--accent); }
.paper-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px 0 4px; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.paper-figs li { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 0 0; min-width: 0; }
.paper-figs li + li { padding-left: 14px; border-left: 1px solid var(--rule); }
.paper-figs b { font: 720 clamp(19px, 1.9vw, 24px)/1.15 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.paper-figs span { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.paper-dl { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.paper-dl .btn { gap: 10px; }
.paper-dl small { font: 500 12px/1 var(--mono); opacity: 0.75; }
.dl-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* El PDF en el idioma de la página va primero y destacado */
html[lang="es"] .paper-dl [hreflang="es"],
html[lang="en"] .paper-dl [hreflang="en"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
html[lang="es"] .paper-dl [hreflang="es"]:hover,
html[lang="en"] .paper-dl [hreflang="en"]:hover { color: var(--accent-ink); filter: brightness(1.08); }
html[lang="en"] .paper-dl [hreflang="en"] { order: -1; }
.anim .paper-dl .btn:hover .dl-icon { animation: dl-bob 0.9s ease-in-out infinite; }
@keyframes dl-bob { 50% { transform: translateY(2px); } }
.paper-toc { padding-top: 12px; border-top: 1px solid var(--rule); }
.paper-toc summary { cursor: pointer; font: 600 12.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.paper-toc ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: chapter; columns: 2; column-gap: 28px; font-size: 14.5px; color: var(--ink-2); }
.paper-toc li { counter-increment: chapter; break-inside: avoid; padding: 3px 0; }
.paper-toc li::before { content: counter(chapter, decimal-leading-zero); margin-right: 10px; font: 600 12px var(--mono); color: var(--accent); }
.paper-cite { padding: 14px 16px; background: var(--panel); border-radius: 4px; }
.paper-cite-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; font: 600 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.paper-cite .copy { min-height: 30px; color: var(--ink); border-color: var(--rule); letter-spacing: 0; text-transform: none; }
.paper-cite .copy:hover { border-color: var(--ink); }
#paper-1-cite { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.paper-next { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 40px 0 0; color: var(--ink-2); font-size: 15.5px; }

/* Colabora */
.collab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 20px; }
.collab-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; border: 1px solid var(--rule); border-radius: 4px; min-width: 0; }
.collab-card p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.collab-card .btn { margin-top: 6px; }

/* Buy me a coffee: amarillo y tinta de la marca de la plataforma, con una taza propia */
.btn-coffee { background: #FFDD00; border-color: #FFDD00; color: #0D0C22; padding-left: 14px; }
.btn-coffee:hover { color: #0D0C22; border-color: #FFDD00; filter: brightness(1.06); }
.btn-coffee.is-pending:hover { border-color: #FFDD00; color: #0D0C22; }
.btn-coffee .cup {
  width: 21px;
  height: 21px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.btn-coffee .steam { transform-box: fill-box; transform-origin: 50% 100%; }
.collab-repos { grid-row: span 3; border: 2px solid var(--ink); padding: 23px; }
.repo-form { display: flex; flex-direction: column; gap: 16px; width: 100%; margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 13.5px; font-weight: 600; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.field input, .field select {
  min-height: 44px;
  width: 100%;
  padding: 0 12px;
  font: 400 15px/1.2 var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 3px;
}
.field input::placeholder { color: var(--muted); opacity: 0.8; }
.field input:focus, .field select:focus { border-color: var(--accent); }
[aria-invalid="true"] { border-color: var(--critical) !important; }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14.5px; color: var(--ink-2); }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.check input[aria-invalid="true"] { outline: 2px solid var(--critical); outline-offset: 2px; }
.repo-form .btn { align-self: flex-start; }
.form-status { margin: 0; min-height: 1.3em; font-size: 14px; color: var(--muted); }
.form-status.is-error { color: var(--critical); }
.contact-line { margin: 28px 0 0; color: var(--muted); font-size: 15px; }
.contact-addr { font-family: var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.is-pending-text { color: var(--muted); font-style: italic; }

/* Pie */
.site-footer { border-top: 2px solid var(--ink); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding-block: 28px 40px; font-size: 14px; color: var(--muted); }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-stretch: 125%; font-weight: 800; letter-spacing: 0.05em; color: var(--ink); --lm-a: var(--accent); --lm-b: var(--data); }
.footer-brand .logo-mark { width: 32px; height: 26px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer nav a { color: var(--ink-2); text-decoration: none; }
.site-footer nav a:hover { color: var(--accent); }
/* Firma, como en la portada de los papers; el corazón late si hay animaciones */
.footer-sign { margin: 0 0 0 auto; color: var(--ink-2); white-space: nowrap; }
.footer-sign .heart { display: inline-block; color: #E5484D; }
.anim .footer-sign .heart { animation: heartbeat 1.8s ease-in-out infinite; }
@keyframes heartbeat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 28% { transform: scale(1.1); } }


/* ---------- Idioma ---------- */
.i18n-wait body { visibility: hidden; }
.lang { display: inline-flex; border: 1px solid rgba(232, 238, 234, 0.3); border-radius: 3px; overflow: hidden; flex: none; }
.lang button {
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  font: 600 12.5px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--hero-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.lang button + button { border-left: 1px solid rgba(232, 238, 234, 0.3); }
.lang button:hover { color: var(--hero-ink); }
.lang button[aria-pressed="true"] { background: var(--hero-ink); color: var(--hero-bg); }
.lang button:focus-visible { outline: 2px solid var(--hero-accent); outline-offset: -2px; }

/* Hugging Face: icono de la cabecera y franja bajo los modelos */
.hf-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(232, 238, 234, 0.3);
  border-radius: 3px;
  font-size: 19px;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.hf-icon:hover { border-color: var(--hero-accent); transform: translateY(-1px); }
.hf-icon:focus-visible { outline: 2px solid var(--hero-accent); outline-offset: 2px; }

.hub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 56px;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--panel);
}
.hub-mark { font-size: 34px; line-height: 1; flex: none; }
.hub-copy { flex: 1 1 280px; min-width: 0; }
.hub-copy h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hub-copy h3 code { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--accent); }
.hub-copy p { margin: 4px 0 0; color: var(--ink-2); font-size: 15.5px; }
.hub .btn { flex: none; }

/* "Pronto" dentro de botones y etiquetas de sección */
.btn .soon { margin-left: 2px; }
.sec-label { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pill-inline { font-size: 10.5px; padding: 2px 8px; }

/* ---------- Dentro del chip ---------- */
/* Selector de familia: #dentro lleva data-family y cada pieza dice para qué familias es
   (data-for="dev", clases f-dev / f-data / f-embeddings). */
#dentro[data-family="dev"] [data-for]:not([data-for~="dev"]),
#dentro[data-family="data"] [data-for]:not([data-for~="data"]),
#dentro[data-family="embeddings"] [data-for]:not([data-for~="embeddings"]),
#dentro:not([data-family="dev"]) .f-dev:not(.f-embeddings),
#dentro:not([data-family="embeddings"]) .f-embeddings:not(.f-dev),
#dentro[data-family="data"] .f-dev,
#dentro[data-family="data"] .f-embeddings,
#dentro:not([data-family="data"]) .f-data { display: none; }
/* Color de la familia para resaltados, cifras y pipeline */
#dentro { --fam: var(--accent); }
#dentro[data-family="embeddings"] { --fam: var(--embed); }
#dentro[data-family="embeddings"] .stack-scene { --c-top: #C4A2FF; --c-bot: #8DA9FF; --top: 14; --gs: 19px; }
/* kervyn-embed v3 tiene 12 capas: sobran los bloques 13-32 de kervyn-dev y la salida y la tapa bajan */
#dentro[data-family="embeddings"] .slab-dev { display: none; }
#dentro[data-family="embeddings"] .slab-head { --i: 14 !important; }
#dentro[data-family="embeddings"] .slab-lid { --i: 15 !important; }
#dentro[data-family="data"] .stack-scene { --c-top: #8DA9FF; --c-bot: #8DA9FF; }
#dentro[data-family="data"] .slab:not(.slab-lid) { opacity: 0.4; }

.family-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.family-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  font: 600 14px/1 var(--mono);
  color: var(--ink-2);
  background: transparent;
  border: 1.5px solid var(--rule);
  border-radius: 99px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.family-tabs button:hover { border-color: var(--ink-2); color: var(--ink); }
.family-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--tab-c, var(--accent)); background: color-mix(in srgb, var(--tab-c, var(--accent)) 10%, transparent); }
.family-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.family-tabs [data-pick="data"] { --tab-c: var(--data); }
.family-tabs [data-pick="embeddings"] { --tab-c: var(--embed); }
.tab-soon { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px dashed currentColor; border-radius: 99px; padding: 2px 6px; }
.family-intro { max-width: 46em; margin: 0 0 26px; color: var(--ink-2); font-size: 17px; text-wrap: pretty; }
.layers-soon { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; border: 1px dashed var(--data); border-radius: 4px; }
.layers-soon h3 { font-size: 19px; }
.layers-soon p { margin: 0; color: var(--ink-2); }
.inside-specs-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Al cambiar de familia, lo nuevo entra con un pequeño fundido */
.anim #dentro [data-for] { animation: family-in 0.45s ease both; }
@keyframes family-in { from { opacity: 0; transform: translateY(6px); } }

/* Pila 3D con CSS: cada capa real del modelo es una lámina. --p (0 cerrado, 1 abierto) lo
   pone chip.js según el scroll; sin JavaScript o sin animaciones se ve abierto. */
.inside { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 40px; align-items: center; }
.stack-scene {
  --c-top: #4CC594;
  --c-bot: #8DA9FF;
  --p: 1;
  --top: 34;
  --gs: 8px;
  --gap: calc(3px + var(--p) * var(--gs));
  --lift: calc(var(--p) * 44px);
  position: relative;
  margin: 0;
  height: 680px;
  border-radius: 6px;
  overflow: hidden;
  color: var(--code-fg);
  background:
    radial-gradient(55% 50% at 50% 52%, rgba(76, 197, 148, 0.12), transparent 70%),
    radial-gradient(40% 35% at 40% 85%, rgba(141, 169, 255, 0.1), transparent 70%),
    var(--code-bg);
}
.stack-view { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 50% 25%; }
.stack {
  position: absolute;
  left: 50%;
  top: 72%;
  transform-style: preserve-3d;
  transform: rotateX(57deg) rotateZ(-36deg);
}
.slab {
  --c: color-mix(in oklab, var(--c-top) calc(var(--i) / var(--top) * 100%), var(--c-bot));
  position: absolute;
  left: -110px;
  top: -110px;
  width: 220px;
  height: 220px;
  border: 1.5px solid color-mix(in srgb, var(--c) 75%, transparent);
  border-radius: 9px;
  background-color: rgba(13, 20, 17, 0.07);
  background-image:
    linear-gradient(rgba(220, 229, 224, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 229, 224, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  transform: translateZ(calc(var(--i) * var(--gap)));
  transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.slab > span {
  position: absolute;
  left: 12px;
  bottom: 9px;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c) 70%, #DCE5E0);
  opacity: calc(0.25 + var(--p) * 0.75);
}
/* Los rótulos de embeddings y salida van en el otro borde delantero (el izquierdo de la lámina)
   para no pisar los de los bloques vecinos: con 32 bloques las láminas quedan muy juntas */
.slab > span.at-side { left: 9px; bottom: auto; top: 12px; writing-mode: vertical-rl; }
/* El de la salida, al final del borde de siempre, para dejar sitio al del último bloque */
.slab > span.at-end { left: auto; right: 12px; }
.slab.is-active {
  border-color: var(--c);
  background-color: color-mix(in srgb, var(--c) 22%, transparent);
  box-shadow: 0 0 34px color-mix(in srgb, var(--c) 60%, transparent);
}
.slab.is-active > span { color: #F3F7F4; opacity: 1; }
.slab-lid {
  border: 0;
  background: none;
  transform: translateZ(calc(var(--i) * var(--gap) + var(--lift)));
  --lm-a: #4CC594;
  --lm-b: #8DA9FF;
}
.slab-lid .logo-mark { position: absolute; left: -43px; top: -12px; width: 306px; height: 245px; filter: drop-shadow(0 0 16px rgba(76, 197, 148, 0.35)); }
.tokens { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.tok {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--c-top);
  box-shadow: 0 0 14px var(--c-top), 0 0 3px #fff inset;
  opacity: var(--o, 0);
  transform: translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px));
}
.tok.is-last { background: #F3F7F4; box-shadow: 0 0 18px var(--c-top), 0 0 34px var(--c-top); }
/* En embeddings el último token se convierte en el vector: más grande y en violeta */
.tok.is-vector { left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 6px; background: var(--c-top); box-shadow: 0 0 22px var(--c-top), 0 0 46px var(--c-top), 0 0 4px #fff inset; }

.chip-io {
  position: absolute;
  left: 22px;
  right: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 7px;
  margin: 0;
  font: 500 12px/1.2 var(--mono);
  color: var(--code-muted);
}
.chip-out { top: 20px; }
.chip-in { bottom: 46px; }
.io-label { margin-right: 4px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.chip-in-toks { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip-io code {
  padding: 4px 7px;
  font-size: 12.5px;
  color: var(--code-fg);
  background: rgba(220, 229, 224, 0.05);
  border: 1px solid rgba(220, 229, 224, 0.22);
  border-radius: 3px;
  white-space: pre;
  transition: border-color 0.25s, color 0.25s, background-color 0.25s, opacity 0.25s;
}
.chip-in-toks code.is-lit { border-color: var(--c-top); color: #F3F7F4; background: color-mix(in srgb, var(--c-top) 16%, transparent); }
.chip-out-tok { border-color: var(--c-top) !important; color: var(--c-top) !important; box-shadow: 0 0 16px color-mix(in srgb, var(--c-top) 30%, transparent); }
.chip-near { top: 56px; transition: opacity 0.3s; }
.chip-near.is-waiting { opacity: 0; }
.chip-near-score { color: var(--c-top); font-weight: 700; }
.chip-soon { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); }
.chip-soon span { display: inline-block; padding: 6px 14px; border: 1px dashed var(--hero-data); border-radius: 99px; background: rgba(10, 15, 13, 0.75); font: 700 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hero-data); }
.chip-out-tok.is-waiting { border-color: rgba(220, 229, 224, 0.22) !important; color: var(--code-muted) !important; box-shadow: none; }
.stack-scene figcaption { position: absolute; left: 22px; right: 22px; bottom: 16px; font: 11.5px/1.4 var(--mono); color: var(--code-muted); }

.layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.layers li {
  position: relative;
  padding: 15px 18px 16px 20px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  outline: none;
  transition: border-color 0.3s, background-color 0.3s;
}
.layers li::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 2px;
  background: var(--rule);
  transition: background 0.3s;
}
.layers li.is-active, .layers li:focus-visible { border-color: var(--fam); background: color-mix(in srgb, var(--fam) 7%, transparent); }
.layers li.is-active::before, .layers li:focus-visible::before { background: linear-gradient(var(--fam), var(--data)); }
.layer-tag { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; font: 700 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.layer-tag b { color: var(--fam); white-space: nowrap; letter-spacing: 0.02em; }
.layer-n { color: var(--ink); }
.layers h3 { font-size: 17px; }
.layers li > p:last-child { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; text-wrap: pretty; }

.inside-specs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 16px; margin: 40px 0 0; padding-top: 16px; border-top: 2px solid var(--ink); }
.inside-specs dt { font: 700 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.inside-specs dd { margin: 6px 0 0; font: 720 26px/1.1 var(--display); font-variant-numeric: tabular-nums; }

.pipeline-wrap { margin-top: 64px; }
.pipeline-title { margin-bottom: 26px; font-size: 22px; }
.pipeline { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
/* La línea va del primer nodo al último (centro de la quinta columna) */
.pipeline::before, .pipeline::after { content: ""; position: absolute; left: 17px; right: calc((100% - (var(--n, 5) - 1) * 22px) / var(--n, 5) - 17px); top: 16px; height: 2px; background: var(--rule); }
.pipeline::after { background: linear-gradient(90deg, var(--fam), var(--data)); transform-origin: left center; }
.pipeline li { position: relative; padding-top: 50px; }
.pl-n {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--fam);
  border-radius: 50%;
  background: var(--paper);
  font: 700 12px/1 var(--mono);
  color: var(--fam);
}
.pipeline h4 { margin: 0 0 6px; font-size: 17px; font-weight: 650; }
.pipeline p { margin: 0; color: var(--ink-2); font-size: 14.5px; text-wrap: pretty; }
.pl-m { display: inline-block; margin-top: 10px; padding: 3px 8px; border: 1px solid var(--rule); border-radius: 3px; font: 600 12px/1.3 var(--mono); color: var(--fam); }

/* ---------- Animaciones (solo con la clase .anim en <html>) ---------- */

/* Titular que se decodifica token a token */
.tw { display: inline-block; white-space: nowrap; }
.anim .tc {
  display: inline-block;
  animation: token-in 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i) * 26ms + 120ms);
}
@keyframes token-in {
  0% { opacity: 0; transform: translateY(0.32em); filter: blur(8px); color: var(--hero-accent); }
  55% { opacity: 1; filter: blur(0); color: var(--hero-accent); }
  100% { opacity: 1; transform: none; filter: none; color: var(--hero-ink); }
}

/* Aparición al entrar en pantalla */
.anim .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0ms);
}
.anim .reveal.is-in { opacity: 1; transform: none; }

/* Pulso que recorre el separador de cada sección, como una señal por una pista */
.section > .wrap { position: relative; }
.anim .section + .section:not(.section-train):not(.section-train + .section) > .wrap::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 220px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 14px var(--accent);
  opacity: 0;
  pointer-events: none;
}
.anim .section.is-live + .section.is-live:not(.section-train):not(.section-train + .section) > .wrap::before,
.anim .section + .section.is-live:not(.section-train):not(.section-train + .section) > .wrap::before {
  animation: trace 1.9s cubic-bezier(0.45, 0, 0.2, 1) 0.15s both;
}
@keyframes trace {
  0% { left: 0; transform: translateX(-100%); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; transform: translateX(-100%); opacity: 0; }
}

/* Barras de rendimiento que crecen a escala */
.anim .bar i { transition: width 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
.anim tbody tr:nth-child(2) .bar i { transition-delay: 0.35s; }
.anim tbody tr:nth-child(3) .bar i { transition-delay: 0.5s; }
.anim .section:not(.is-live) .bar i { width: 0; }

/* Tarjetas con inclinación 3D y brillo que sigue al ratón */
.tilt { position: relative; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); transform-style: preserve-3d; }
.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
}
.tilt-data::after {
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--data) 18%, transparent), transparent 70%);
}
.tilt-embed::after {
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--embed) 18%, transparent), transparent 70%);
}
.anim .tilt:hover::after { opacity: 1; }

/* Cursor de terminal en los bloques de código */
.cursor { display: inline-block; width: 0.55em; height: 1.15em; margin-left: 3px; vertical-align: -0.22em; background: var(--hero-accent); }
.anim .cursor { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Logo de la cabecera: al cargar, el chip se enciende y las patillas salen fila a fila;
   al pasar el ratón se inclina un poco y brilla */
.anim .wordmark .die { animation: chip-on 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.anim .wordmark .pin { animation: pin-on 0.45s ease-out both; animation-delay: calc(0.35s + var(--i) * 0.1s); }
.wordmark .pin-l { --dx: 4px; }
.wordmark .pin-r { --dx: -4px; }
@keyframes chip-on { from { opacity: 0; transform: scale(0.8); } }
@keyframes pin-on { from { opacity: 0; transform: translateX(var(--dx)); } }
.anim .wordmark .logo-mark { transition: transform 0.25s ease, filter 0.25s ease; }
.anim .wordmark:hover .logo-mark { transform: translateY(-1px) rotate(-5deg); filter: drop-shadow(0 0 7px rgba(76, 197, 148, 0.55)); }

/* Dentro del chip: la línea del pipeline se llena y los pasos se encienden uno a uno */
.anim .pipeline::after { transform: scaleX(0); transition: transform 2.2s cubic-bezier(0.3, 0.7, 0.2, 1); }
.anim .pipeline-wrap.is-live .pipeline::after { transform: scaleX(1); }
.anim .pipeline li { opacity: 0.25; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: calc(var(--i) * 0.4s); }
.anim .pipeline-wrap.is-live .pipeline li { opacity: 1; transform: none; }
.anim .pl-n { transition: background-color 0.4s, color 0.4s; transition-delay: calc(var(--i) * 0.4s + 0.25s); }
.anim .pipeline-wrap.is-live .pl-n { background: var(--fam); color: var(--accent-ink); }

/* Vapor de la taza de Buy me a coffee; al pasar el ratón la taza se inclina y el vapor sube más rápido */
.anim .btn-coffee .steam { animation: steam 2.6s ease-in-out infinite; }
.anim .btn-coffee .steam-2 { animation-delay: -1.3s; }
.anim .btn-coffee .cup { transition: transform 0.25s ease; }
.anim .btn-coffee:not(.is-pending):hover .cup { transform: rotate(-8deg) translateY(-1px); }
.anim .btn-coffee:not(.is-pending):hover .steam { animation-duration: 1.2s; }
@keyframes steam {
  0%, 100% { opacity: 0.25; transform: translateY(1.5px) scaleY(0.85); }
  50% { opacity: 1; transform: translateY(-1.5px) scaleY(1.05); }
}

/* Animación de Train your own */
.fusion-wrap { margin: 0 0 48px; }
#fusion { display: block; width: 100%; height: 250px; }
.fusion-wrap figcaption { margin-top: 12px; font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- Adaptación ---------- */
@media (max-width: 1100px) {
  .integrate { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 1100px) {
  .nav ul { display: none; }
}
@media (max-width: 900px) {
  .hero::after {
    background: linear-gradient(180deg, rgba(10, 15, 13, 0.1) 0%, rgba(10, 15, 13, 0.35) 30%, rgba(10, 15, 13, 0.9) 52%, rgba(10, 15, 13, 0.97) 100%);
  }
  .hero-body .wrap { padding-block: 260px 56px; }
  .hero-caption { position: static; margin-top: 40px; }
  .family-head, .train, .perf, .collab { grid-template-columns: minmax(0, 1fr); }
  .collab-repos { grid-row: auto; }
  .variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paper { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .paper-cover { width: min(250px, 70%); }
  .paper-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paper-figs li:nth-child(3) { padding-left: 0; border-left: 0; }
  .paper-figs li:nth-child(n+3) { margin-top: 14px; border-top: 1px solid var(--rule); }
}
@media (max-width: 760px) {
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig:nth-child(3) { border-left: 0; padding-left: 0; }
  .fig:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .benefits, .data-focus { grid-template-columns: minmax(0, 1fr); }
  .section .wrap { padding-block: 60px; }
  .lead { font-size: 17px; }
}
@media (max-width: 600px) {
  .chip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .package { grid-column: 1 / -1; order: -1; justify-self: center; width: 100%; max-width: 260px; }
  .pins-left li { justify-content: flex-start; }
  .pins-left li::after, .pins-right li::before { display: none; }
  .pins li { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  th, td { padding-inline: 7px; }
  .bar-cell { min-width: 120px; }
}
@media (max-width: 480px) {
  .variants { grid-template-columns: minmax(0, 1fr); }
  .hero-news { font-size: 12px; }
  .paper-toc ol { columns: 1; }
  .paper-dl .btn { width: 100%; }
  .wordmark { font-size: 16px; }
  .nav { gap: 10px; }
  .lang button { min-width: 36px; padding: 0 8px; }
  #fusion { height: 210px; }
}
/* Cabecera estrecha: el icono de Hugging Face sale de la cabecera (sigue en la franja y en el pie)
   y el botón se compacta. */
@media (max-width: 560px) {
  .hf-icon { display: none; }
  .site-header .btn { padding: 0 10px; font-size: 13.5px; }
}
/* En móvil el logo se queda solo con el chip. */
@media (max-width: 440px) {
  .wordmark-text { display: none; }
  .wordmark .logo-mark { width: 40px; height: 32px; }
}
/* Dentro del chip: una columna y pipeline en vertical */
@media (max-width: 980px) {
  .inside { grid-template-columns: minmax(0, 1fr); }
  .inside-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .inside-specs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pipeline::before, .pipeline::after { left: 16px; right: auto; top: 16px; bottom: 16px; width: 2px; height: auto; }
  .pipeline::after { background: linear-gradient(var(--fam), var(--data)); transform-origin: center top; }
  .anim .pipeline::after { transform: scaleY(0); }
  .anim .pipeline-wrap.is-live .pipeline::after { transform: scaleY(1); }
  .pipeline li { padding: 6px 0 0 54px; }
}
@media (max-width: 600px) {
  .stack-scene { height: 570px; }
  .stack { top: 65%; transform: scale3d(0.72, 0.72, 0.72) rotateX(57deg) rotateZ(-36deg); }
  .chip-in { bottom: 84px; }
  .inside-specs, .inside-specs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip-near { top: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pins li::after, .pins li::before, .pkg-led::before { animation: none; }
}