/* InnDiTec — página de demos (/demos/). Mismo lenguaje visual que innditec.com. */
:root {
  --page: #04060F; --chrome: #0A0F1E; --chrome-2: #101830; --line: #1E2742; --line-2: #2E3A5E;
  --ink: #E8ECF5; --mute: #9AA6BE; --cyan: #00D4D4; --cyan-ink: #031418; --wa: #1F8A55;
  --f-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink); font-family: var(--f-ui); font-size: 16px; line-height: 1.55;
  background-image: radial-gradient(1100px 520px at 85% -10%, rgba(0,212,212,.10), transparent 60%),
                    radial-gradient(900px 480px at -10% 10%, rgba(37,99,201,.10), transparent 60%);
  background-repeat: no-repeat;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
img { display: block; max-width: 100%; height: auto; }

.hb-top, .hb, .hb-foot { max-width: 1180px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.hb-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.hb-mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.hb-mark b { color: var(--cyan); font-weight: 700; }
.hb-nav { display: flex; align-items: center; gap: 18px; }
.hb-nav > a:not(.hb-btn) { color: var(--mute); text-decoration: none; font-size: 15px; font-weight: 500; }
.hb-nav > a:not(.hb-btn):hover { color: var(--ink); }

.hb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 14px; border-radius: 10px; padding: 10px 16px; white-space: nowrap; transition: filter .15s, border-color .15s; }
.hb-btn:hover { filter: brightness(1.1); }
.hb-btn-wa { background: var(--wa); color: #fff; }
.hb-btn-ghost { border: 1px solid var(--line-2); color: var(--ink); }
.hb-btn-ghost:hover { border-color: var(--cyan); }
.hb-btn-lg { padding: 14px 22px; font-size: 15.5px; }

.hb-hero { padding-block: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 40px); max-width: 820px; }
.hb-eyebrow, .hb-kicker { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.hb-hero h1 { margin: 14px 0 0; font-size: clamp(34px, 1.6rem + 3vw, 60px); line-height: 1.04; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.hb-hero h1 em, .hb-final h2 em { font-family: var(--f-display); font-style: italic; font-weight: 400; color: var(--cyan); letter-spacing: -.01em; }
.hb-lede { margin: 18px 0 0; color: var(--mute); font-size: clamp(16px, 1rem + .3vw, 19px); max-width: 60ch; }
.hb-steps { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hb-steps li { display: flex; align-items: center; gap: 10px; background: var(--chrome); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px 7px 7px; font-size: 14.5px; font-weight: 500; }
.hb-steps b { width: 28px; height: 28px; border-radius: 50%; background: var(--cyan); color: var(--cyan-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; }

.hb-group { padding-block: clamp(26px, 3vw, 44px); border-top: 1px solid var(--line); }
.hb-group-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 28px; margin-bottom: 22px; }
.hb-group-head > div { max-width: 640px; }
.hb-group-head h2 { margin: 8px 0 0; font-size: clamp(24px, 1.2rem + 1.4vw, 34px); letter-spacing: -.02em; line-height: 1.15; }
.hb-group-head p:not(.hb-kicker) { margin: 8px 0 0; color: var(--mute); }
.hb-more { display: inline-flex; align-items: center; gap: 6px; color: var(--cyan); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hb-more:hover { text-decoration: underline; text-underline-offset: 3px; }

.hb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.hb-card { --c: var(--cyan); display: flex; flex-direction: column; text-decoration: none; background: var(--chrome); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.hb-card:hover, .hb-card:focus-visible { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 0 1px var(--c); }
.hb-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0E0E0E; border-bottom: 1px solid var(--line); }
.hb-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .4s ease; }
.hb-card:hover .hb-card-media img { transform: scale(1.03); }
.hb-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.hb-card-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.hb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.hb-card strong { font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; }
.hb-card-emp { font-size: 13.5px; color: var(--mute); }
.hb-card-go { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--cyan); font-weight: 700; font-size: 14.5px; }
.hb-card:hover .hb-card-go svg { transform: translateX(3px); }
.hb-card-go svg { transition: transform .2s ease; }

.hb-final { margin: clamp(20px, 3vw, 40px) 0 0; padding: clamp(26px, 4vw, 48px); border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(135deg, rgba(0,212,212,.10), rgba(16,24,48,.6) 55%); text-align: center; }
.hb-final h2 { margin: 0; font-size: clamp(24px, 1.2rem + 1.4vw, 34px); letter-spacing: -.02em; }
.hb-final > p { margin: 12px auto 0; color: var(--mute); max-width: 58ch; }
.hb-final-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.hb-facts { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; color: var(--mute); font-size: 14px; }
.hb-facts li::before { content: "✓"; color: var(--cyan); font-weight: 700; margin-right: 7px; }

.hb-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-block: 34px 40px; color: var(--mute); font-size: 13.5px; }
.hb-foot a { color: var(--mute); text-underline-offset: 2px; }
.hb-foot a:hover { color: var(--ink); }

@media (max-width: 560px) {
  .hb-nav > a:not(.hb-btn) { display: none; }
  .hb-nav .hb-btn span { display: none; }
  .hb-nav .hb-btn { padding: 10px; }
  .hb-steps li { width: 100%; }
  .hb-final-acts .hb-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-card, .hb-card-media img, .hb-card-go svg { transition: none; }
  .hb-card:hover { transform: none; }
}
.hb-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }