/* Basetis Formaciones — landing + dashboards.
   Adopta la identidad visual de www.basetis.com:
   - Tipografía: Space Grotesk (display) + Inter (body) + JetBrains Mono (eyebrow).
   - Paleta: blanco / negro / violeta brand #9839FF.
   - Tono editorial sobrio con detalles tipo "code/console" en mono. */

:root {
  --bt-bg: #ffffff;
  --bt-ink: #111111;
  --bt-ink-soft: #2a2a2a;
  --bt-muted: #6b6b6b;
  --bt-line: #e8e8e8;
  --bt-surface: #f6f4f0;
  --bt-surface-2: #efede7;
  --bt-accent: #9839ff;
  --bt-accent-soft: #f1e5ff;
  --bt-accent-strong: #6b1ab8;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bt-bg); }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--bt-ink);
  background: var(--bt-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sticky footer pattern: when the page is shorter than the viewport
     (small dashboards, denied page) the footer is pushed to the bottom
     by `margin-top: auto` below. Otherwise it sits at the natural end
     of the flow. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.bt-foot { margin-top: auto; }

/* ---------- Route loader overlay ---------- */
/* Shown when the user clicks a same-origin link, hidden when the next
   page replaces it. The deck behind /method/claude/ is heavy (Reveal.js,
   GSAP, Lottie); without this the user sees a frozen page for 300-700 ms. */
.bt-route-loader {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
}
.bt-route-loader.is-active {
  display: flex;
  opacity: 1;
  pointer-events: all;
}
.bt-route-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(17, 17, 17, 0.10);
  border-top-color: var(--bt-accent);
  animation: bt-route-spin 0.7s linear infinite;
}
@keyframes bt-route-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bt-route-spinner { animation: none; border-top-color: var(--bt-accent); }
}
a { color: inherit; text-decoration: none; }

.display {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  text-wrap: balance;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bt-muted);
  font-weight: 500;
}

/* ---------- Header ----------
   Lavender soft tint so the sticky header stays visible against the white
   body and against the cream of the "Cómo trabajamos" section. The tint
   picks up the brand violet without becoming pastel. */
.bt-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #faf6ff;
  border-bottom: 1px solid var(--bt-line);
}
.bt-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.bt-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.bt-logo img {
  height: 26px;
  width: auto;
  display: block;
}
.bt-logo-divider {
  width: 1px;
  height: 22px;
  background: var(--bt-line);
}
.bt-logo-section {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bt-muted);
}
.bt-header-right {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.bt-lang {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  border: 1px solid var(--bt-line);
  border-radius: var(--r-pill);
  padding: 3px;
  font-family: 'JetBrains Mono', monospace;
}
.bt-lang button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--bt-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: background 0.15s ease, color 0.15s ease;
}
.bt-lang button:hover { color: var(--bt-ink); }
.bt-lang button.is-active { background: var(--bt-ink); color: #fff; }

.bt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}
.bt-btn:hover { transform: translateY(-1px); }
.bt-btn.primary { background: var(--bt-ink); color: #fff; }
.bt-btn.primary:hover { background: var(--bt-accent); }
.bt-btn.ghost { background: transparent; color: var(--bt-ink); border: 1px solid var(--bt-line); }
.bt-btn.ghost:hover { border-color: var(--bt-ink); }
.bt-btn.accent { background: var(--bt-accent); color: #fff; }
.bt-btn.accent:hover { background: var(--bt-ink); }

.bt-logout {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--bt-muted);
  text-transform: uppercase;
}
.bt-logout:hover { color: var(--bt-ink); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--bt-line);
}
.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 32px 100px;
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 64px;
  align-items: end;
}
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 56px 24px 72px; }
}
.hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-size: clamp(48px, 7vw, 96px);
  margin: 24px 0 0;
  text-wrap: balance;
}
.hero h1 .accent-dot {
  display: inline-block;
  width: 0.18em;
  height: 0.18em;
  border-radius: 50%;
  background: var(--bt-accent);
  vertical-align: baseline;
  margin-left: 0.04em;
  transform: translateY(0.04em);
}
.hero-sub {
  font-size: 19px;
  line-height: 1.5;
  color: var(--bt-ink-soft);
  max-width: 540px;
  margin: 32px 0 36px;
  text-wrap: pretty;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-left: 1px solid var(--bt-line);
  padding-left: 32px;
}
@media (max-width: 1080px) {
  .hero-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--bt-line); padding-top: 32px; }
}
.hero-side-block .num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 48px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--bt-ink);
}
.hero-side-block .lbl {
  color: var(--bt-muted);
  font-size: 13px;
  margin-top: 8px;
}

/* ---------- Tools strip (marquee) ---------- */
.tools-strip {
  background: var(--bt-ink);
  color: #fff;
  overflow: hidden;
  border-bottom: 1px solid var(--bt-ink);
}
.tools-track {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 22px 0;
  animation: bt-marquee 28s linear infinite;
  white-space: nowrap;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.tools-track .sep {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bt-accent);
  flex-shrink: 0;
}
@keyframes bt-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .tools-track { animation: none; }
}

/* ---------- Sections ---------- */
section.bt-section {
  padding: 96px 32px;
  border-bottom: 1px solid var(--bt-line);
}
section.bt-section.alt { background: var(--bt-surface); }
.bt-container { max-width: 1280px; margin: 0 auto; }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 48px;
  align-items: end;
}
@media (max-width: 880px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; }
}
.section-head h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(34px, 4.4vw, 56px);
  margin: 12px 0 0;
  text-wrap: balance;
}
.section-head p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--bt-ink-soft);
  margin: 0;
  max-width: 480px;
  text-wrap: pretty;
}

/* Tools section: violeta soft background with a decorative panel that
   contains the cards. The panel has a large radius and a subtle gradient
   that picks up the brand violet, in line with the layered, colourful
   sections of basetis.com. */
.bt-section-tools {
  background:
    radial-gradient(circle at 0% 0%, rgba(152, 57, 255, 0.10), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(255, 101, 108, 0.08), transparent 55%),
    var(--bt-surface);
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 880px) {
  .tools-grid { grid-template-columns: 1fr; }
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 36px 32px;
  border: 1px solid var(--bt-line);
  border-radius: var(--r-lg);
  background: #fff;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  z-index: 0;
}
.tool-card > * { position: relative; z-index: 1; }
.tool-card:hover {
  transform: translateY(-2px);
  border-color: var(--bt-ink);
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.06);
}

/* Per-tool tinted backgrounds (very subtle, picks up the brand colour). */
.tool-card-claude::before {
  background: linear-gradient(180deg, rgba(217, 119, 87, 0.08), transparent 70%);
}
.tool-card-gemini::before {
  background: linear-gradient(180deg, rgba(67, 157, 223, 0.10), rgba(152, 57, 255, 0.04) 70%, transparent);
}

.tool-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bt-line);
}
.tool-card-logo {
  height: 32px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.tool-card-vendor {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bt-muted);
}
.tool-card p {
  color: var(--bt-ink-soft);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}
.tool-card-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tool-card-pills li {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--bt-surface-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--bt-ink-soft);
  letter-spacing: 0.04em;
  transition: background 0.15s ease, color 0.15s ease;
}
.tool-card:hover .tool-card-pills li {
  background: #fff;
  color: var(--bt-ink);
  box-shadow: 0 0 0 1px var(--bt-line);
}

/* Contact CTA */
.contact {
  background: var(--bt-accent);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: start;
  position: relative;
  overflow: hidden;
}
@media (max-width: 880px) {
  .contact { grid-template-columns: 1fr; padding: 40px 28px; gap: 28px; }
}
.contact h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4.5vw, 56px);
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0 0 16px;
  text-wrap: balance;
}
.contact p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  max-width: 480px;
}
.contact-card {
  background: #fff;
  color: var(--bt-ink);
  border-radius: var(--r-md);
  padding: 26px;
}
.contact-card .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--bt-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contact-card .mail {
  display: block;
  margin-top: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  word-break: break-all;
}
.contact-card .mail:hover { color: var(--bt-accent); }

