/* ───────────────────────────────────────────────────────────
   PETBOND Design System — multinational B2B
   ─────────────────────────────────────────────────────────── */

:root {
  /* Brand colors (preserved IP) */
  --brand-blue: #2D43E0;
  --brand-blue-deep: #1B2DAA;
  --brand-navy: #0E1438;
  --brand-orange: #F58A4A;
  --brand-cyan: #3FA9BE;

  /* Surfaces — warm paper feel */
  --bg: #F7F6F2;
  --bg-elevated: #FFFFFF;
  --bg-quiet: #EFECE3;
  --bg-deep: #0E1438;
  --bg-deep-elevated: #161E4A;

  /* Text */
  --ink: #0E1438;
  --ink-soft: #3B4163;
  --ink-mute: #5C6178;
  --ink-faint: #9CA0B5;
  --ink-on-deep: #F7F6F2;
  --ink-on-deep-mute: #9DA4C8;

  /* Lines */
  --line: #E0DBCE;
  --line-strong: #C7C0AC;
  --line-deep: #2B3267;

  /* Status */
  --positive: #1C7A4E;
  --warn: #B85A1A;

  /* Type */
  --font-display: 'Newsreader', 'Times New Roman', serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Density */
  --section-py-1: clamp(64px, 8vw, 120px);
  --section-py-2: clamp(48px, 6vw, 88px);

  /* Radii */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Shadows — soft & restrained */
  --sh-1: 0 1px 2px rgba(14,20,56,.04), 0 0 0 1px rgba(14,20,56,.05);
  --sh-2: 0 4px 12px rgba(14,20,56,.06), 0 0 0 1px rgba(14,20,56,.05);
  --sh-3: 0 24px 48px -16px rgba(14,20,56,.18), 0 0 0 1px rgba(14,20,56,.06);
}

/* dark variants applied via [data-theme="dark"] */
[data-theme="dark"] {
  --bg: #0A0E29;
  --bg-elevated: #131838;
  --bg-quiet: #161E4A;
  --bg-deep: #050818;
  --bg-deep-elevated: #0A0E29;
  --ink: #F2EFE6;
  --ink-soft: #C3C8DC;
  --ink-mute: #8E94B0;
  --ink-faint: #5E6483;
  --line: #232A55;
  --line-strong: #364081;
  --line-deep: #1A2050;
}

/* ───── Base ───── */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: 'cv02','cv03','cv04','cv11','ss01';
  font-size: 16px;
}
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
img { user-select: none; -webkit-user-drag: none; }

::selection { background: var(--brand-blue); color: white; }

/* ───── Type primitives ───── */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: .98;
  text-wrap: balance;
  /* Safety: break long words instead of overflowing the container on narrow viewports */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.display em, .display i { font-style: italic; font-weight: 500; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-faint);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(36px, 5vw, 64px);
}
.section-title em, .section-title i { font-style: italic; }

.lead {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.body { color: var(--ink-soft); line-height: 1.6; }
.small { font-size: 13px; color: var(--ink-mute); line-height: 1.55; }
.mono { font-family: var(--font-mono); letter-spacing: -.01em; }

/* ───── Layout ───── */
.container-x {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
}
.section { padding-top: var(--section-py-1); padding-bottom: var(--section-py-1); position: relative; }
.section--tight { padding-top: var(--section-py-2); padding-bottom: var(--section-py-2); }

[data-density="compact"] {
  --section-py-1: clamp(48px, 5vw, 80px);
  --section-py-2: clamp(32px, 4vw, 60px);
}
[data-density="airy"] {
  --section-py-1: clamp(96px, 10vw, 180px);
  --section-py-2: clamp(64px, 7vw, 120px);
}

/* ───── Buttons ───── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .02em;
  border-radius: 999px;
  transition: all .25s cubic-bezier(.2,.7,.2,1);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
}
.btn--sm { padding: 10px 18px; font-size: 13px; }
.btn--lg { padding: 16px 28px; font-size: 15px; }

.btn--primary {
  background: var(--brand-navy);
  color: var(--ink-on-deep);
  border-color: var(--brand-navy);
}
.btn--primary:hover { background: var(--brand-blue); border-color: var(--brand-blue); transform: translateY(-1px); }

.btn--accent {
  background: var(--brand-orange);
  color: var(--ink); /* navy: contraste 6.7:1 no laranja (era white=2.43, falha grave). Mantém a marca laranja. */
  border-color: var(--brand-orange);
}
.btn--accent:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(245,138,74,.6); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.btn--ghost-light {
  background: transparent;
  color: var(--ink-on-deep);
  border-color: rgba(255,255,255,.25);
}
.btn--ghost-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }

.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ───── Surface cards ───── */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: all .3s ease;
}
.card:hover { border-color: var(--line-strong); }
.card-quiet {
  background: var(--bg-quiet);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* ───── Underline link ───── */
.uline {
  position: relative;
  display: inline-block;
  padding-bottom: 1px;
}
.uline::after {
  content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 1px;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform .35s cubic-bezier(.65,.05,.3,1);
}
.uline:hover::after { transform-origin: left; transform: scaleX(0); animation: ulineRe .35s .35s forwards cubic-bezier(.65,.05,.3,1); }
@keyframes ulineRe { to { transform: scaleX(1); } }

/* ───── Reveal animation ───── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 300ms; }

/* ───── Marquee ───── */
@keyframes marqL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { display: flex; gap: 64px; animation: marqL 40s linear infinite; will-change: transform; }
.marquee--slow { animation-duration: 70s; }

/* ───── Header ───── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.nav-link {
  font-size: 14px; color: var(--ink-soft); padding: 8px 4px; position: relative;
  font-weight: 500; letter-spacing: -.005em; cursor: pointer; transition: color .2s;
}
.nav-link:hover { color: var(--ink); }
.nav-link[data-active] { color: var(--ink); }
.nav-link[data-active]::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: -4px; height: 1px; background: var(--brand-orange); }

.lang-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
  transition: all .2s;
}
.lang-pill:hover { color: var(--ink); border-color: var(--ink); }

/* ───── Hero rule ───── */
.hr-line {
  height: 1px; background: var(--line);
  position: relative; overflow: hidden;
}
.hr-line::after {
  content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 30%;
  background: linear-gradient(90deg, transparent, var(--brand-orange), transparent);
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }

/* ───── Product card chip ───── */
.chip-multi {
  display: inline-flex; align-items: center; gap: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 14px; letter-spacing: -.01em;
}
.chip-multi__pet { color: var(--brand-blue); background: transparent; padding: 4px 0 4px 10px; }
.chip-multi__std { color: white; background: var(--brand-blue); padding: 4px 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.chip-multi__multi { color: var(--brand-navy); background: var(--brand-cyan); padding: 4px 10px; }
.chip-multi__gransorb { color: var(--brand-orange); background: var(--brand-navy); padding: 4px 10px; }

/* ───── Tables ───── */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl thead th {
  text-align: left; font-weight: 500; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
}
.tbl tbody td { padding: 18px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-soft); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr.highlight { background: color-mix(in srgb, var(--brand-blue) 5%, transparent); }
.tbl tbody tr.highlight td { color: var(--ink); }
.tbl tbody tr.highlight td:first-child { position: relative; }
.tbl tbody tr.highlight td:first-child::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px;
  background: var(--brand-orange);
}

/* ───── Bar chart ───── */
.bar-row { display: grid; grid-template-columns: 110px 1fr 90px; align-items: center; gap: 14px; padding: 10px 0; }
.bar-track { height: 28px; background: var(--bg-quiet); border-radius: var(--r-sm); overflow: hidden; position: relative; }
.bar-fill {
  height: 100%; background: var(--ink-faint); border-radius: var(--r-sm);
  transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  position: relative;
  z-index: 1;
}
/* Ghost bar — full-width baseline marker on each row, scaled to the CONTROL's
   value so every row shows where the comparison started. The gap between the
   bar fill and the ghost extent reads as the deviation from baseline. */
.bar-ghost {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: var(--line-strong); opacity: .25;
  border-radius: var(--r-sm);
  transform-origin: left; transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.in .bar-ghost { transform: scaleX(var(--ghost-w, 0)); }
/* Hide ghost on the control row itself — ghost == fill there, redundant */
.bar-row.is-control .bar-ghost { display: none; }
.surface-deep .bar-ghost { background: rgba(255,255,255,.14); opacity: 1; }
.bar-row.is-control .bar-fill { background: var(--line-strong); }
.bar-row.is-yucca .bar-fill { background: var(--ink-soft); }
.bar-row.is-petbond .bar-fill { background: var(--brand-blue); }
.bar-row.is-petbond .bar-fill::after {
  content: ''; position: absolute; right: -1px; top: 0; bottom: 0; width: 2px; background: var(--brand-orange);
}
.in .bar-fill { transform: scaleX(var(--w, 1)); }

/* ───── Accordion ───── */
.accordion-item {
  border-bottom: 1px solid var(--line);
}
.accordion-trigger {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0;
  font-size: 17px; font-weight: 500; color: var(--ink);
  cursor: pointer; background: none; border: none;
  font-family: var(--font-sans); letter-spacing: -.01em;
}
.accordion-trigger:hover { color: var(--brand-blue); }
.accordion-icon { width: 24px; height: 24px; flex-shrink: 0; position: relative; }
.accordion-icon::before, .accordion-icon::after {
  content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px;
  background: currentColor; transition: transform .3s ease;
}
.accordion-icon::after { transform: rotate(90deg); }
.accordion-item[data-open="true"] .accordion-icon::after { transform: rotate(0); }
.accordion-content {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.2,.7,.2,1);
}
.accordion-item[data-open="true"] .accordion-content { grid-template-rows: 1fr; }
.accordion-content > div { overflow: hidden; min-height: 0; padding: 0 0 24px 0; color: var(--ink-soft); line-height: 1.65; max-width: 70ch; }

/* ───── Mobile-only disclosure (dosagem / referências) ─────
   Desktop: painel sempre visível, trigger oculto (.show-mobile).
   Mobile: trigger aparece; painel colapsa via display:none — permanece no DOM
   renderizado (Google indexa conteúdo atrás de toggle) e tira seus links do
   tab/leitor de tela quando fechado. */
.mcollapse__trigger {
  width: 100%; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 20px; padding: 16px 0;
  border: none; border-top: 1px solid var(--line); background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--ink);
}
.mcollapse__trigger:hover { color: var(--brand-blue); }
.mcollapse[data-open="true"] .mcollapse__trigger .accordion-icon::after { transform: rotate(0); }

/* ───── Form ───── */
.form-field {
  position: relative;
}
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  transition: all .2s;
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 15%, transparent);
}
/* Foco de teclado visível em elementos interativos (antes só inputs tinham anel). */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: 3px;
}
.form-label {
  display: block; font-size: 12px; font-weight: 500; color: var(--ink-mute);
  margin-bottom: 6px; letter-spacing: .04em;
  font-family: var(--font-mono); text-transform: uppercase;
}
.form-textarea { min-height: 120px; resize: vertical; font-family: var(--font-sans); }

/* ───── Hero specifics ───── */
.hero-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence baseFrequency='0.9' /></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: .035;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Subtle pulsing glow behind the hero PETBOND logo */
.hero-logo-glow::before {
  content: '';
  position: absolute;
  inset: -18% -8%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--brand-orange) 55%, transparent) 0%,
    color-mix(in srgb, var(--brand-orange) 18%, transparent) 35%,
    transparent 70%);
  filter: blur(28px);
  opacity: .55;
  z-index: 0;
  pointer-events: none;
  animation: hero-logo-pulse 4.2s ease-in-out infinite;
}
@keyframes hero-logo-pulse {
  0%, 100% { opacity: .35; transform: scale(.96); }
  50%      { opacity: .7;  transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo-glow::before { animation: none; opacity: .5; }
  .accordion-content { transition: none; }
  .accordion-icon::before, .accordion-icon::after { transition: none; }
}

.divider-label {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-mute);
}
.divider-label::before, .divider-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ───── Dark surface util ───── */
.surface-deep {
  background: var(--brand-navy);
  color: var(--ink-on-deep);
}
.surface-deep .small { color: var(--ink-on-deep-mute); }
.surface-deep .body { color: var(--ink-on-deep-mute); }
.surface-deep .lead { color: var(--ink-on-deep-mute); }
.surface-deep .eyebrow { color: var(--brand-orange); }
.surface-deep .section-title { color: var(--ink-on-deep); }
.surface-deep .tbl thead th { color: var(--ink-on-deep-mute); border-color: var(--line-deep); }
.surface-deep .tbl tbody td { color: var(--ink-on-deep-mute); border-color: var(--line-deep); }
.surface-deep .tbl tbody tr.highlight td { color: var(--ink-on-deep); }
.surface-deep .tbl tbody tr.highlight { background: rgba(63,169,190,.06); }
.surface-deep .card { background: var(--bg-deep-elevated); border-color: var(--line-deep); color: var(--ink-on-deep); }
.surface-deep .accordion-trigger { color: var(--ink-on-deep); }
.surface-deep .accordion-item { border-color: var(--line-deep); }
.surface-deep .bar-track { background: var(--bg-deep-elevated); }
.surface-deep .bar-row.is-control .bar-fill { background: var(--line-deep); }
.surface-deep .bar-row.is-yucca .bar-fill { background: var(--ink-on-deep-mute); }
.surface-deep .bar-row.is-petbond .bar-fill { background: var(--brand-cyan); }