/* ---------- Contact form ---------- */
.contact-form {
  background: #fff;
  color: var(--bt-ink);
  border-radius: var(--r-md);
  padding: 28px 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-form-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bt-accent);
  margin: 0 0 4px;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bt-ink-soft);
}
.contact-form label > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bt-muted);
}
.contact-form label > span small {
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  color: var(--bt-muted);
  opacity: 0.85;
}
.contact-form input,
.contact-form textarea {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--bt-ink);
  background: var(--bt-surface);
  border: 1px solid var(--bt-line);
  border-radius: 8px;
  padding: 11px 14px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--bt-accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(152, 57, 255, 0.18);
}
.contact-form textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.55;
}
.contact-form .is-invalid input,
.contact-form .is-invalid textarea {
  border-color: #c53030;
  background: #fff5f5;
}
.contact-form-message label { /* nothing — already inherits */ }
.contact-form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.contact-form-actions .bt-btn { padding: 12px 22px; }
.contact-form.is-loading .bt-btn { opacity: 0.7; cursor: progress; }
.contact-form-status {
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  margin: 0;
  flex: 1;
  min-width: 200px;
}
.contact-form-status.is-success { color: var(--bt-accent); }
.contact-form-status.is-error { color: #c53030; }
.contact-form-legal {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--bt-muted);
}

/* ---------- Footer ---------- */
.bt-foot {
  background: var(--bt-ink);
  color: rgba(255, 255, 255, 0.7);
  padding: 56px 32px 28px;
}
.bt-foot-inner { max-width: 1280px; margin: 0 auto; }
.bt-foot-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 880px) {
  .bt-foot-top { grid-template-columns: 1fr; gap: 24px; }
}
.bt-foot-top h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 14px;
  font-weight: 500;
}
.bt-foot-top a {
  color: rgba(255, 255, 255, 0.85);
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}
.bt-foot-top a:hover { color: var(--bt-accent); }
.bt-foot-brand img {
  height: 24px;
  filter: brightness(0) invert(1);
  margin-bottom: 14px;
}
.bt-foot-brand p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}
.bt-foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'JetBrains Mono', monospace;
}
.bt-foot-bottom .accent-dot { color: var(--bt-accent); }
@media (max-width: 880px) {
  .bt-foot-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ---------- Dashboard (clientes / method) ---------- */
.bt-dash-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 32px 80px;
}
.bt-dash-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bt-muted);
  margin: 0 0 12px;
}
.bt-dash-h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 16px;
  text-wrap: balance;
}
.bt-dash-sub {
  margin: 0 0 40px;
  color: var(--bt-ink-soft);
  font-size: 17px;
  max-width: 640px;
  line-height: 1.5;
}
.bt-dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--bt-ink);
}
.bt-dash-row {
  display: grid;
  grid-template-columns: 80px 1fr auto 56px;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--bt-line);
  cursor: pointer;
  transition: padding 0.2s ease, background 0.2s ease;
}
.bt-dash-row:hover {
  background: var(--bt-surface);
  padding-left: 12px;
  padding-right: 12px;
}
.bt-dash-row .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--bt-muted);
}
.bt-dash-row .ttl {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 4px;
}
.bt-dash-row .desc {
  color: var(--bt-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.bt-dash-row .meta {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bt-dash-row .pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  background: var(--bt-surface-2);
  color: var(--bt-ink-soft);
  letter-spacing: 0.04em;
}
.bt-dash-row .pill.accent { background: var(--bt-accent-soft); color: var(--bt-accent-strong); }
.bt-dash-row .arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--bt-line);
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
  justify-self: end;
  font-size: 18px;
  color: var(--bt-ink);
}
.bt-dash-row:hover .arrow {
  background: var(--bt-accent);
  border-color: var(--bt-accent);
  color: #fff;
  transform: rotate(-45deg);
}
@media (max-width: 720px) {
  .bt-dash-row { grid-template-columns: 1fr 56px; gap: 8px 16px; }
  .bt-dash-row .num,
  .bt-dash-row .meta { grid-column: 1; }
  .bt-dash-row .arrow { grid-row: 1 / span 4; align-self: start; }
}

.bt-dash-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--bt-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bt-dash-back:hover { color: var(--bt-ink); }

.bt-dash-row.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.bt-dash-row.is-locked:hover { background: transparent; padding-left: 0; padding-right: 0; }

/* ---------- Approach grid ---------- */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--bt-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
@media (max-width: 880px) {
  .approach-grid { grid-template-columns: 1fr; }
}
.approach-card {
  padding: 36px 32px;
  border-right: 1px solid var(--bt-line);
  position: relative;
  transition: background 0.2s ease;
}
.approach-card:hover { background: var(--bt-surface); }
.approach-illustration {
  display: block;
  width: 100%;
  height: auto;
  max-height: 124px;
  margin-bottom: 28px;
  /* Slight lift on card hover so the SVG feels alive without animating the
     paths individually. */
  transition: transform 0.25s ease;
}
.approach-card:hover .approach-illustration { transform: translateY(-2px); }
.approach-card:last-child { border-right: 0; }
@media (max-width: 880px) {
  .approach-card { border-right: 0; border-bottom: 1px solid var(--bt-line); }
  .approach-card:last-child { border-bottom: 0; }
}
.approach-card .step {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--bt-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.approach-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 14px 0 14px;
}
.approach-card p {
  color: var(--bt-ink-soft);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* ---------- Audience ---------- */
.audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
@media (max-width: 880px) {
  .audience { grid-template-columns: 1fr; gap: 32px; }
}
.checklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.check-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--bt-line);
  border-radius: var(--r-md);
  background: #fff;
  transition: border-color 0.2s ease;
}
.check-item:hover { border-color: var(--bt-ink); }
.check-item .check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bt-accent);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
}
.check-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bt-ink);
}
/* Audience section head: title + intro paragraph side-by-side. */
.section-head-audience {
  align-items: start;
}
.audience-intro {
  font-size: 17px;
  line-height: 1.5;
  color: var(--bt-ink-soft);
  margin: 0;
  max-width: 480px;
  text-wrap: pretty;
  /* Push the intro down so it visually aligns with the second line of
     the big H2. */
  padding-top: 12px;
}

/* Real-case aside (dark card with the violet bubble). */
.audience-case {
  position: relative;
  background: var(--bt-ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 36px 36px 36px;
  align-self: start;
  overflow: hidden;
  isolation: isolate;
}
.audience-case-bubble {
  position: absolute;
  top: -56px;
  right: -56px;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: var(--bt-accent);
  z-index: 0;
  pointer-events: none;
  box-shadow: 0 20px 80px rgba(152, 57, 255, 0.45);
}
.audience-case > * { position: relative; z-index: 1; }
.audience-case-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bt-accent);
  margin: 0 0 12px;
}
.audience-case h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 18px;
  text-wrap: balance;
}
.audience-case-body {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 22px;
}
.audience-case-sep {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 0 22px;
}

/* Reasons list inside the dark "Why now" card. Numbered, with the
   headline strong + the explanation in a softer tone. */
.audience-case-reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.audience-case-reasons li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.audience-case-reasons li:first-child {
  padding-top: 0;
  border-top: 0;
}
.audience-case-reasons .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--bt-accent);
  padding-top: 3px;
}
.audience-case-reasons p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  text-wrap: pretty;
}
.audience-case-reasons strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 6px;
}

/* Terminal — live-typewriter session.
   Sits below the audience grid, full-width, dark macOS-style chrome. */