/* ───── Util ───── */
.diag-bg {
  background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, color-mix(in srgb, var(--ink) 4%, transparent) 6px, color-mix(in srgb, var(--ink) 4%, transparent) 7px);
}

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-orange); }

.kbd {
  font-family: var(--font-mono); font-size: 11px; padding: 2px 6px;
  background: var(--bg-quiet); border: 1px solid var(--line);
  border-radius: var(--r-xs); color: var(--ink-soft);
}

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-xs);
  background: var(--bg-quiet); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.tag--brand { background: color-mix(in srgb, var(--brand-blue) 8%, transparent); color: var(--brand-blue); border-color: color-mix(in srgb, var(--brand-blue) 20%, transparent); }
.tag--accent { background: color-mix(in srgb, var(--brand-orange) 12%, transparent); color: var(--brand-orange); border-color: color-mix(in srgb, var(--brand-orange) 30%, transparent); }
.tag--positive { background: color-mix(in srgb, var(--positive) 10%, transparent); color: var(--positive); border-color: color-mix(in srgb, var(--positive) 25%, transparent); }

/* Hero photo focal point — desktop mostra a cena larga; mobile reenquadra no sujeito (cão+gato). */
.hero-photo { object-position: 72% 52%; }

/* responsive util */
.show-mobile { display: none; }
@media (max-width: 768px) {
  /* Ritmo vertical comprimido no mobile (~30% menos espaço entre seções)
     sem esconder conteúdo — ataca a sensação de "página comprida" na raiz. */
  :root {
    --section-py-1: clamp(40px, 11vw, 72px);
    --section-py-2: clamp(28px, 8vw, 52px);
  }
  .site-header__bar { grid-template-columns: 1fr auto; }
  .hide-mobile { display: none !important; }
  .show-mobile { display: inline-flex !important; }
  /* disclosure mobile-only: painel fechado some (fica no DOM p/ SEO) */
  .mcollapse[data-open="false"] .mcollapse__panel { display: none; }
  /* hero reenquadrado no cão+gato — a janela alta do mobile mostra só ~18% da largura. */
  .hero-photo { object-position: 59% 47%; }
  /* footer de dosagem: empilhar título e botão (senão o título quebra 1 palavra/linha) */
  .species-foot { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* tweaks panel — make sure it stacks above everything */
[data-tweaks-panel] { z-index: 100; }

/* ── LazyFrame loading overlay (JSmol/embeds pesados) ─────────────────────────
   Cobre o "vão oco" entre o iframe montar e o 3D renderizar. O resto da página
   já carrega antes (IntersectionObserver) e o iframe roda isolado — isto é só a
   sensação visual de espera DESTE bloco. Some quando o iframe avisa 'frame-ready'. */
.lf-shell { position: relative; overflow: hidden; }
.lf-overlay {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  background: #E8EEF8;                 /* mesmo tom do iframe → troca sem flash */
  transition: opacity .45s ease;
}
.lf-overlay.is-hiding { opacity: 0; pointer-events: none; }
.lf-overlay__inner { display: grid; justify-items: center; gap: 12px; }
.lf-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(14,20,56,.14); border-top-color: rgba(14,20,56,.55);
  animation: lf-spin .8s linear infinite;
}
.lf-overlay__label { font: 12px var(--font-mono, 'JetBrains Mono'), monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(14,20,56,.5); }
/* Legenda discreta "imagem ilustrativa" no canto inferior-direito da janela do JSmol.
   z-index 2 = acima do iframe, abaixo do overlay de loading (z 4) → só aparece com o 3D pronto. */
.lf-caption {
  position: absolute; bottom: 7px; right: 10px; z-index: 2;
  font: 9px var(--font-mono, 'JetBrains Mono'), monospace;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(14,20,56,.34); pointer-events: none; user-select: none;
}
@keyframes lf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lf-spinner { animation: none; border-top-color: rgba(14,20,56,.3); }
  .lf-overlay { transition: none; }
}