.terminal {
  margin-top: 56px;
  background: var(--bt-ink);
  color: rgba(255, 255, 255, 0.92);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.18);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 320px;
}
.terminal-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.terminal-traffic {
  display: inline-flex;
  gap: 6px;
}
.terminal-traffic span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.terminal-traffic span:first-child { background: var(--bt-accent); }
.terminal-title {
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.terminal-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  color: var(--bt-accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.terminal-live .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bt-accent);
  box-shadow: 0 0 0 0 rgba(152, 57, 255, 0.6);
  animation: term-live-pulse 1.6s ease-out infinite;
}
@keyframes term-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(152, 57, 255, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(152, 57, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(152, 57, 255, 0); }
}
.terminal-body {
  padding: 26px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  line-height: 1.7;
  white-space: normal;
  min-height: 200px;
}
.term-line { display: block; }
.term-line + .term-line { margin-top: 10px; }
.term-prefix {
  color: var(--bt-accent);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.term-mark { font-weight: 600; }
.term-who { font-weight: 700; }
.term-text { color: rgba(255, 255, 255, 0.88); }
.term-cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: var(--bt-accent);
  vertical-align: text-bottom;
  margin-left: 4px;
  animation: term-blink 1s steps(2) infinite;
}
@keyframes term-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .terminal-live .live-dot { animation: none; }
  .term-cursor { animation: none; opacity: 1; }
}
.terminal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}

/* ---------- Footer (enriched) ---------- */
.bt-foot-top {
  grid-template-columns: 1.6fr 1fr 1fr;
}
.bt-foot-addr {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 18px;
}
.bt-foot-addr strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 6px;
}
.bt-foot-social {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bt-foot-social li { margin: 0; }
.bt-foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.bt-foot-social a:hover {
  color: #fff;
  background: var(--bt-accent);
  border-color: var(--bt-accent);
  transform: translateY(-1px);
}
.bt-foot-social svg {
  width: 18px;
  height: 18px;
  display: block;
}
.bt-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;
}

/* ---------- Sin acceso (denied) ---------- */
.bt-denied {
  background: var(--bt-surface);
  border-bottom: 1px solid var(--bt-line);
}
.bt-denied-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 96px 32px 120px;
}
.bt-denied-h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(40px, 5.5vw, 72px);
  margin: 16px 0 24px;
  text-wrap: balance;
}
.bt-denied-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--bt-ink-soft);
  max-width: 620px;
  margin: 0 0 48px;
}
.bt-denied-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 880px) {
  .bt-denied-cards { grid-template-columns: 1fr; }
}
.bt-denied-card {
  background: #fff;
  border: 1px solid var(--bt-line);
  border-radius: var(--r-lg);
  padding: 32px;
}
.bt-denied-card.alt {
  background: var(--bt-ink);
  color: #fff;
  border-color: var(--bt-ink);
}
.bt-denied-card .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bt-muted);
  display: block;
  margin-bottom: 10px;
}
.bt-denied-card.alt .lbl { color: rgba(255, 255, 255, 0.55); }
.bt-denied-card .mail {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  word-break: break-all;
}
.bt-denied-card .mail:hover { color: var(--bt-accent); }
.bt-denied-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--bt-ink-soft);
  margin: 0 0 18px;
}
.bt-denied-card.alt p { color: rgba(255, 255, 255, 0.78); }
.bt-denied-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.bt-denied-card.alt .bt-btn.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.bt-denied-card.alt .bt-btn.ghost:hover {
  background: #fff;
  color: var(--bt-ink);
  border-color: #fff;
}
.bt-denied-card.alt .bt-btn.primary {
  background: var(--bt-accent);
}
.bt-denied-card.alt .bt-btn.primary:hover {
  background: #fff;
  color: var(--bt-ink);
}

/* =========================================================================
   Mobile refinements
   The Reveal.js deck under /method/claude/ is intentionally desktop-only.
   Everything else (landing, dashboards, denied page) must read well on
   phones from 320 px upwards.
   ======================================================================== */

/* Tablet portrait + large phones */
@media (max-width: 720px) {
  body { font-size: 15px; }

  /* Header */
  .bt-header-inner {
    padding: 12px 16px;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .bt-logo img { height: 22px; }
  .bt-logo-divider,
  .bt-logo-section { display: none; }
  .bt-header-right { gap: 10px; }
  .bt-lang { padding: 2px; }
  .bt-lang button { padding: 4px 8px; font-size: 10px; }
  .bt-btn { padding: 9px 14px; font-size: 13px; gap: 6px; }

  /* Hero */
  .hero-inner {
    padding: 48px 20px 56px;
    gap: 32px;
  }
  .hero h1 {
    font-size: clamp(36px, 9vw, 52px);
    margin-top: 18px;
  }
  .hero-sub {
    font-size: 16px;
    margin: 22px 0 28px;
  }
  .hero-cta { gap: 10px; }
  .hero-cta .bt-btn { padding: 12px 18px; font-size: 14px; }
  .hero-side {
    border-top: 1px solid var(--bt-line);
    border-left: 0;
    padding: 24px 0 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px 32px;
  }
  .hero-side-block { flex: 1 1 calc(50% - 16px); min-width: 120px; }
  .hero-side-block .num { font-size: 32px; }
  .hero-side-block .lbl { font-size: 12px; margin-top: 4px; }

  /* Sections */
  section.bt-section { padding: 56px 20px; }
  .section-head {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 28px;
  }
  .section-head h2 { font-size: clamp(28px, 7vw, 38px); }
  .section-head p { font-size: 16px; }

  /* Tools cards */
  .tools-grid { gap: 16px; }
  .tool-card {
    padding: 24px 20px;
    gap: 18px;
    border-radius: var(--r-md);
  }
  .tool-card-head { gap: 12px; padding-bottom: 14px; }
  .tool-card-logo { height: 26px; }
  .tool-card-vendor { font-size: 10px; }
  .tool-card p { font-size: 15px; }
  .tool-card-pills { gap: 6px; }
  .tool-card-pills li { padding: 4px 9px; font-size: 10px; }

  /* Approach grid */
  .approach-card { padding: 28px 22px; }
  .approach-card h3 { font-size: 21px; margin-top: 12px; }
  .approach-card p { font-size: 14px; }
  .approach-illustration { max-height: 96px; margin-bottom: 22px; }

  /* Audience */
  .audience { gap: 28px; }
  .check-item { padding: 14px 16px; }
  .check-item p { font-size: 14px; }
  .section-head-audience { gap: 14px; }
  .audience-intro { padding-top: 0; font-size: 15px; }
  .audience-case { padding: 26px 22px; border-radius: var(--r-md); }
  .audience-case-bubble { width: 120px; height: 120px; top: -42px; right: -42px; }
  .audience-case h3 { font-size: 22px; margin-bottom: 22px; }
  .audience-case-body { font-size: 14px; }
  .audience-case-reasons { gap: 14px; }
  .audience-case-reasons li { grid-template-columns: 28px 1fr; gap: 10px; padding-top: 14px; }
  .audience-case-reasons strong { font-size: 15px; }
  .audience-case-reasons p { font-size: 13px; }

  /* Terminal */
  .terminal { margin-top: 36px; min-height: 300px; }
  .terminal-head { padding: 12px 14px; gap: 10px; font-size: 11px; }
  .terminal-title { font-size: 11px; }
  .terminal-body { padding: 22px 18px; font-size: 13px; line-height: 1.65; }
  .term-line + .term-line { margin-top: 8px; }
  .terminal-foot { padding: 12px 14px; font-size: 11px; }

  /* Contact */
  .contact {
    padding: 36px 24px;
    gap: 24px;
    border-radius: var(--r-md);
  }
  .contact h2 { font-size: clamp(28px, 7vw, 38px); margin-bottom: 12px; }
  .contact p { font-size: 15px; }
  .contact-card { padding: 22px; }
  .contact-card .mail { font-size: 18px; }
  .contact-form { padding: 22px 20px 18px; }
  .contact-form-row { grid-template-columns: 1fr; gap: 10px; }
  .contact-form-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .contact-form-actions .bt-btn { justify-content: center; }
  .contact-form-status { min-width: 0; text-align: center; }

  /* Footer */
  .bt-foot { padding: 40px 20px 20px; }
  .bt-foot-top {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 28px;
  }
  .bt-foot-brand img { height: 22px; }
  .bt-foot-brand p { font-size: 13px; }
  .bt-foot-addr { font-size: 12px; }
  .bt-foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    padding-top: 16px;
  }
  .bt-foot-social a { width: 36px; height: 36px; }
  .bt-foot-social svg { width: 16px; height: 16px; }

  /* Dashboard pages (clientes / method) */
  .bt-dash-main { padding: 40px 20px 64px; }
  .bt-dash-h1 { font-size: clamp(28px, 7vw, 38px); }
  .bt-dash-sub { font-size: 15px; margin-bottom: 28px; }
  .bt-dash-row {
    grid-template-columns: 48px 1fr 44px;
    gap: 12px 14px;
    padding: 18px 0;
  }
  .bt-dash-row:hover {
    padding-left: 8px;
    padding-right: 8px;
  }
  .bt-dash-row .num { grid-column: 1 / 2; grid-row: 1; align-self: start; }
  .bt-dash-row > div { grid-column: 2 / 3; grid-row: 1 / span 2; }
  .bt-dash-row .ttl { font-size: 19px; }
  .bt-dash-row .desc { font-size: 13px; }
  .bt-dash-row .meta {
    grid-column: 2 / 3;
    grid-row: 2;
    margin-top: 4px;
    gap: 6px;
  }
  .bt-dash-row .meta .pill { padding: 3px 8px; font-size: 10px; }
  .bt-dash-row .arrow {
    grid-column: 3 / 4;
    grid-row: 1 / span 2;
    width: 38px;
    height: 38px;
    font-size: 16px;
    align-self: center;
  }
  .bt-dash-back { margin-top: 28px; font-size: 12px; }

  /* Denied page */
  .bt-denied-inner { padding: 56px 20px 72px; }
  .bt-denied-h1 { font-size: clamp(30px, 8vw, 44px); margin: 12px 0 18px; }
  .bt-denied-sub { font-size: 16px; margin-bottom: 28px; }
  .bt-denied-cards { gap: 16px; }
  .bt-denied-card { padding: 24px 20px; border-radius: var(--r-md); }
  .bt-denied-card .mail { font-size: 18px; }
  .bt-denied-card p { font-size: 14px; }
  .bt-denied-actions { gap: 8px; }
  .bt-denied-actions .bt-btn { padding: 10px 14px; font-size: 13px; }
}

/* Small phones (iPhone SE / Android compact) */
@media (max-width: 480px) {
  /* Collapse the header CTA label so the button is just an arrow chip. */
  .bt-header .bt-btn.primary span:not([aria-hidden]) { display: none; }
  .bt-header .bt-btn.primary {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    gap: 0;
  }

  /* The CSS-class chain lets the secondary CTA (sin-acceso, dashboards header)
     keep its full label even on small phones because it uses .ghost. */

  .hero-inner { padding: 40px 18px 48px; }
  .hero h1 { font-size: clamp(34px, 10vw, 44px); letter-spacing: -0.025em; }
  .hero-cta { width: 100%; }
  .hero-cta .bt-btn { width: 100%; justify-content: center; }
  .hero-side-block { flex: 1 1 100%; }

  section.bt-section { padding: 44px 18px; }
  .tool-card { padding: 22px 18px; }
  .tool-card-pills li { font-size: 9px; letter-spacing: 0.06em; }
  .contact-card { padding: 20px; }
  .contact-card .mail { font-size: 16px; }
  .bt-foot { padding: 32px 18px 18px; }

  .bt-dash-main { padding: 32px 18px 48px; }
  .bt-dash-row { grid-template-columns: 1fr 36px; padding: 16px 0; }
  .bt-dash-row .num { grid-column: 1; grid-row: 1; }
  .bt-dash-row > div { grid-column: 1; grid-row: 2; }
  .bt-dash-row .meta { grid-column: 1; grid-row: 3; }
  .bt-dash-row .arrow { grid-column: 2; grid-row: 1 / span 3; width: 34px; height: 34px; }
  .bt-dash-row .ttl { font-size: 18px; }

  .bt-denied-inner { padding: 44px 18px 56px; }
  .bt-denied-card { padding: 22px 18px; }
  .bt-denied-actions { flex-direction: column; align-items: stretch; }
  .bt-denied-actions .bt-btn { justify-content: center; width: 100%; }
}

/* Eliminate the marquee animation on touch devices to save battery and
   avoid unwanted horizontal scroll bleed. (kept for completeness; the
   marquee is currently unused but the rule is harmless.) */
@media (hover: none) {
  .tools-track { animation-duration: 60s; }
}