@import url('./tokens.css');

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

body {
  background-color: var(--background);
  color: var(--content-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

h1, h2, h3, h4,
.bt-section-title, .co-fn-title, .co-fn-sub, .co-section-heading,
.co-rmod-eyebrow, .nota-drawer-title, .ed-index-title,
.co-analyze-card h3, .ac-how-title, .ac-ventaja-title {
  text-wrap: balance;
}

/* ── NAVBAR (DSS exact) ─────────────────────────────────── */
.navbar {
  background-color: var(--background);
  width: 100%;
  height: 86px;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--content-terciary);
}

/* ── Navbar tinted when inside a function internal ─────────── */
.navbar--fn {
  background-color: var(--fn-nav-color, var(--background)) !important;
  border-bottom: none !important;
  transition: background-color .35s ease;
}
.navbar--fn .nav-brand             { color: #ffffff; }
.navbar--fn .nav-logo-dot          { background: #ffffff; }
.navbar--fn .nav-item              { color: rgba(255,255,255,0.7); }
.navbar--fn .nav-item:hover        { color: #ffffff; }
.navbar--fn .nav-item.nav-active   { color: #ffffff !important; }
.navbar--fn .nav-cta               { background: rgba(255,255,255,0.88); color: var(--fn-nav-color); }
.navbar--fn .nav-cta-outline       { color: #ffffff; border-color: rgba(255,255,255,0.55) !important; }
.navbar--fn .nav-cta-outline:hover { background: rgba(255,255,255,0.15); }
.navbar--fn .nav-hamburger span    { background: #ffffff; }
.navbar--fn .nav-greeting          { color: rgba(255,255,255,0.75); }
.navbar--fn .nav-greeting strong   { color: #ffffff; }
.navbar--fn .nav-avatar            { background: rgba(255,255,255,0.2); color: #ffffff; border: 1.5px solid rgba(255,255,255,0.55); }
.navbar--fn .nav-tag-nuevo         { background: #ffffff; color: var(--fn-nav-color); }

.navbar-inner {
  width: 100%;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--content-primary);
  text-decoration: none;
}

.nav-brand svg { fill: currentColor; }

.nw {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -1.4px;
  white-space: nowrap;
  color: currentColor;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Nav horizontal menu ──────────────────────────────── */
.nav-center {
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-item {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--content-secondary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 6px;
  transition: color .15s;
}

.nav-item:hover { color: #5B62A8; }

/* Nav tag "Nuevo" */
.nav-tag-nuevo {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffff;
  background: #5B62A8;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
}

/* CTAs del nav */
.nav-cta {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background: #5B62A8;
  text-decoration: none;
  height: 42px;
  padding: 0 22px;
  border-radius: 8px;
  white-space: nowrap;
  transition: opacity .15s;
  border: none;
  display: inline-flex;
  align-items: center;
}
.nav-cta:hover { opacity: .85; }

.nav-cta-outline {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #5B62A8;
  background: transparent;
  text-decoration: none;
  height: 42px;
  padding: 0 22px;
  border-radius: 8px;
  white-space: nowrap;
  transition: opacity .15s;
  border: 1px solid #5B62A8;
  display: inline-flex;
  align-items: center;
}
.nav-cta-outline:hover { background: #5B62A8; color: #ffffff; border-color: #5B62A8 !important; }

.nav-lang-toggle {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--content-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 0 10px;
  height: 32px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.nav-lang-toggle:hover { color: var(--brand-primary); border-color: var(--brand-primary); }
.navbar--fn .nav-lang-toggle { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.35); }
.navbar--fn .nav-lang-toggle:hover { color: #fff; border-color: rgba(255,255,255,.8); }

.nav-link {
  color: var(--content-secondary);
  font-size: 16px;
  transition: color .2s;
}

.nav-link:hover { color: var(--content-primary); }

.nav-tag {
  background-color: var(--brand-primary);
  color: var(--text-btn);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}

.nav-nota-btn {
  display: flex;
  align-items: center;
  color: var(--content-secondary);
  font-size: 16px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  transition: color .15s;
  padding: 0;
}

.nav-nota-btn:hover { color: var(--content-primary); }

/* ── FONT TOGGLE ────────────────────────────────────────── */
.font-toggle {
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--content-terciary);
  border: 1px solid var(--content-terciary);
  color: var(--content-secondary);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background .2s, color .2s;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.font-toggle:hover { color: var(--content-primary); }

[data-font="switzer"] .font-toggle {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-btn);
  font-family: 'Switzer', sans-serif;
}

/* ── THEME TOGGLE ───────────────────────────────────────── */
.theme-toggle {
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background: var(--content-terciary);
  border: 1px solid var(--content-terciary);
  cursor: pointer;
  padding: 3px;
  display: flex;
  align-items: center;
  transition: background .25s;
  flex-shrink: 0;
}

.theme-toggle-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--content-secondary);
  transition: transform .25s, background .25s;
  flex-shrink: 0;
}

[data-theme="light"] .theme-toggle {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

[data-theme="dark"] .theme-toggle {
  background: var(--content-terciary);
  border-color: var(--content-terciary);
}

[data-theme="light"] .theme-toggle-icon {
  transform: translateX(20px);
  background: #ffffff;
}

/* ── NOTA OVERLAY + DRAWER ──────────────────────────────── */
.nota-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}

.nota-overlay.open { opacity: 1; pointer-events: all; }

.nota-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(640px, 96vw);
  background: var(--drawer-bg);
  border-left: 1px solid var(--content-terciary);
  overflow-y: auto;
  z-index: 301;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.25,.46,.45,.94);
}

.nota-drawer.open { transform: translateX(0); }

.nota-drawer-inner {
  padding: 48px 48px 80px;
}

.nota-drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--content-terciary);
  gap: 24px;
}

.nota-drawer-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--content-secondary);
  margin-bottom: 12px;
}

.nota-drawer-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--content-primary);
}

.nota-drawer-by {
  font-size: 15px;
  color: var(--content-secondary);
  margin-top: 10px;
}

.nota-close {
  background: none;
  border: none;
  color: var(--content-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  padding: 2px 0;
  transition: color .15s;
  flex-shrink: 0;
  margin-top: 4px;
  white-space: nowrap;
}

.nota-close:hover { color: var(--content-primary); }

.nota-body p {
  font-size: 17px;
  color: var(--content-secondary);
  line-height: 1.75;
  margin-bottom: 22px;
}

.nota-body h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--content-primary);
  margin: 40px 0 14px;
  letter-spacing: -0.5px;
}

.nota-body strong { color: var(--content-primary); font-weight: 600; }
.nota-body em { font-style: italic; color: var(--content-secondary); }

.nota-body blockquote {
  border-left: 3px solid var(--brand-primary);
  padding: 4px 0 4px 24px;
  margin: 24px 0;
  font-family: var(--font-quote);
  font-size: 19px;
  font-style: normal;
  font-weight: 300;
  color: var(--content-secondary);
  line-height: 1.55;
}

.nota-nums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--content-terciary);
  border-radius: 10px;
  overflow: hidden;
  margin: 28px 0;
}

.nota-num-item {
  padding: 24px;
  text-align: center;
  border-right: 1px solid var(--content-terciary);
}

.nota-num-item:last-child { border-right: none; }

.nota-num-item .n {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--content-primary);
  display: block;
  margin-bottom: 6px;
}

.nota-num-item .l {
  font-size: 12px;
  color: var(--content-secondary);
  line-height: 1.5;
}

.nota-num-item .l em {
  font-style: normal;
  display: block;
  color: var(--content-terciary);
  margin-top: 2px;
  filter: var(--em-brightness);
}

.nota-firma {
  font-size: 13px;
  color: var(--content-secondary);
  font-style: italic;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--content-terciary);
  line-height: 1.6;
}

/* ── MAIN LAYOUT: sidebar izq siempre visible ───────────── */
.main-layout {
  display: flex;
  overflow-x: clip; /* clip horizontal overflow without breaking sticky */
}

/* LEFT SIDEBAR — oculto, nav pasó al topbar */
.bootcamp-menu { display: none; }

/* Nav links por encima del glass */
.bt-flex-menu {
  position: relative;
  z-index: 1;
}

/* CONTENT AREA: hero + secciones */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── INNER LAYOUT: content + sidebar derecho ────────────── */
.section-6 {
  display: flex;
  flex: 1;
}

.bt-flex-menu {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  width: 100%;
  padding-bottom: 40px;
}

.bt-menu-bootcamp {
  color: var(--content-secondary);
  align-self: stretch;
  padding: 5px 40px;
  font-size: 17px;
  font-weight: 700;
  font-family: var(--font-body);
  text-decoration: none;
  transition: color .15s;
  display: block;
  position: relative;
}

/* Barra azul izquierda — solo en selected */
.bt-menu-bootcamp::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  background: var(--brand-primary);
  border-radius: 0 4px 4px 0;
  opacity: 0;
  transition: opacity .15s;
}

.bt-menu-bootcamp.bt-menu-selected::before {
  opacity: 1;
}

.bt-menu-bootcamp:hover,
.bt-menu-bootcamp.bt-menu-selected {
  color: var(--brand-primary);
}

/* MAIN CONTENT */
.bt-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bt-content-scroll {
  flex: 1;
}

/* RIGHT PRICING CARD */
.bt-pricing-wrapper {
  border-left: 1px solid var(--content-terciary);
  flex: 0 auto;
  width: 360px;
  padding-top: 48px;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 86px;
  height: calc(100vh - 86px);
  overflow-y: auto;
}

/* ── HERO SECTION (full width, fuera del 3-col) ─────────── */
.bt-hero {
  border-bottom: 1px solid var(--content-terciary);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 48px;
  padding: 0px 40px 0px;
  min-height: 84vh;
}

.bt-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--content-terciary);
  color: var(--content-primary);
  border-radius: 10000px;
  padding: 10px 20px;
  font-size: 15px;
}

.bt-tag-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-primary);
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%   { transform: scale(0.85); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(0.85); }
}

.bt-display {
  letter-spacing: -4px;
  text-transform: none;
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 160px);
  font-weight: 600;
  line-height: 0.92;
  color: var(--content-primary);
  margin: 0;
}

.bt-display em {
  font-style: normal;
  color: var(--brand-primary);
}

/* ── Letter color cycle ─────────────────────────────────── */
.ins-letter {
  display: inline;
  transition: color 0.4s ease;
}

.bt-hero-cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.bt-hero-cta-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bt-button-big-copy {
  background-color: var(--brand-primary);
  color: var(--text-btn);
  border-radius: 10000px;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  transition: background-color .2s;
  display: inline-flex;
  gap: 24px;
  white-space: nowrap;
}

.bt-button-big-copy:hover { background-color: var(--interaction); }

.bt-button-secondary-copy {
  color: var(--content-primary);
  border: 2px solid var(--content-terciary);
  background: transparent;
  border-radius: 10000px;
  align-items: center;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  transition: border-color .2s, background .2s;
  display: inline-flex;
  gap: 10px;
  white-space: nowrap;
}

.bt-button-secondary-copy:hover {
  border-color: var(--content-secondary);
  background: var(--hover);
}

.bt-hero-desc {
  color: var(--content-secondary);
  font-size: 16px;
  line-height: 1.6;
  max-width: 700px;
}

/* Stacked avatars row */
.bt-content-feedback-img {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.bt-img-feedback {
  border: 2px solid var(--background);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin-left: -10px;
  background: var(--content-terciary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--content-primary);
  flex-shrink: 0;
}

.bt-img-feedback:first-child { margin-left: 0; }

.bt-feedback-text {
  margin-left: 14px;
  font-size: 14px;
  color: var(--content-secondary);
  line-height: 1.4;
}

/* ── SECTION BLOCK (generic content area) ───────────────── */
.bt-section {
  border-bottom: 1px solid var(--content-terciary);
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  scroll-snap-align: start;
  min-height: 100vh;
  justify-content: center;
}

.bt-section:last-child { border-bottom: none; }

.bt-section-label {
  color: var(--content-secondary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: block;
}

.bt-section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -1.5px;
  color: var(--content-primary);
  margin: 0;
}

.bt-section-desc {
  color: var(--content-secondary);
  font-size: 16px;
  line-height: 1.65;
  max-width: 600px;
}

/* ── PHASES GRID (4 cards) ──────────────────────────────── */
.bt-phases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  overflow: hidden;
}

.bt-phase {
  padding: 40px 36px;
  border-right: 1px solid var(--content-terciary);
  border-bottom: 1px solid var(--content-terciary);
  transition: background-color .2s;
}

.bt-phase:nth-child(2n) { border-right: none; }
.bt-phase:nth-child(3),
.bt-phase:nth-child(4) { border-bottom: none; }
.bt-phase:hover { background-color: var(--hover); }

.bt-phase-num {
  color: var(--content-secondary);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.bt-phase-icon {
  font-size: 28px;
  margin-bottom: 16px;
  display: block;
}

.bt-phase-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--content-primary);
  margin-bottom: 10px;
  line-height: 1.1;
}

.bt-phase p {
  font-size: 14px;
  color: var(--content-secondary);
  line-height: 1.65;
}

/* ── BOOST TABLE + CALLOUT ──────────────────────────────── */
.bt-boost-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.bt-table {
  width: 100%;
  border-collapse: collapse;
}

.bt-table th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--content-secondary);
  padding: 0 0 14px;
  text-align: left;
  border-bottom: 1px solid var(--content-terciary);
}

.bt-table th:not(:first-child) { padding-left: 20px; }

.bt-table td {
  padding: 14px 0;
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid var(--content-terciary);
  color: var(--content-secondary);
  vertical-align: top;
}

.bt-table td:not(:first-child) { padding-left: 20px; }
.bt-table td:first-child { color: var(--content-primary); font-weight: 500; }
.bt-table td.old { text-decoration: line-through; opacity: 0.5; }
.bt-table td.new { color: var(--content-primary); }

.bt-callout {
  background-color: var(--hover);
  border: 1px solid var(--content-terciary);
  border-left: 3px solid var(--brand-primary);
  border-radius: 12px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bt-callout-quote {
  font-family: var(--font-quote);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.3px;
  color: var(--content-primary);
}

.bt-callout-note {
  font-size: 14px;
  color: var(--content-secondary);
  line-height: 1.6;
}

/* ── ENGINES GRID ───────────────────────────────────────── */
.bt-engines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  overflow: hidden;
}

.bt-engine {
  padding: 40px 36px;
  border-right: 1px solid var(--content-terciary);
  border-bottom: 1px solid var(--content-terciary);
  transition: background-color .2s;
}

.bt-engine:nth-child(2n) { border-right: none; }
.bt-engine:nth-child(3),
.bt-engine:nth-child(4) { border-bottom: none; }
.bt-engine:hover { background-color: var(--hover); }

.bt-engine-badge {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--content-secondary);
  margin-bottom: 20px;
  display: block;
}

.bt-engine-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--content-primary);
  margin-bottom: 12px;
  line-height: 1.1;
}

.bt-engine p {
  font-size: 14px;
  color: var(--content-secondary);
  line-height: 1.65;
  margin-bottom: 20px;
}

.bt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bt-tag-pill {
  font-size: 12px;
  color: var(--content-secondary);
  background: var(--tag-pill-bg);
  border: 1px solid var(--content-terciary);
  padding: 3px 10px;
  border-radius: 6px;
}

/* ── KITCHEN — teaser en home ───────────────────────────── */
.hp-kit-teaser-intro {
  max-width: 620px;
  margin-top: 16px;
  color: var(--content-secondary);
  font-size: 16px;
  line-height: 1.6;
}
.hp-kit-teaser-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.hp-kit-teaser-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--hover);
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.hp-kit-teaser-card:hover { border-color: var(--brand-primary); transform: translateY(-2px); }
.hp-kit-teaser-cta {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hp-kit-teaser-note {
  font-size: 13px;
  color: var(--content-secondary);
}
.hp-kit-teaser-centered {
  --kit-teaser-bg: #3D7870;
  text-align: center;
  background: var(--kit-teaser-bg);
  border-bottom-color: transparent;
}
.hp-kit-teaser-centered .hp-kit-teaser-intro {
  margin-left: auto;
  margin-right: auto;
  margin-top: -28px;
  text-align: center;
}
.hp-kit-teaser-centered .hp-kit-teaser-cta {
  justify-content: center;
}
.hp-kit-teaser-centered .bt-section-label,
.hp-kit-teaser-centered .bt-section-title,
.hp-kit-teaser-centered .hp-kit-teaser-intro {
  color: #ffffff;
}
.hp-kit-teaser-centered .bt-section-label {
  opacity: 0.7;
}
.hp-kit-teaser-centered .nav-tag-nuevo {
  background: rgba(255,255,255,0.2);
  color: #ffffff;
}
.hp-kit-teaser-centered .hp-kit-teaser-note {
  color: rgba(255,255,255,0.7);
}
.hp-kit-teaser-centered .nav-cta {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--kit-teaser-bg);
}
.hp-kit-teaser-centered .nav-cta:hover {
  background: transparent;
  color: #ffffff;
}
@media (max-width: 900px) {
  .hp-kit-teaser-centered {
    min-height: auto;
    gap: 24px;
    padding: 64px 32px;
  }
  .hp-kit-teaser-centered .hp-kit-teaser-intro {
    margin-top: 0;
  }
  .hp-kit-teaser-centered .hp-kit-teaser-cta {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}
@media (max-width: 600px) {
  .hp-kit-teaser-centered {
    padding: 56px 24px;
  }
  .hp-kit-teaser-centered .nav-cta {
    width: 100%;
    text-align: center;
  }
}

/* ── KITCHEN ────────────────────────────────────────────── */
:root {
  /* paleta fija por categoría — no depende del tema claro/oscuro */
  --kit-cat-metodos:     #4D9EFF;
  --kit-cat-principios:  #D85535;
  --kit-cat-modelos:     #A8BFBD;
  --kit-cat-interaccion: #C2705F;
  --kit-cat-miradas:     #B98FD0;
  --kit-cat-recursos:    #6FBF8F;
}
[data-cat="Métodos"]      { --cat-color: var(--kit-cat-metodos); }
[data-cat="Principios"]   { --cat-color: var(--kit-cat-principios); }
[data-cat="Modelos"]      { --cat-color: var(--kit-cat-modelos); }
[data-cat="Interacción"]  { --cat-color: var(--kit-cat-interaccion); }
[data-cat="Miradas"]      { --cat-color: var(--kit-cat-miradas); }
[data-cat="Recursos"]     { --cat-color: var(--kit-cat-recursos); }

.kit-intro {
  max-width: 640px;
  margin-top: 16px;
  color: var(--content-secondary);
  font-size: 16px;
  line-height: 1.6;
}

.kit-controls {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kit-search {
  width: 100%;
  max-width: 420px;
  height: 46px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--content-primary);
  background: var(--hover);
  border: 1px solid var(--content-terciary);
  border-radius: 8px;
  outline: none;
  transition: border-color .15s;
}
.kit-search:focus { border-color: var(--brand-primary); }
.kit-search::placeholder { color: var(--content-secondary); }

.kit-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kit-filter-pill {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--content-secondary);
  background: var(--tag-pill-bg);
  border: 1px solid var(--content-terciary);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all .15s;
}
.kit-filter-pill:hover { border-color: var(--cat-color, var(--brand-primary)); color: var(--content-primary); }
.kit-filter-pill.active {
  background: var(--cat-color, var(--brand-primary));
  border-color: var(--cat-color, var(--brand-primary));
  color: #ffffff;
}

.kit-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.kit-empty {
  color: var(--content-secondary);
  font-size: 14px;
  grid-column: 1 / -1;
  padding: 32px 0;
}

.kit-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--hover);
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .15s;
}
.kit-card:hover {
  background: var(--cat-color, var(--brand-primary));
  border-color: var(--cat-color, var(--brand-primary));
  transform: translateY(-2px);
}
.kit-card:hover .kit-card-cat,
.kit-card:hover .kit-card-title,
.kit-card:hover .kit-card-desc { color: #ffffff; }
.kit-card:hover .kit-card-cat { color: rgba(255,255,255,.7); }
.kit-card:hover .kit-card-desc { color: rgba(255,255,255,.85); }

.kit-card-cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cat-color, var(--brand-primary));
}
.kit-card-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--content-primary);
}
.kit-card-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--content-secondary);
}
.kit-card-tags {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Kitchen — vista detalle de ficha (layout con sidebar, según UOC Design Toolkit) */
.kit-item-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .kit-item-layout { grid-template-columns: 1fr; gap: 32px; }
}

.kit-item-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kit-item-side-head { display: flex; flex-direction: column; gap: 10px; }
.kit-item-cat { color: var(--cat-color, var(--brand-primary)); }
.kit-item-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.05;
  color: var(--content-primary);
}
.kit-item-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--content-primary);
}

.kit-side-box {
  padding: 20px;
  background: var(--hover);
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
}
.kit-side-box h3 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--content-secondary);
  margin-bottom: 18px;
}

/* Etapa — track de 4 fases */
.kit-etapa-track {
  position: relative;
  display: flex;
}
.kit-etapa-track::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 7px;
  right: 7px;
  height: 1px;
  background: var(--content-terciary);
}
.kit-etapa-dot {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.kit-etapa-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--background);
  border: 2px solid var(--content-terciary);
}
.kit-etapa-dot.is-active .kit-etapa-circle {
  background: var(--cat-color, var(--brand-primary));
  border-color: var(--cat-color, var(--brand-primary));
}
.kit-etapa-dot p {
  font-size: 10px;
  line-height: 1.3;
  color: var(--content-secondary);
}
.kit-etapa-dot.is-active p { color: var(--content-primary); font-weight: 600; }

/* Tipo — lista de checks */
.kit-tipo-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.kit-tipo-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--content-secondary);
}
.kit-tipo-list li.is-yes { color: var(--content-primary); font-weight: 500; }
.kit-tipo-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  background: var(--tag-pill-bg);
  color: var(--content-secondary);
}
.kit-tipo-list li.is-yes .kit-tipo-icon {
  background: var(--cat-color, var(--brand-primary));
  color: #ffffff;
}

/* Clasificación — datos de duración/dificultad/experiencia/participantes */
.kit-fact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.kit-fact { display: flex; flex-direction: column; gap: 4px; }
.kit-fact-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--content-secondary);
}
.kit-fact-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--content-primary);
}

.kit-item-meta {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kit-item-section {
  margin-top: 36px;
}
.kit-item-section h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}
.kit-item-section p,
.kit-item-section li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--content-primary);
}
.kit-item-section ul {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kit-item-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: kit-step;
}
.kit-item-step {
  display: flex;
  gap: 14px;
}
.kit-item-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--cat-color, var(--brand-primary));
  background: var(--tag-pill-bg);
  border-radius: 50%;
}
/* Sidebar — funcionalidades de la plataforma recomendadas para esta ficha */
.kit-fn-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.kit-fn-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease;
}
.kit-fn-item:hover { background: var(--background); }
.kit-fn-num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fn-color, var(--cat-color, var(--brand-primary)));
}
.kit-fn-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--content-primary);
}
.kit-fn-arrow {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--content-secondary);
  transition: transform .15s ease, color .15s ease;
}
.kit-fn-item:hover .kit-fn-arrow {
  transform: translateX(3px);
  color: var(--fn-color, var(--cat-color, var(--brand-primary)));
}

.kit-item-cta {
  margin-top: 0;
  padding: 28px;
  background: var(--hover);
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kit-item-cta .nav-cta { background: var(--cat-color, var(--brand-primary)); }

/* ── Intro slide herramientas ───────────────────────────── */
.bt-cap-intro {
  flex-shrink: 0;
  width: 340px;
  min-width: 340px;
  height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 55px;
  margin-right: 200px;
}

.bt-cap-intro-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 3vw, 52px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -1px;
  color: var(--content-primary);
}

.bt-cap-intro-sub {
  font-family: var(--font-display);
  font-size: clamp(38px, 3vw, 52px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -1px;
  color: var(--content-primary);
  margin-top: 4px;
}

/* ── CAPÍTULOS HORIZONTAL SCROLL (GSAP driven) ──────────── */
.bt-sec-herramientas {
  overflow: visible !important;
  padding-right: 0 !important;
  padding-bottom: 40px !important;
  position: relative;
  z-index: 20;
  scroll-snap-align: none; /* GSAP maneja el scroll horizontal */
  min-height: auto;
}

/* Home herramientas cards — smaller below 1400px, original above */
.bt-sec-herramientas .bt-capitulo-card {
  width: 280px;
  min-width: 280px;
  height: 420px;
}
.bt-sec-herramientas .bt-cap-title {
  font-size: clamp(26px, 2.2vw, 34px);
}
@media (min-width: 1400px) {
  .bt-sec-herramientas .bt-capitulo-card {
    width: 340px;
    min-width: 340px;
    height: 520px;
  }
  .bt-sec-herramientas .bt-cap-title {
    font-size: clamp(38px, 3vw, 52px);
  }
}

/* Full-bleed: break out of content-area left edge (sidebar: 220px, section padding: 64px) */
.bt-cap-strip-outer {
  margin-left: -64px;
  width: 100vw;
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
  z-index: 20; /* encima del sidebar (z-index: 10) */
}

.bt-capitulos-grid {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding-left: 64px;
  padding-right: calc(50vw - 170px);
  width: max-content;
  will-change: transform;
}

/* Wrapper: contiene la card + el backdrop de hover */
.bt-cap-wrapper {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.22,.68,0,1.2);
}

.bt-cap-wrapper:hover {
  transform: translateY(-6px);
}

.bt-cap-wrapper::before {
  content: '';
  position: absolute;
  inset: -80px;
  border-radius: 0;
  background: var(--cap-color, #C2705F);
  opacity: 0;
  transform: scaleY(0.92);
  transform-origin: center;
  transition: opacity .3s ease, transform .3s ease;
  z-index: -1;
}

.bt-cap-wrapper:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.bt-capitulo-card {
  border-radius: 40px;
  width: 340px;
  min-width: 340px;
  height: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #1A1410;
}

.bt-cap-top {
  padding: 28px 28px 0;
  flex-shrink: 0;
}

.bt-cap-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}

.bt-cap-graphic {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.bt-cap-graphic svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bt-cap-bottom {
  padding: 20px 28px 28px;
  flex-shrink: 0;
}

.bt-cap-number {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  display: block;
  margin-top: 14px;
}

.bt-cap-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 3vw, 52px);
  font-weight: 700;
  line-height: 1.0;
  color: #ffffff;
  letter-spacing: -1px;
}

/* ── Keyframes ──────────────────────────────────────────── */

/* 01: scroll diagonal seamless (un tile completo = 68×68) */
@keyframes tri-scroll {
  from { transform: translate(0, 0); }
  to   { transform: translate(68px, 68px); }
}

/* 02: hexágonos oscilan con stagger */
@keyframes hex-float {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(-28px); }
}

/* 03: banda desliza de ida y vuelta */
@keyframes diag-slide {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(40px); }
}

/* 04: barras oscilan alternadas */
@keyframes bar-right {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(22px); }
}
@keyframes bar-left {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(-22px); }
}

/* 05: scroll diagonal seamless (un tile = 56×48) */
@keyframes dot-scroll {
  from { transform: translate(0, 0); }
  to   { transform: translate(56px, 48px); }
}

/* ── 07: anillos pulse alternado ─────────────────────────── */
@keyframes ring-fade {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 0.2;  }
}

/* ── 09: grid de 12 módulos — pulso en onda ──────────────── */
@keyframes grid-tile-fade {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}
@keyframes grid-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Base: transición suave para el retorno al soltar hover  */
.cap-tri-group, .cap-dot-group,
.cap-hex, .cap-diag, .cap-bar, .cap-ring,
.cap-grid-tile, .cap-grid-roadmap,
.cap-bench-l, .cap-bench-r {
  transition: opacity .5s ease, transform .5s ease;
}

/* ── Animaciones continuas en hover ─────────────────────── */
.bt-cap-wrapper:hover .cap-tri-group {
  animation: tri-scroll 1.8s linear infinite;
}

.bt-cap-wrapper:hover .cap-hex { animation: hex-float 1.6s ease-in-out infinite; }
.bt-cap-wrapper:hover .cap-hex:nth-of-type(2) { animation-delay: .22s; }
.bt-cap-wrapper:hover .cap-hex:nth-of-type(3) { animation-delay: .44s; }

.bt-cap-wrapper:hover .cap-diag {
  animation: diag-slide 1.6s ease-in-out infinite;
}

.bt-cap-wrapper:hover .cap-bar:nth-of-type(1) { animation: bar-right 1.4s ease-in-out infinite; }
.bt-cap-wrapper:hover .cap-bar:nth-of-type(2) { animation: bar-left  1.4s ease-in-out infinite; animation-delay: .12s; }
.bt-cap-wrapper:hover .cap-bar:nth-of-type(3) { animation: bar-right 1.4s ease-in-out infinite; animation-delay: .24s; }

.bt-cap-wrapper:hover .cap-dot-group {
  animation: dot-scroll 2.4s linear infinite;
}

.bt-cap-wrapper:hover .cap-ring              { animation: ring-fade 2.2s ease-in-out infinite; }
.bt-cap-wrapper:hover .cap-ring:nth-of-type(2) { animation-delay: .4s; }
.bt-cap-wrapper:hover .cap-ring:nth-of-type(3) { animation-delay: .8s; }
.bt-cap-wrapper:hover .cap-ring:nth-of-type(4) { animation-delay: 1.2s; }

.bt-cap-wrapper:hover .cap-grid-tile:nth-of-type(-n+4)              { animation: grid-tile-fade 1.8s ease-in-out infinite; }
.bt-cap-wrapper:hover .cap-grid-tile:nth-of-type(n+5):nth-of-type(-n+8)  { animation: grid-tile-fade 1.8s ease-in-out infinite; animation-delay: .15s; }
.bt-cap-wrapper:hover .cap-grid-tile:nth-of-type(n+9)               { animation: grid-tile-fade 1.8s ease-in-out infinite; animation-delay: .3s; }
.bt-cap-wrapper:hover .cap-grid-roadmap                             { animation: grid-pulse 1.4s ease-in-out infinite; animation-delay: .45s; }

/* ── Bench/Mood card — alternating panel comparison ─────── */
@keyframes bench-shift-l {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50%       { transform: translateX(5px); opacity: 0.55; }
}
@keyframes bench-shift-r {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50%       { transform: translateX(-5px); opacity: 1; }
}

.bt-cap-wrapper:hover .cap-bench-l { animation: bench-shift-l 2s ease-in-out infinite; }
.bt-cap-wrapper:hover .cap-bench-r { animation: bench-shift-r 2s ease-in-out infinite; animation-delay: .1s; }

/* ══════════════════════════════════════════════════════════
   BENCH / MOOD — REPORT VISUAL COMPONENTS
   ══════════════════════════════════════════════════════════ */

/* ── Screenshot Strip ────────────────────────────────────── */
.bench-screenshot-strip {
  width: 100%;
  background: var(--surface, #f9f8f6);
  border-bottom: 1px solid var(--content-terciary, #e2e2e2);
  padding: 20px 0 16px;
}
.bench-sstrip-inner {
  display: flex;
  gap: 16px;
  padding: 0 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--content-terciary, #e2e2e2) transparent;
}
.bench-sstrip-inner::-webkit-scrollbar { height: 3px; }
.bench-sstrip-inner::-webkit-scrollbar-track { background: transparent; }
.bench-sstrip-inner::-webkit-scrollbar-thumb { background: var(--content-terciary, #e2e2e2); border-radius: 2px; }
.bench-sstrip-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bench-sstrip-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--content-terciary, #e2e2e2);
  color: var(--content-secondary, #7a7570);
  border-radius: 4px;
  padding: 3px 7px;
  align-self: flex-start;
}
.bench-sstrip-card--main .bench-sstrip-badge { background: #6B3FA0; color: #fff; }
.bench-sstrip-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--content-primary, #1a1410);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bench-sstrip-img {
  width: 220px;
  height: 138px;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  border: 1px solid var(--content-terciary, #e2e2e2);
  display: block;
  background: var(--hover, #f5f5f3);
}
.bench-sstrip-placeholder {
  width: 220px;
  height: 138px;
  background: var(--hover, #f5f5f3);
  border-radius: 8px;
  border: 1px solid var(--content-terciary, #e2e2e2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--content-secondary, #7a7570);
}

/* ── Visual Direction container ──────────────────────────── */
.bench-visual-direction {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--content-terciary, #e2e2e2);
}
.bench-vd-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--content-secondary, #7a7570);
  margin-bottom: 14px;
}

/* ── Palette swatches ────────────────────────────────────── */
.bench-palette-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.bench-swatch {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--content-terciary, #e2e2e2);
  width: 148px;
  flex-shrink: 0;
}
.bench-swatch-color {
  height: 76px;
  display: flex;
  align-items: flex-end;
  padding: 8px 11px;
}
.bench-swatch-hex {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  opacity: .9;
}
.bench-swatch-info { padding: 9px 11px; background: var(--surface, #f9f8f6); }
.bench-swatch-name { font-size: 12px; font-weight: 600; color: var(--content-primary, #1a1410); margin-bottom: 3px; }
.bench-swatch-usage { font-size: 11px; color: var(--content-secondary, #7a7570); line-height: 1.4; }

/* ── Typography samples ──────────────────────────────────── */
.bench-font-grid { display: flex; flex-direction: column; gap: 12px; }
.bench-font-card {
  background: var(--surface, #f9f8f6);
  border: 1px solid var(--content-terciary, #e2e2e2);
  border-radius: 12px;
  padding: 20px 24px;
}
.bench-font-role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--content-secondary, #7a7570);
  margin-bottom: 10px;
}
.bench-font-sample {
  color: var(--content-primary, #1a1410);
  line-height: 1.25;
  margin-bottom: 8px;
}
.bench-font-name {
  font-size: 11px;
  color: var(--content-secondary, #7a7570);
  font-family: 'DM Mono', 'Courier New', monospace;
}

/* ── Motion previews ─────────────────────────────────────── */
.bench-motion-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.bench-motion-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface, #f9f8f6);
  border: 1px solid var(--content-terciary, #e2e2e2);
  border-radius: 12px;
  padding: 16px;
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 320px;
}
.bench-motion-preview {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--hover, #f5f5f3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bench-motion-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6B3FA0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.bench-motion-type { font-size: 12px; font-weight: 600; color: var(--content-primary, #1a1410); font-family: 'DM Mono','Courier New',monospace; margin-bottom: 3px; }
.bench-motion-spec { font-size: 11px; color: var(--content-secondary, #7a7570); font-family: 'DM Mono','Courier New',monospace; margin-bottom: 5px; }
.bench-motion-usage { font-size: 11px; color: var(--content-secondary, #7a7570); line-height: 1.45; }

@keyframes bench-anim-fade-up {
  0%   { opacity: 0; transform: translateY(11px); }
  35%  { opacity: 1; transform: translateY(0); }
  65%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(11px); }
}
@keyframes bench-anim-fade-in {
  0%, 100% { opacity: 0.15; }
  35%, 65%  { opacity: 1; }
}
@keyframes bench-anim-slide-right {
  0%   { opacity: 0; transform: translateX(-11px); }
  35%  { opacity: 1; transform: translateX(0); }
  65%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-11px); }
}
@keyframes bench-anim-scale {
  0%, 100% { transform: scale(0.75); opacity: 0.5; }
  50%      { transform: scale(1.25); opacity: 1; }
}
@keyframes bench-anim-lift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes bench-anim-blur {
  0%, 100% { filter: blur(5px); opacity: 0.25; }
  35%, 65% { filter: blur(0); opacity: 1; }
}

.bench-anim-fade-up    { animation: bench-anim-fade-up    2s ease-out infinite; }
.bench-anim-fade-in    { animation: bench-anim-fade-in    2s linear infinite; }
.bench-anim-slide-right{ animation: bench-anim-slide-right 2s ease-out infinite; }
.bench-anim-scale      { animation: bench-anim-scale      2s ease-in-out infinite; }
.bench-anim-lift       { animation: bench-anim-lift       2s ease-in-out infinite; }
.bench-anim-blur       { animation: bench-anim-blur       2s ease-out infinite; }

/* ── Identity keywords ───────────────────────────────────── */
.bench-keywords-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.bench-keyword {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 100px;
  border: 1.5px solid;
  letter-spacing: .03em;
  background: transparent;
}

/* ── Photo/visual style note ─────────────────────────────── */
.bench-photostyle {
  font-size: 14px;
  line-height: 1.7;
  color: var(--content-primary, #1a1410);
  background: var(--hover, #f5f5f3);
  border-radius: 10px;
  padding: 16px 20px;
  border-left: 3px solid #6B3FA0;
}

/* ── SITE VISUAL — Module 1 cards ──────────────────────── */
.bench-site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.bench-site-card {
  border: 1px solid var(--content-terciary, #e2e2e2);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface, #f9f8f6);
  display: flex;
  flex-direction: column;
}
.bench-site-card--main {
  border-color: #6B3FA0;
  box-shadow: 0 0 0 2px #6B3FA020;
}
.bench-site-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--content-terciary, #e2e2e2);
}
.bench-site-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--content-terciary, #e2e2e2);
  color: var(--content-secondary, #7a7570);
  white-space: nowrap;
  flex-shrink: 0;
}
.bench-site-badge--main { background: #6B3FA0; color: #fff; }
.bench-site-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--content-primary, #1a1410);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bench-site-img-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f0f0ee;
  flex-shrink: 0;
}
.bench-site-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.bench-site-no-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--content-secondary, #7a7570);
}
.bench-site-meta {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.bench-site-palette {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.bench-pd {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.08);
  cursor: default;
  flex-shrink: 0;
}
.bench-site-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.bench-density-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}
.bench-mood-tag {
  font-size: 10px;
  color: var(--content-secondary, #7a7570);
  background: var(--hover, #f5f5f3);
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--content-terciary, #e2e2e2);
}
.bench-site-typo {
  font-size: 11px;
  color: var(--content-secondary, #7a7570);
  font-family: 'DM Mono','Courier New',monospace;
}
.bench-site-phototype {
  font-size: 11px;
  color: var(--content-secondary, #7a7570);
  text-transform: capitalize;
}
.bench-site-highlight {
  font-size: 12px;
  color: var(--content-primary, #1a1410);
  line-height: 1.5;
  border-left: 2px solid #6B3FA060;
  padding-left: 8px;
  margin-top: 2px;
}

/* ── GAP GRID — Module 3 ────────────────────────────────── */
.bench-gap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.bench-gap-card {
  background: var(--surface, #f9f8f6);
  border: 1px solid var(--content-terciary, #e2e2e2);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bench-gap-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.bench-gap-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--content-primary, #1a1410);
  line-height: 1.3;
}
.bench-gap-impact {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.bench-gap-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.bench-gap-type {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: #6B3FA015;
  color: #6B3FA0;
  border: 1px solid #6B3FA030;
}
.bench-gap-who {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--hover, #f5f5f3);
  color: var(--content-secondary, #7a7570);
  border: 1px solid var(--content-terciary, #e2e2e2);
}
.bench-gap-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--content-secondary, #7a7570);
}

/* ── IDEA CARDS — Module 4 ──────────────────────────────── */
.bench-idea-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.bench-idea-card {
  background: var(--surface, #f9f8f6);
  border: 1px solid var(--content-terciary, #e2e2e2);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bench-idea-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.bench-idea-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--content-primary, #1a1410);
  line-height: 1.3;
}
.bench-idea-badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bench-idea-impact {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}
.bench-idea-effort {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--hover, #f5f5f3);
  color: var(--content-secondary, #7a7570);
  border: 1px solid var(--content-terciary, #e2e2e2);
  white-space: nowrap;
}
.bench-idea-from {
  font-size: 12px;
  color: var(--content-secondary, #7a7570);
}
.bench-idea-why {
  font-size: 13px;
  line-height: 1.55;
  color: var(--content-primary, #1a1410);
}
.bench-idea-how {
  font-size: 12px;
  line-height: 1.55;
  color: var(--content-secondary, #7a7570);
  background: var(--hover, #f5f5f3);
  border-radius: 8px;
  padding: 10px 14px;
  border-left: 2px solid #6B3FA060;
}

/* ── DIFERENCIAL GRID ───────────────────────────────────── */
.bt-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  overflow: hidden;
}

.bt-diff-item {
  padding: 40px 36px;
  border-right: 1px solid var(--content-terciary);
  border-bottom: 1px solid var(--content-terciary);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: background-color .2s;
}

.bt-diff-item:nth-child(2n) { border-right: none; }
.bt-diff-item:nth-child(3),
.bt-diff-item:nth-child(4) { border-bottom: none; }
.bt-diff-item:hover { background-color: var(--hover); }

.bt-diff-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }

.bt-diff-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--content-primary);
  margin-bottom: 8px;
  line-height: 1.1;
}

.bt-diff-item p {
  font-size: 14px;
  color: var(--content-secondary);
  line-height: 1.65;
}

/* ── TESTIMONIOS (DSS style) ────────────────────────────── */
.bt-wrapper-comentarios {
  display: flex;
  flex-flow: row;
  align-items: stretch;
}

.bt-container-testimonios {
  border-top: 1px solid var(--content-terciary);
  width: 50%;
  color: var(--content-primary);
  flex: 0 auto;
  padding: 48px 48px 48px 0;
}

.bt-container-testimonios.line-extra {
  border-left: 1px solid var(--content-terciary);
  padding-left: 48px;
  padding-right: 0;
}

.bt-testimonio-quote {
  font-family: var(--font-quote);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 32px;
}

.bt-testimonio-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bt-img-big-testimoni {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  background: var(--content-terciary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--content-primary);
}

.bt-label-testimonio {
  font-family: var(--font-quote);
  font-size: 16px;
  font-weight: 500;
  color: var(--content-primary);
  line-height: 1.2;
}

.bt-role-testimonio {
  font-family: var(--font-quote);
  font-size: 14px;
  color: var(--content-secondary);
  line-height: 1.2;
}

/* ── STATS ROW ──────────────────────────────────────────── */
.bt-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  overflow: hidden;
}

.bt-stat {
  padding: 36px 28px;
  border-right: 1px solid var(--content-terciary);
}

.bt-stat:last-child { border-right: none; }

.bt-stat-num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--content-primary);
  margin-bottom: 6px;
}

.bt-stat-label {
  font-size: 12px;
  color: var(--content-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ── NOTA SECTION ───────────────────────────────────────── */
.bt-nota-body {
  max-width: 640px;
}

.bt-nota-body p {
  font-size: 17px;
  color: var(--content-secondary);
  line-height: 1.75;
  margin-bottom: 24px;
}

.bt-nota-body h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--content-primary);
  margin: 40px 0 16px;
  letter-spacing: -0.5px;
}

.bt-nota-body strong { color: var(--content-primary); font-weight: 600; }

.bt-nota-body blockquote {
  border-left: 3px solid var(--brand-primary);
  padding: 4px 0 4px 24px;
  margin: 28px 0;
  font-family: var(--font-quote);
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  color: var(--content-secondary);
  line-height: 1.5;
}

.bt-nota-nums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--content-terciary);
  border-radius: 10px;
  overflow: hidden;
  margin: 32px 0;
}

.bt-nota-num-item {
  padding: 28px;
  text-align: center;
  border-right: 1px solid var(--content-terciary);
}

.bt-nota-num-item:last-child { border-right: none; }

.bt-nota-num-item .n {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--content-primary);
  display: block;
  margin-bottom: 6px;
}

.bt-nota-num-item .l {
  font-size: 12px;
  color: var(--content-secondary);
  line-height: 1.5;
}

.bt-nota-num-item .l em {
  font-style: normal;
  display: block;
  color: var(--content-terciary);
  margin-top: 2px;
  filter: brightness(1.8);
}

/* ── PRICING CARD (right sidebar) ──────────────────────── */
.bt-pricing-label {
  color: var(--content-secondary);
  font-size: 13px;
  line-height: 1.75;
}

.bt-title-pricing {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--content-primary);
}

.bt-button {
  background-color: var(--brand-primary);
  color: var(--text-btn);
  border-radius: 10000px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  transition: background-color .2s;
  cursor: pointer;
  border: none;
}

.bt-button:hover { background-color: var(--interaction); }

.bt-check-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bt-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--content-secondary);
  line-height: 1.4;
}

.bt-check-mark {
  color: var(--brand-primary);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}


/* ── FOOTER ─────────────────────────────────────────────── */
.bt-footer {
  scroll-snap-align: start;
  border-top: 1px solid var(--content-terciary);
  padding: 40px 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.bt-footer p, .bt-footer a {
  font-size: 13px;
  color: var(--content-secondary);
  transition: color .15s;
}

.bt-footer a:hover { color: var(--content-primary); }

/* ── CARD OVERLAY ───────────────────────────────────────── */
.card-overlay {
  position: fixed;
  z-index: 500;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 80px;
  pointer-events: none;
  border-radius: 40px;
  /* top/left/width/height set by JS */
}

.card-overlay.co-active {
  pointer-events: all;
}

/* #cardOverlayBg, .co-header-fixed, .co-logo-wrap, .co-dot, .co-close removed
   — overlay nav replaced by regular main navbar */

.co-graphic {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.18;
}

.card-overlay-title {
  font-family: var(--font-display);
  font-size: clamp(88px, 11vw, 160px);
  font-weight: 600;
  color: #ffffff;
  line-height: 0.92;
  letter-spacing: -4px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .4s ease, transform .4s ease;
}

.card-overlay.co-active .card-overlay-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .35s;
}

/* ── QUIÉN SOY ──────────────────────────────────────────── */
.bt-quien-name {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--content-primary);
  line-height: 1;
}

.bt-quien-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.bt-quien-bio {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bt-quien-bio p {
  color: var(--content-secondary);
  font-size: 15px;
  line-height: 1.7;
}

.bt-quien-bio strong {
  color: var(--content-primary);
  font-weight: 600;
}

.bt-quien-tags-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.bt-quien-group-label {
  display: block;
  color: var(--content-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.bt-quien-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bt-quien-tag {
  background: var(--tag-pill-bg);
  color: var(--content-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--content-terciary);
  transition: color .15s, border-color .15s;
}

.bt-quien-tag:hover {
  color: var(--content-primary);
  border-color: var(--content-secondary);
}

.bt-quien-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  overflow: hidden;
}

.bt-quien-tl-item {
  padding: 28px 28px;
  border-right: 1px solid var(--content-terciary);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background-color .2s;
}

.bt-quien-tl-item:last-child { border-right: none; }
.bt-quien-tl-item:hover { background-color: var(--hover); }

.bt-quien-tl-year {
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.bt-quien-tl-item div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bt-quien-tl-item strong {
  color: var(--content-primary);
  font-size: 14px;
  font-weight: 600;
}

.bt-quien-tl-item span {
  color: var(--content-secondary);
  font-size: 13px;
  line-height: 1.4;
}

/* ── EDITORIALES DRAWER INDEX ───────────────────────────── */
.ed-index-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 32px;
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  overflow: hidden;
}

.ed-index-card {
  padding: 32px 36px;
  border-bottom: 1px solid var(--content-terciary);
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  background: var(--hover);
  transition: background-color .2s, color .2s;
}

/* ── DOC GATE POPUP ─────────────────────────────────────── */
.doc-gate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.doc-gate-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.doc-gate-panel {
  background: var(--background);
  border-radius: 20px;
  padding: 48px 40px 40px;
  max-width: 420px;
  width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  position: relative;
  transform: translateY(8px);
  transition: transform .2s ease;
}
.doc-gate-overlay.active .doc-gate-panel { transform: translateY(0); }
.doc-gate-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--content-secondary);
  padding: 4px;
  transition: color .15s;
}
.doc-gate-close:hover { color: var(--content-primary); }
.doc-gate-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  color: var(--content-primary);
  letter-spacing: -0.4px;
  line-height: 1.25;
  margin: 0;
}

/* ── LOGIN POPUP ─────────────────────────────────────────── */
.login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.login-overlay.active {
  opacity: 1;
  pointer-events: all;
}
/* ── Lock brand color to violet in all popups/panels ────── */
.login-panel,
.profile-panel,
.upgrade-panel,
.if-panel,
.doc-gate-panel,
.enterprise-panel {
  --brand-primary: #5B62A8;
}

.login-panel {
  background: var(--background);
  border-radius: 20px;
  padding: 48px 44px 44px;
  max-width: 460px;
  width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  transform: translateY(8px);
  transition: transform .2s ease;
}
.login-overlay.active .login-panel { transform: translateY(0); }
.login-field-row { display: flex; gap: 12px; }
@media (max-width: 540px) {
  .login-field-row { flex-direction: column; gap: 0; }
  .login-panel { padding: 36px 24px 32px; }
  .login-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .login-btn-primary { text-align: center; }
  .login-btn-ghost { text-align: center; }
}
.login-field-row .login-field { flex: 1; }
.reg-success-inner { padding: 8px 0 16px; text-align: center; }
.reg-success-icon { font-size: 40px; margin-bottom: 20px; display: block; }
.reg-success-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--content-primary); letter-spacing: -0.5px; margin: 0 0 12px; }
.reg-success-desc { font-size: 15px; line-height: 1.6; color: var(--content-secondary); margin: 0 0 12px; }
.reg-success-hint { font-size: 13px; color: var(--content-secondary); opacity: .6; margin: 0; }
.login-tabs { display: flex; border-bottom: 1px solid var(--content-terciary); margin-bottom: 24px; }
.login-tab { flex: 1; padding: 12px; font-size: 14px; font-weight: 500; background: none; border: none; cursor: pointer; color: var(--content-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-body); transition: color .15s; }
.login-tab.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.login-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: var(--content-primary);
  letter-spacing: -0.5px;
  margin: 0;
}
.login-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login-field label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--content-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.login-field input {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--content-primary);
  border-radius: 8px;
  height: 42px;
  padding: 0 14px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s;
}
[data-theme="light"] .login-field input {
  background: #f5f4f2;
  border: 1.5px solid #c8c4be;
}
[data-theme="dark"] .login-field input {
  background: #1e1e1e;
  border: 1.5px solid #383838;
}
.login-field input:focus { border-color: var(--brand-primary); }
.login-field input::placeholder { color: var(--content-secondary); opacity: .6; }
.login-error {
  font-family: var(--font-body);
  font-size: 13px;
  color: #E05B3A;
  margin: -8px 0 0;
  display: none;
}
.login-actions {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.login-btn-secondary {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--content-primary);
  background: transparent;
  border: 1px solid var(--content-terciary);
  border-radius: 8px;
  height: 42px;
  padding: 0 20px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.login-btn-secondary:hover { border-color: var(--content-secondary); }
.login-btn-primary {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background: var(--brand-primary);
  border: none;
  border-radius: 8px;
  height: 42px;
  padding: 0 22px;
  cursor: pointer;
  transition: opacity .15s;
}
.login-btn-primary:hover { opacity: .85; }
.login-btn-ghost {
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  color: var(--content-secondary); background: none; border: none;
  cursor: pointer; padding: 0; text-align: left; line-height: 1.4;
  transition: color .15s;
}
.login-btn-ghost:hover { color: var(--content-primary); }
.login-btn-ghost strong { font-weight: 600; color: var(--brand-primary); }
.login-free-badge {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-primary);
  opacity: 0.85;
  letter-spacing: 0.1px;
}
.login-free-note {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-primary);
  margin: 16px 0 -10px;
  letter-spacing: 0.1px;
}
.login-divider { height: 1px; background: var(--content-terciary); margin: 12px 0 16px; }
.login-forgot-link {
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  color: var(--content-secondary); background: none; border: none;
  cursor: pointer; padding: 0; text-decoration: underline;
  text-underline-offset: 3px; transition: color .15s; display: block;
}
.login-forgot-link:hover { color: var(--content-primary); }
.login-forgot-desc {
  font-size: 14px; line-height: 1.6; color: var(--content-secondary);
  margin: 0 0 20px;
}

/* ── NAV USER AREA (logged in state) ────────────────────── */
.nav-user-area {
  display: none;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  position: relative;
}
.nav-user-area:hover .nav-greeting strong { color: var(--brand-primary); }
.nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: opacity .15s;
}
.nav-user-area:hover .nav-avatar { opacity: .85; }
.nav-greeting {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--content-secondary);
  white-space: nowrap;
}
.nav-greeting strong {
  color: var(--content-primary);
  font-weight: 600;
  transition: color .15s;
}

/* Dropdown menu */
.nav-user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--background);
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  min-width: 180px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  z-index: 600;
}
.nav-user-dropdown.open { display: flex; }
.nav-dropdown-item {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--content-primary);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
  width: 100%;
}
.nav-dropdown-item:hover { background: var(--hover); }
.nav-dropdown-item.danger { color: #E05B3A; }
.nav-dropdown-sep {
  height: 1px;
  background: var(--content-terciary);
  margin: 4px 0;
}

/* Mobile user area — inside hamburger menu */
.nav-mobile-user-area {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--content-terciary);
}
.nm-user-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 14px;
}
.nm-action {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--content-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 0;
  text-align: left;
  transition: color .15s;
  width: 100%;
}
.nm-action:hover { color: var(--brand-primary); }
.nm-action.danger { color: #E05B3A; }
.nm-sep { height: 1px; background: var(--content-terciary); margin: 6px 0; }

/* ── PROFILE POPUP ──────────────────────────────────────── */
.profile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.profile-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.profile-panel {
  background: var(--background);
  border-radius: 20px;
  padding: 48px 40px 40px;
  max-width: 380px;
  width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  transform: translateY(8px);
  transition: transform .2s ease;
  text-align: center;
}
.profile-overlay.active .profile-panel { transform: translateY(0); }
.profile-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.profile-name {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: var(--content-primary);
  letter-spacing: -0.4px;
  margin: 0;
}
.profile-username {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--content-secondary);
  margin: -12px 0 0;
}
.profile-plan-badge {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--content-secondary);
  background: var(--hover);
  border: 1px solid var(--content-terciary);
  border-radius: 100px;
  padding: 5px 14px;
  letter-spacing: 0.3px;
}
.profile-upgrade-btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background: var(--brand-primary);
  border: none;
  border-radius: 8px;
  height: 42px;
  padding: 0 24px;
  cursor: pointer;
  transition: opacity .15s;
  width: 100%;
}
.profile-upgrade-btn:hover { opacity: .85; }
/* Plan badge variants */
.profile-plan-badge--paid  { background: color-mix(in srgb, var(--brand-primary) 12%, transparent); border-color: var(--brand-primary); color: var(--brand-primary); }
.profile-plan-badge--admin { background: #2D1F0A; border-color: #E8B535; color: #E8B535; }
/* On demand counter in profile */
.profile-fn-counter {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--content-secondary);
  margin: -8px 0 0;
}
/* Upgrade modal */
.upgrade-panel { gap: 12px; }
.upgrade-icon { font-size: 36px; line-height: 1; }
.upgrade-msg {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--content-secondary);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}
.upgrade-btn-secondary {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--content-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.upgrade-btn-secondary:hover { color: var(--content-primary); }
/* Enterprise panel */
.enterprise-panel { max-width: 460px; gap: 0; align-items: stretch; text-align: left; }
.enterprise-panel .profile-name,
.enterprise-panel .profile-username { text-align: left; }
.enterprise-panel .if-textarea {
  font-size: 14px;
  color: var(--content-primary);
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  border: 1.5px solid #c8c4be;
  background: #f5f4f2;
  transition: border-color .15s;
}
[data-theme="dark"] .enterprise-panel .if-textarea {
  background: #1e1e1e;
  border-color: #383838;
}
.enterprise-panel .if-textarea:focus { border-color: var(--brand-primary); }
/* On demand counter chip (shown in fn page header) */
.ondemand-counter {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 30%, transparent);
  border-radius: 100px;
  padding: 4px 12px;
}
/* Style .bt-cap-price-cta as button (was <a>) */
.bt-cap-price-cta {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  padding: 0;
  width: 100%;
  text-align: left;
}

/* ── MIS INSIGHTS PAGE ──────────────────────────────────── */
.mi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .mi-header > div:last-child { flex-wrap: wrap; width: 100%; }
  .mi-groupby-wrap { flex: 1; }
  .mi-groupby-select { width: 100%; }
  .mi-new-btn { flex: 1; justify-content: center; }
}
.mi-count {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--content-secondary);
}
.mi-count strong {
  font-weight: 600;
  color: var(--content-primary);
}
.mi-new-btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background: var(--brand-primary);
  border: none;
  border-radius: 8px;
  height: 42px;
  padding: 0 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity .15s;
}
.mi-new-btn:hover { opacity: .85; }

/* Empty state */
.mi-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 24px;
  text-align: center;
  border: 1px dashed var(--content-terciary);
  border-radius: 16px;
}
.mi-empty-icon { font-size: 36px; opacity: .35; }
.mi-empty-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--content-primary);
  letter-spacing: -0.3px;
}
.mi-empty-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--content-secondary);
  line-height: 1.6;
  max-width: 360px;
  margin: 0;
}

/* Report list */
.mi-reports-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
}
.mi-report-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: var(--background);
  cursor: pointer;
  transition: background .15s;
}
.mi-report-item:hover { background: var(--hover); }
.mi-report-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mi-report-cap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}
.mi-report-info { flex: 1; }
.mi-report-fn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--content-primary);
}
.mi-report-brand {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--content-secondary);
  margin-top: 1px;
}
.mi-report-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--content-secondary);
  margin-top: 2px;
}
.mi-report-arrow {
  font-size: 14px;
  color: var(--content-secondary);
  transition: transform .15s;
}
.mi-report-item:hover .mi-report-arrow { transform: translateX(3px); }
.mi-report-delete {
  background: none;
  border: none;
  color: var(--content-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity .15s, color .15s, background .15s;
}
.mi-report-item:hover .mi-report-delete { opacity: 1; }
.mi-report-delete:hover { color: #c0392b; background: rgba(192,57,43,.08); }

/* ── INSIGHT FLOW POPUP ─────────────────────────────────── */
.if-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.52);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2300;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.if-overlay.active { opacity: 1; pointer-events: all; }

.if-panel {
  background: var(--background);
  border-radius: 20px;
  width: min(640px, calc(100vw - 48px));
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(10px);
  transition: transform .2s ease;
}
.if-overlay.active .if-panel { transform: translateY(0); }

.if-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--content-terciary);
  flex-shrink: 0;
}
.if-step-badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--brand-primary);
  text-transform: uppercase;
}
.if-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--content-primary);
  letter-spacing: -0.3px;
  flex: 1;
}
.if-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--content-secondary);
  padding: 2px 4px;
  transition: color .15s;
}
.if-close:hover { color: var(--content-primary); }

.if-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}

/* Step 1 — function grid */
.if-fn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.if-fn-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--content-terciary);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--background);
}
.if-fn-card:hover { border-color: var(--content-secondary); background: var(--hover); }
.if-fn-card.selected { border-color: var(--brand-primary); background: var(--hover); }
.if-fn-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.if-fn-info { flex: 1; }
.if-fn-num {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--content-secondary);
}
.if-fn-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--content-primary);
  line-height: 1.2;
  margin-top: 2px;
}

/* Step 2 — inputs */
.if-inputs { display: flex; flex-direction: column; gap: 16px; }
.if-selected-fn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--hover);
  border-radius: 10px;
  margin-bottom: 8px;
}
.if-selected-fn-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--content-primary);
}
.if-field { display: flex; flex-direction: column; gap: 6px; }
.if-field label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--content-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.if-field input, .if-field select {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--content-primary);
  border-radius: 8px;
  height: 42px;
  padding: 0 14px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s;
  appearance: none;
}
[data-theme="light"] .if-field input,
[data-theme="light"] .if-field select { background: #f5f4f2; border: 1.5px solid #c8c4be; }
[data-theme="dark"]  .if-field input,
[data-theme="dark"]  .if-field select  { background: #1e1e1e; border: 1.5px solid #383838; }
.if-field input:focus,
.if-field select:focus { border-color: var(--brand-primary); }
.if-field input::placeholder { color: var(--content-secondary); opacity: .6; }
.if-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: var(--font-body);
}
.if-field--full { grid-column: 1 / -1; }
.if-field-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--content-secondary);
  margin: -4px 0 0;
}
.if-diag-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 540px) {
  .if-diag-modules { grid-template-columns: repeat(2, 1fr); }
}
.if-diag-module-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--content-primary);
  transition: border-color .15s;
}
[data-theme="light"] .if-diag-module-item { background: #f5f4f2; border: 1.5px solid #c8c4be; }
[data-theme="dark"]  .if-diag-module-item { background: #1e1e1e; border: 1.5px solid #383838; }
.if-diag-module-item:has(input:checked) { border-color: var(--brand-primary); }
.if-diag-module-item input[type="checkbox"] {
  appearance: auto;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  accent-color: var(--brand-primary);
  cursor: pointer;
  flex-shrink: 0;
}
#if-diag-modules-field.if-error .if-diag-modules { outline: 1.5px solid #E05B3A; border-radius: 8px; }

/* ── Bench/Moodboard competitor input rows ──────────────── */
.if-bench-comps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.if-bench-comp-row {
  display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; align-items: center;
}
.if-bench-comp-row input {
  font-family: var(--font-body); font-size: 13px; padding: 9px 12px;
  border: 1px solid var(--content-terciary); border-radius: 8px;
  background: var(--background); color: var(--content-primary); outline: none;
  transition: border-color .15s;
}
.if-bench-comp-row input:focus { border-color: #6B3FA0; }
.if-bench-comp-remove {
  background: none; border: 1px solid var(--content-terciary); border-radius: 6px;
  color: var(--content-secondary); font-size: 16px; cursor: pointer;
  padding: 4px 8px; line-height: 1; transition: background .15s, color .15s;
}
.if-bench-comp-remove:hover { background: #fef2f2; color: #E05B3A; border-color: #E05B3A; }
.if-bench-add-btn {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  color: #6B3FA0; background: none; border: 1.5px dashed #c4b5fd;
  border-radius: 8px; padding: 8px 14px; cursor: pointer; width: 100%;
  transition: background .15s, border-color .15s;
}
.if-bench-add-btn:hover { background: #f5f0ff; border-color: #6B3FA0; }
@media (max-width: 540px) {
  .if-bench-comp-row { grid-template-columns: 1fr; }
  .if-bench-comp-remove { justify-self: end; }
}

.if-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px 24px;
  border-top: 1px solid var(--content-terciary);
  flex-shrink: 0;
  gap: 12px;
}
.if-btn-back {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--content-primary);
  background: transparent;
  border: 1px solid var(--content-terciary);
  border-radius: 8px;
  height: 42px;
  padding: 0 20px;
  cursor: pointer;
  transition: border-color .15s;
}
.if-btn-back:hover { border-color: var(--content-secondary); }
.if-btn-primary {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background: var(--brand-primary);
  border: none;
  border-radius: 8px;
  height: 42px;
  padding: 0 24px;
  cursor: pointer;
  margin-left: auto;
  transition: opacity .15s;
}
.if-btn-primary:hover { opacity: .85; }
.if-btn-primary:disabled { opacity: .4; cursor: default; }

/* Success step */
.if-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  text-align: center;
}
.if-success-icon { font-size: 40px; }
.if-success-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--content-primary);
  letter-spacing: -0.4px;
}
.if-success-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--content-secondary);
  line-height: 1.6;
  max-width: 360px;
  margin: 0;
}

.ed-index-card:last-child { border-bottom: none; }
.ed-index-card:hover { background-color: var(--brand-primary); }
.ed-index-card:hover .ed-index-arrow { transform: translateX(4px); color: #fff; }
.ed-index-card:hover .ed-index-title,
.ed-index-card:hover .ed-index-excerpt { color: rgba(255,255,255,.9); }
.ed-index-card:hover .ed-index-label,
.ed-index-card:hover .ed-index-by { color: rgba(255,255,255,.6); }

.ed-index-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ed-index-label {
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.ed-index-arrow {
  color: var(--content-secondary);
  font-size: 16px;
  transition: transform .2s, color .15s;
}

.ed-index-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--content-primary);
}

.ed-index-excerpt {
  color: var(--content-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.ed-index-by {
  color: var(--content-secondary);
  font-size: 12px;
  margin-top: 4px;
}

.ed-back-btn {
  background: none;
  border: none;
  color: var(--content-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
  transition: color .15s;
  margin-bottom: 4px;
}

.ed-back-btn:hover { color: var(--content-primary); }

/* ── EDITORIALES ────────────────────────────────────────── */
.bt-ed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  overflow: hidden;
}

.bt-ed-card {
  padding: 40px 36px;
  border-right: 1px solid var(--content-terciary);
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: pointer;
  transition: background-color .2s;
}

.bt-ed-card:last-child { border-right: none; }
.bt-ed-card:hover { background-color: var(--hover); }
.bt-ed-card:hover .bt-ed-read { color: var(--content-primary); }

.bt-ed-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bt-ed-label {
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.bt-ed-read {
  color: var(--content-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: color .15s;
}

.bt-ed-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--content-primary);
}

.bt-ed-excerpt {
  color: var(--content-secondary);
  font-size: 14px;
  line-height: 1.65;
  flex: 1;
}

.bt-ed-meta {
  display: flex;
  gap: 8px;
  color: var(--content-secondary);
  font-size: 12px;
  margin-top: auto;
}

/* ── ARGUMENTOS ─────────────────────────────────────────── */
.bt-arg-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  overflow: hidden;
}

.bt-arg-card {
  padding: 36px 32px;
  border-right: 1px solid var(--content-terciary);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background-color .2s;
}

.bt-arg-card:last-child { border-right: none; }
.bt-arg-card:hover { background-color: var(--hover); }

.bt-arg-num {
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.bt-arg-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--content-primary);
}

.bt-arg-card p {
  color: var(--content-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.bt-arg-open-btn {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--content-terciary);
  color: var(--content-secondary);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 100px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  font-family: var(--font-body);
}

.bt-arg-open-btn:hover {
  color: var(--content-primary);
  border-color: var(--content-secondary);
}

.bt-quien-works-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bt-quien-works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  overflow: hidden;
}

.bt-quien-work-card {
  padding: 24px 24px;
  border-right: 1px solid var(--content-terciary);
  border-bottom: 1px solid var(--content-terciary);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background-color .2s;
}

.bt-quien-work-card:hover { background-color: var(--hover); }
.bt-quien-work-card:nth-child(4n) { border-right: none; }
.bt-quien-work-card:nth-child(5),
.bt-quien-work-card:nth-child(6),
.bt-quien-work-card:nth-child(7),
.bt-quien-work-card:nth-child(8) { border-bottom: none; }

.bt-quien-work-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.bt-quien-work-client {
  color: var(--content-primary);
  font-size: 15px;
  font-weight: 600;
}

.bt-quien-work-tag {
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.bt-quien-work-tagline {
  color: var(--content-secondary);
  font-size: 13px;
  font-style: italic;
}

.bt-quien-more-clients {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bt-pricing-wrapper { width: 300px; }
}


@media (max-width: 900px) {
  .bootcamp-menu { display: none; }
  .bt-pricing-wrapper { display: none; }
  .bt-hero { padding: 60px 32px 48px; min-height: auto; }
  .bt-section { padding: 60px 32px; }
  .bt-footer { padding: 32px; }
  .bt-boost-wrap { grid-template-columns: 1fr; }
  .bt-phases-grid { grid-template-columns: 1fr; }
  .bt-engines-grid { grid-template-columns: 1fr; }
  .bt-diff-grid { grid-template-columns: 1fr; }
  .bt-sec-herramientas { overflow: visible !important; }
  .bt-cap-strip-outer { margin-left: 0; width: 100%; overflow-x: visible; }
  .bt-capitulos-grid { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; padding-left: 0; padding-right: 0; transform: none !important; gap: 12px; }
  .bt-cap-wrapper { width: 100% !important; min-width: unset !important; }
  .bt-capitulo-card { width: 100%; min-width: unset; }
  .bt-sec-herramientas .bt-capitulo-card { height: 466px; }
  .bt-cap-intro { display: none; }
  .bt-stats-row { grid-template-columns: 1fr 1fr; }
  .bt-wrapper-comentarios { flex-direction: column; }
  .bt-container-testimonios { width: 100%; border-left: none !important; padding-left: 0 !important; }
  .bt-nota-nums { grid-template-columns: 1fr; }
  .bt-ed-grid { grid-template-columns: 1fr; }
  .bt-ed-card { border-right: none; border-bottom: 1px solid var(--content-terciary); }
  .bt-ed-card:last-child { border-bottom: none; }
  .bt-arg-preview-grid { grid-template-columns: 1fr; }
  .bt-arg-card { border-right: none; border-bottom: 1px solid var(--content-terciary); }
  .bt-arg-card:last-child { border-bottom: none; }
  .bt-quien-grid { grid-template-columns: 1fr; }
  .bt-quien-timeline { grid-template-columns: 1fr 1fr; }
  .bt-quien-works-grid { grid-template-columns: 1fr 1fr; }
  .bt-quien-work-card:nth-child(4n) { border-right: 1px solid var(--content-terciary); }
  .bt-quien-work-card:nth-child(2n) { border-right: none; }
  .bt-quien-work-card:nth-child(5),
  .bt-quien-work-card:nth-child(6) { border-bottom: 1px solid var(--content-terciary); }
  .bt-quien-work-card:nth-child(7),
  .bt-quien-work-card:nth-child(8) { border-bottom: none; }
  .bt-quien-more-clients { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 600px) {
  .bt-display { letter-spacing: -2px; }
  .bt-hero-cta-buttons { flex-wrap: wrap; }
  .bt-stats-row { grid-template-columns: 1fr; }
  .navbar-inner { padding: 0 20px; }
  .bt-quien-timeline { grid-template-columns: 1fr; }
  .bt-quien-works-grid { grid-template-columns: 1fr; }
  .bt-quien-work-card { border-right: none !important; }
  .bt-quien-work-card:last-child { border-bottom: none; }
}

@media (max-width: 540px) {
  .bt-capitulos-grid { grid-template-columns: 1fr; }
}

/* ── HAMBURGER / MOBILE NAV ─────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 36px;
  height: 36px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--content-primary);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
  transform-origin: center;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu dropdown */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 86px;
  left: 0;
  right: 0;
  background: var(--background);
  border-bottom: 1px solid var(--content-terciary);
  flex-direction: column;
  padding: 20px 24px 28px;
  gap: 4px;
  z-index: 99;
}

.nav-mobile-menu.open { display: flex; }

.nav-mobile-item {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  color: var(--content-secondary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 0;
  text-align: left;
  transition: color .15s;
}
.nav-mobile-item:hover { color: var(--brand-primary); }

.nav-mobile-cta {
  display: block;
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  background: var(--brand-primary);
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 10px;
  text-align: center;
  transition: opacity .15s;
}
.nav-mobile-cta:hover { opacity: .85; }

@media (max-width: 1200px) {
  .nav-center      { display: none; }
  .nav-cta         { display: none; }
  .nav-cta-outline { display: none; }
  .nav-user-area   { display: none !important; }
  .nav-hamburger   { display: flex; }
  .bt-display { font-size: clamp(72px, 16vw, 120px); letter-spacing: -3px; }
}

/* ── TEST: sin líneas visibles ──────────────────────────── */
* { border-color: transparent !important; }
.nav-cta-outline { border-color: #5B62A8 !important; }

/* ── CARD OVERLAY INTERNA ───────────────────────────────── */
/* .co-content, .co-spacer removed — fn pages are now regular app pages */

.co-fn-banner {
  height: calc(100vh - 86px);
  position: relative;
  z-index: 5;           /* paints above sibling sections so title overflow is visible */
  overflow: visible;    /* title can float below the colored zone */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 40px 56px;
  box-sizing: border-box;
}
.co-fn-banner-title {
  font-family: var(--font-display);
  font-size: clamp(72px, 9vw, 140px);
  font-weight: 600;
  color: #ffffff;
  line-height: 0.92;
  letter-spacing: -3px;
  margin: 0;
  pointer-events: none;
  will-change: transform, color, opacity;
}
.co-fn-banner-cta {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 100px;
  padding: 14px 28px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.co-fn-banner-cta:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.7);
}
@media (max-width: 600px) {
  .co-fn-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}
.co-fn-topbar-btn {
  flex-shrink: 0;
  background: var(--fn-color);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: opacity .2s;
  white-space: nowrap;
}
.co-fn-topbar-btn:hover { opacity: 0.82; }

.co-fn-page {
  --fn-color: #D85535;
  background: var(--background);
}

.co-hero-sec {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px 60px;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  border-bottom: 1px solid var(--content-terciary);
}

.co-fn-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fn-color);
  margin-bottom: 16px;
  display: block;
}

.co-fn-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -2px;
  color: var(--fn-color);
  margin-bottom: 24px;
}

.co-fn-sub {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  color: var(--content-primary);
  margin-bottom: 16px;
  line-height: 1.35;
  letter-spacing: -0.4px;
}

.co-fn-desc {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 400;
  color: var(--content-secondary);
  line-height: 1.5;
  letter-spacing: -0.2px;
}

/* Diagnóstico Integral — badges (costo / demos restantes) */
.co-diag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.co-diag-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--content-secondary);
  background: var(--hover);
  border: 1px solid var(--content-terciary);
  padding: 6px 14px;
  border-radius: 100px;
}
.co-diag-badge--demo {
  color: #fff;
  background: var(--fn-color);
  border-color: transparent;
}

/* Para quién es — profiles grid */
.co-for-whom-intro {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--content-secondary);
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 600px;
}
.co-profiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--content-terciary);
  border: 1px solid var(--content-terciary);
}
.co-profile-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  background: var(--background);
}
.co-profile-role {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
  color: var(--fn-color);
  letter-spacing: -0.1px;
}
.co-profile-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--content-secondary);
  margin: 0;
}
@media (max-width: 900px) {
  .co-profiles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .co-profiles-grid { grid-template-columns: 1fr; }
}

.co-how-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fn-color);
  margin-bottom: 16px;
  display: block;
}

.co-how-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  overflow: hidden;
}

.co-how-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--content-terciary);
  transition: background-color .2s;
}

.co-how-step:last-child { border-bottom: none; }
.co-how-step:hover { background: var(--hover); }

.co-how-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--fn-color);
  line-height: 1.2;
  flex-shrink: 0;
  width: 32px;
  opacity: 0.3;
}

.co-how-text {
  font-size: 14px;
  color: var(--content-secondary);
  line-height: 1.65;
  padding-top: 2px;
}

.co-section-block {
  border-bottom: 1px solid var(--content-terciary);
}
.co-section-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 64px 40px;
  box-sizing: border-box;
}

.co-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fn-color);
  margin-bottom: 10px;
  display: block;
}

.co-section-heading {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--content-primary);
  margin-bottom: 36px;
  line-height: 1.05;
}

.co-analyze-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  overflow: hidden;
}

.co-analyze-card {
  padding: 28px 24px;
  border-right: 1px solid var(--content-terciary);
  border-bottom: 1px solid var(--content-terciary);
  transition: background-color .2s;
}

.co-analyze-card:nth-child(3n) { border-right: none; }
.co-analyze-card:nth-last-child(-n+3) { border-bottom: none; }
.co-analyze-card:hover { background: var(--hover); }

.co-analyze-card h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--fn-color);
  margin-bottom: 14px;
  line-height: 1.1;
}

.co-analyze-card ul { list-style: none; }

.co-analyze-card ul li {
  font-size: 13px;
  color: var(--content-secondary);
  line-height: 1.55;
  padding: 5px 0 5px 14px;
  position: relative;
  border-top: 1px solid var(--content-terciary);
}

.co-analyze-card ul li:first-child { border-top: none; }

.co-analyze-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fn-color);
  opacity: 0.6;
}

.co-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.co-outputs-list {
  list-style: none;
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  overflow: hidden;
}

.co-outputs-list li {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--content-secondary);
  border-bottom: 1px solid var(--content-terciary);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background-color .2s;
}

.co-outputs-list li:last-child { border-bottom: none; }
.co-outputs-list li:hover { background: var(--hover); }

.co-outputs-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fn-color);
  flex-shrink: 0;
}

.co-dims-list { display: flex; flex-direction: column; gap: 18px; }

.co-dim { display: flex; flex-direction: column; gap: 7px; }

.co-dim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.co-dim-name { font-size: 13px; color: var(--content-secondary); }

.co-dim-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--fn-color);
}

.co-dim-track {
  height: 3px;
  background: var(--content-terciary);
  border-radius: 2px;
  overflow: hidden;
}

.co-dim-fill {
  height: 100%;
  background: var(--fn-color);
  border-radius: 2px;
}

.co-pros-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.co-pros-list li {
  font-size: 15px;
  color: var(--content-secondary);
  line-height: 1.55;
  padding-left: 24px;
  position: relative;
}

.co-pros-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--fn-color);
  font-size: 13px;
  top: 2px;
}

.co-cases-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.co-case-tag {
  font-size: 13px;
  color: var(--content-secondary);
  background: var(--tag-pill-bg);
  border: 1px solid var(--content-terciary);
  padding: 8px 14px;
  border-radius: 100px;
  line-height: 1.4;
}

.co-cta-sec {
  background: #1A1410;
  padding: 100px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ── Related notes section (fn pages) ───────────────────── */
.co-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 32px;
  border: 1px solid var(--content-terciary);
}
.co-related-card {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  background: var(--hover);
  transition: background .2s, color .2s;
  text-decoration: none;
}
.co-related-card:hover {
  background: var(--fn-color, var(--brand-primary));
}
.co-related-card:hover .co-related-arrow {
  transform: translateX(4px);
  color: #fff;
}
.co-related-card:hover .co-related-label,
.co-related-card:hover .co-related-title,
.co-related-card:hover .co-related-excerpt,
.co-related-card:hover .co-related-by {
  color: rgba(255,255,255,.9);
}
.co-related-card:hover .co-related-label,
.co-related-card:hover .co-related-by {
  color: rgba(255,255,255,.6);
}
.co-related-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.co-related-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--content-terciary);
}
.co-related-arrow {
  font-size: 16px;
  color: var(--content-terciary);
  transition: transform .2s, color .2s;
}
.co-related-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.4px;
  line-height: 1.2;
  color: var(--content-primary);
}
.co-related-excerpt {
  font-size: 13px;
  line-height: 1.6;
  color: var(--content-secundary);
  flex: 1;
}
.co-related-by {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--content-terciary);
}
@media (max-width: 700px) {
  .co-related-grid { grid-template-columns: 1fr; }
}

/* ── Fn prev/next pagination ─────────────────────────────── */
.co-fn-pagination {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 260px;
  border-top: 1px solid var(--content-terciary);
}
.co-fn-pag-item {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 40px 48px;
  border: none;
  cursor: pointer;
  overflow: hidden;
  background: var(--hover);
  transition: background .25s;
}
.co-fn-pag-item:hover { background: var(--pag-color); }
.co-fn-pag-prev { border-right: 1px solid var(--content-terciary); }
.co-fn-pag-dir, .co-fn-pag-num, .co-fn-pag-title { transition: color .25s; }
.co-fn-pag-dir   { color: var(--content-primary); }
.co-fn-pag-num   { color: var(--content-primary); }
.co-fn-pag-title { color: var(--content-primary); }
.co-fn-pag-item:hover .co-fn-pag-dir   { color: rgba(255,255,255,.55); }
.co-fn-pag-item:hover .co-fn-pag-num   { color: rgba(255,255,255,.75); }
.co-fn-pag-item:hover .co-fn-pag-title { color: #fff; }
.co-fn-pag-watermark { display: none; }
.co-fn-pag-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
  text-align: left;
}
.co-fn-pag-next .co-fn-pag-content { text-align: right; margin-left: auto; }
.co-fn-pag-dir {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--content-primary);
}
.co-fn-pag-num {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--content-primary);
}
.co-fn-pag-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 600;
  letter-spacing: -.5px;
  line-height: 1.15;
  color: var(--content-primary);
  max-width: 260px;
}
@media (max-width: 600px) {
  .co-fn-pagination { grid-template-columns: 1fr; height: auto; }
  .co-fn-pag-item { height: 160px; }
  .co-fn-pag-next .co-fn-pag-content { text-align: left; margin-left: 0; }
  .co-fn-pag-watermark { font-size: 120px; }
}

.co-cta-inner { max-width: 560px; }

.co-cta-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fn-color);
  margin-bottom: 20px;
  display: block;
}

.co-cta-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -2px;
  line-height: 1.0;
  margin-bottom: 16px;
}

.co-cta-text {
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin-bottom: 40px;
}

.co-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--fn-color);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 100px;
  text-decoration: none;
  transition: opacity .2s;
}
.co-cta-btn:hover { opacity: 0.82; }

/* .co-header-actions, .co-hdr-cta, .co-hdr-cta-outline, .co-hdr-hamburger,
   #co-overlay-menu, .co-menu-cta, .co-menu-link, .co-menu-sep removed
   — overlay nav replaced by regular main navbar */

/* border-color overrides for interna elements */
.co-hero-sec,
.co-section-block,
.co-how-list, .co-how-step,
.co-analyze-grid, .co-analyze-card, .co-analyze-card ul li,
.co-outputs-list, .co-outputs-list li,
.co-dim-track, .co-case-tag { border-color: var(--content-terciary) !important; }

@media (max-width: 1040px) {
  /* overlay header rules removed — no longer needed */
  .co-hero-sec { grid-template-columns: 1fr; padding: 48px 24px 48px; gap: 40px; }
  .co-section-inner { padding: 48px 24px; }
  .co-analyze-grid { grid-template-columns: 1fr; }
  .co-analyze-card:nth-child(3n) { border-right: none; }
  .co-analyze-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--content-terciary); }
  .co-analyze-card:last-child { border-bottom: none; }
  .co-two-col { grid-template-columns: 1fr; gap: 40px; }
  .co-cta-sec { padding: 64px 24px; }
}

/* ── PRICING SECTION ────────────────────────────────────── */
.bt-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 48px;
}
.bt-pricing-grid .bt-cap-wrapper,
.bt-pricing-grid .bt-capitulo-card {
  width: 100%;
}

.bt-cap-price-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 28px 28px;
  gap: 24px;
}

.bt-cap-price-number {
  font-family: var(--font-display);
  font-size: clamp(42px, 3.8vw, 56px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -2px;
}

.bt-cap-price-unit {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.5;
}

.bt-cap-price-period {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-top: 8px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.bt-cap-price-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bt-cap-price-features li {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.68);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.bt-cap-price-features li::before {
  content: '→';
  color: var(--cap-color, rgba(255,255,255,0.4));
  flex-shrink: 0;
  font-size: 11px;
  margin-top: 1px;
}

.bt-cap-price-features li.feature-inherit {
  color: rgba(255,255,255,0.38);
  font-style: italic;
}

.bt-cap-price-features li.bt-cap-price-note {
  margin-top: 4px;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.45);
  font-size: 12px;
  font-style: italic;
}
.bt-cap-price-features li.bt-cap-price-note::before {
  content: '';
  display: none;
}

.bt-cap-price-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #111111;
  background: var(--cap-color, #D85535);
  border: none;
  padding: 9px 18px;
  border-radius: 7px;
  text-decoration: none;
  transition: opacity .15s;
  cursor: pointer;
  width: fit-content;
}
.bt-cap-price-cta:hover { opacity: .82; }

.bt-pricing-card .bt-cap-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.precios-page-wrap .bt-cap-wrapper,
.precios-page-wrap .bt-capitulo-card {
  width: 100%;
  min-width: unset;
}

.bt-cap-price-plan {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-top: 18px;
}

.bt-cap-price-enterprise {
  font-family: var(--font-display);
  font-size: clamp(42px, 3.8vw, 56px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.0;
  letter-spacing: -1.5px;
}

@media (max-width: 1100px) {
  .bt-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bt-pricing-grid { grid-template-columns: 1fr; }
}

/* ── APP PAGES (section navigation) ─────────────────────── */
.app-page {
  min-height: calc(100vh - 86px);
  padding-top: 24px;
  background: var(--background);
}
/* Function internal page: no top padding, banner starts flush */
#page-fn {
  padding-top: 0;
}
.page-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px 80px;
}
.breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--content-secondary);
  margin-bottom: 48px;
}
/* Sticky topbar — line + breadcrumb, applies to all inner pages */
.nota-topbar {
  position: sticky;
  top: 86px;
  z-index: 15;
  background: var(--background);
  margin-top: -24px; /* flush against navbar — cancels app-page padding-top */
  margin-bottom: 40px;
}
.nota-topbar-line {
  height: 2px;
  background: #5B62A8;
  max-width: 1312px;
  margin: 0 auto;
}
.nota-topbar .breadcrumb-bar {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 64px;
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .nota-topbar .breadcrumb-bar { padding: 14px 24px; }
}
.bc-home {
  color: #5B62A8;
  cursor: pointer;
  font-weight: 500;
  transition: opacity .15s;
}
.bc-home:hover { opacity: .7; }
.bc-sep { color: var(--content-terciary); }
.bc-current { color: var(--content-primary); font-weight: 500; }
.bc-link { color: #5B62A8; cursor: pointer; font-weight: 500; transition: opacity .15s; }
.bc-link:hover { opacity: .7; }

/* Nota / Doc article page */
#nota-page-content {
  max-width: 760px;
  margin: 0 auto;
}
.nota-page-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.05;
  color: var(--content-primary);
  margin: 0 0 20px;
  text-wrap: balance;
}
.nota-page-by {
  font-size: 14px;
  color: var(--content-secondary);
  margin: 0 0 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--content-terciary);
}

/* Breadcrumb sticky bar — direct child of co-fn-page (block flow) */
.co-hero-bc {
  position: sticky;
  top: 86px;
  z-index: 100;
  background: var(--background);
  margin-top: 420px;
  padding-bottom: 20px;
}
.co-hero-bc-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.co-hero-bc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.co-hero-bc::before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--fn-color);
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .co-hero-bc-inner { padding: 0 24px; }
}
.co-page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--content-secondary);
}
.co-bc-home {
  color: var(--fn-color);
  cursor: pointer;
  font-weight: 500;
  transition: opacity .15s;
}
.co-bc-home:hover { opacity: .7; }
.co-bc-sep { color: var(--content-terciary); }
.co-bc-current { color: var(--content-primary); font-weight: 500; }

/* Herramientas page intro */
.fn-page-intro {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: var(--content-primary);
  margin: 0;
  width: 100%;
  margin-top: 16px;
}

/* ── Tools tabs: Herramientas / Diagnósticos ─────────────── */
.tools-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 32px 0 0;
  padding: 4px;
  border: 1.5px solid var(--content-terciary);
  border-radius: 100px;
}
.tools-tab {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--content-secondary);
  background: transparent;
  border: none;
  border-radius: 100px;
  padding: 9px 22px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.tools-tab:hover { color: var(--content-primary); }
.tools-tab.active {
  background: var(--content-primary);
  color: var(--background);
}

/* 4-col grid — herramientas page */
.fn-page-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.fn-page-grid .bt-cap-wrapper,
.fn-page-grid .bt-capitulo-card {
  width: 100%;
  min-width: unset;
}

/* Editoriales page */
.ed-page-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.ed-index-section-label {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--content-terciary);
  padding-top: 24px;
  border-top: 1px solid var(--content-terciary);
  margin-top: 8px;
}

/* Precios page — same grid as fn-page-grid (herramientas) */
.precios-page-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 40px;
}
@media (max-width: 1100px) {
  .precios-page-wrap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .precios-page-wrap { grid-template-columns: 1fr; }
}

/* Acerca de — subsections */
.ac-subsection { margin-top: 80px; }
.ac-subsection-label { color: var(--content-secondary); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 32px; }

/* Como funciona — steps */
.ac-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--content-terciary);
  border: 1px solid var(--content-terciary);
}
.ac-how-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  background: var(--background);
}
.ac-how-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--brand-primary);
}
.ac-how-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  color: var(--content-primary);
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.ac-how-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--content-secondary);
  margin: 0;
}

/* Ventajas — benefits grid */
.ac-ventajas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--content-terciary);
  border: 1px solid var(--content-terciary);
}
.ac-ventaja-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  background: var(--background);
}
.ac-ventaja-title {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 600;
  color: var(--content-primary);
  letter-spacing: -0.2px;
}
.ac-ventaja-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--content-secondary);
  margin: 0;
}

@media (max-width: 900px) {
  .ac-how-grid { grid-template-columns: repeat(2, 1fr); }
  .ac-ventajas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .ac-how-grid, .ac-ventajas-grid { grid-template-columns: 1fr; }
}

/* Active nav item */
.nav-item.nav-active,
.nav-mobile-item.nav-active { color: #5B62A8 !important; }
.bt-menu-bootcamp.nav-active { color: var(--brand-primary); font-weight: 600; }

@media (max-width: 900px) {
  .page-wrap { padding: 40px 24px 60px; }
  .fn-page-grid { grid-template-columns: repeat(2, 1fr); }
  .ed-page-list { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .fn-page-grid { grid-template-columns: 1fr; }
}

/* ── APP LOADER ─────────────────────────────────────────── */
#app-loader {
  position: fixed;
  inset: 0;
  background: var(--background);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  z-index: 9999;
  transition: opacity .6s ease, visibility .6s ease;
}
#app-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.loader-shape {
  opacity: 0;
  flex-shrink: 0;
  animation: loaderIn .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.loader-shape:nth-child(1) { animation-delay: .00s; }
.loader-shape:nth-child(2) { animation-delay: .10s; }
.loader-shape:nth-child(3) { animation-delay: .20s; }
.loader-shape:nth-child(4) { animation-delay: .30s; }
.loader-shape:nth-child(5) { animation-delay: .40s; }
.loader-shape svg {
  display: block;
  animation: loaderFloat 3s ease-in-out infinite;
}
.loader-shape:nth-child(1) svg { animation-delay: 0.0s; }
.loader-shape:nth-child(2) svg { animation-delay: 0.5s; }
.loader-shape:nth-child(3) svg { animation-delay: 1.0s; }
.loader-shape:nth-child(4) svg { animation-delay: 1.5s; }
.loader-shape:nth-child(5) svg { animation-delay: 2.0s; }
@keyframes loaderIn {
  from { opacity: 0; transform: scale(.55) translateY(14px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}
@keyframes loaderFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
.loader-brand {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--content-secondary);
  opacity: 0;
  animation: loaderIn .5s cubic-bezier(.34,1.56,.64,1) .55s forwards;
}
/* Activar animaciones de los gráficos sin hover */
#app-loader .cap-tri-group { animation: tri-scroll 2s linear infinite; }
#app-loader .cap-hex       { animation: hex-float 1.6s ease-in-out infinite; }
#app-loader .cap-hex:nth-of-type(2) { animation-delay: .22s; }
#app-loader .cap-hex:nth-of-type(3) { animation-delay: .44s; }
#app-loader .cap-ring      { animation: ring-fade 2.2s ease-in-out infinite; }
#app-loader .cap-ring:nth-of-type(2) { animation-delay: .4s; }
#app-loader .cap-ring:nth-of-type(3) { animation-delay: .8s; }
#app-loader .cap-ring:nth-of-type(4) { animation-delay: 1.2s; }
#app-loader .cap-dot-group { animation: dot-scroll 2.4s linear infinite; }
#app-loader .cap-diag      { animation: diag-slide 1.8s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════
   INSIGHTS® — ANALYSIS LAUNCHER + REPORT SYSTEM
   ══════════════════════════════════════════════════════════ */

/* ── Launcher form ───────────────────────────────────────── */
.co-fn-launcher { background: var(--fn-color); }
.co-launcher-inner {
  max-width: 1300px; margin: 0 auto;
  padding: 80px 40px; box-sizing: border-box;
}
.co-launcher-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.65);
  display: block; margin-bottom: 10px;
}
.co-launcher-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px); font-weight: 600;
  color: #ffffff; letter-spacing: -1.5px; line-height: 1.0;
  margin-bottom: 8px;
}
.co-launcher-sub {
  color: rgba(255,255,255,.65); font-size: 15px; margin-bottom: 40px;
}
.co-launcher-form-grid {
  display: grid;
  grid-template-columns: 1fr 160px 1fr auto;
  gap: 12px; align-items: end;
}
.co-launcher-field { display: flex; flex-direction: column; gap: 6px; }
.co-launcher-label {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.65);
}
.co-launcher-input,
.co-launcher-select {
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.25) !important;
  border-radius: 12px; padding: 14px 16px;
  font-family: var(--font-body); font-size: 15px; color: #ffffff;
  outline: none; transition: border-color .2s, background .2s;
  width: 100%; -webkit-appearance: none; appearance: none;
}
.co-launcher-input::placeholder { color: rgba(255,255,255,.4); }
.co-launcher-input:focus,
.co-launcher-select:focus {
  border-color: rgba(255,255,255,.85) !important;
  background: rgba(255,255,255,.18);
}
.co-launcher-select option { color: #000; background: #fff; }
.co-launcher-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
  padding-top: 12px;
  padding-bottom: 12px;
}
.co-launcher-field--full {
  grid-column: 1 / -1;
}
.co-launcher-btn {
  background: #ffffff; color: var(--fn-color);
  border: none; border-radius: 12px;
  padding: 0 28px; height: 52px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: opacity .2s, transform .15s;
  white-space: nowrap;
}
.co-launcher-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.co-launcher-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Progress state ──────────────────────────────────────── */
.co-fn-progress { background: var(--fn-color); display: none; min-height: 100svh; }
.co-progress-inner {
  width: 100%; max-width: 1300px;
  padding: 0 40px; box-sizing: border-box;
  display: flex; flex-direction: column;
}
.co-progress-fn {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 14px;
}
@keyframes phaseSpin {
  to { transform: rotate(360deg); }
}
.co-progress-top-row {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 24px;
  margin-bottom: 28px;
}
.co-progress-brand {
  font-family: var(--font-display);
  font-size: clamp(32px,5vw,64px); font-weight: 600;
  color: #ffffff; letter-spacing: -2px; line-height: 1;
}
.co-progress-pct {
  font-family: var(--font-display);
  font-size: clamp(32px,5vw,64px); font-weight: 500;
  color: rgba(255,255,255,.9);
  letter-spacing: -2px; line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.co-progress-bar-track {
  width: 100%; height: 1px;
  background: rgba(255,255,255,.2);
  position: relative;
  margin-bottom: 16px;
}
.co-progress-bar-fill {
  position: absolute; left: 0; top: 0;
  height: 1px; width: 0%; background: #ffffff;
  /* transition handled by JS RAF — no CSS transition */
}
.co-progress-bottom-row {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 32px;
  padding-top: 4px;
}

/* Live task log */
.co-progress-tasks {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 0;
  overflow: hidden;
  max-height: 156px; /* 6 rows × 26px */
}
.co-task-item {
  display: flex; align-items: center; gap: 10px;
  height: 26px; flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 400;
  color: rgba(255,255,255,.35);
  animation: taskIn .25s ease forwards;
  overflow: hidden;
}
.co-task-item.is-active {
  color: rgba(255,255,255,.85);
}
.co-task-item.is-done {
  color: rgba(255,255,255,.28);
}
.co-task-dot {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0; background: rgba(255,255,255,.2);
}
.co-task-item.is-active .co-task-dot {
  background: #fff;
  animation: dotPulse 1.4s ease-in-out infinite;
}
.co-task-item.is-done .co-task-dot {
  background: rgba(255,255,255,.3);
}
@keyframes dotPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.3; transform:scale(.6); }
}
@keyframes taskIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

.co-progress-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.co-progress-minimize {
  flex-shrink: 0;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.85);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  padding: 10px 22px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s;
  margin-top: 2px;
}
.co-progress-minimize:hover { background: rgba(255,255,255,.2); }

/* ── Floating analysis widget ────────────────────────────── */
.analysis-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 8500;
  width: 280px;
  background: var(--brand-primary);
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .3s;
}
.analysis-widget:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  filter: brightness(1.08);
}
.aw-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.analysis-widget.aw-done .aw-spinner-sm {
  border: 2px solid rgba(255,255,255,.5);
  border-top-color: #fff;
  animation: none;
}
.aw-fn-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aw-pct {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  flex-shrink: 0;
}
.aw-bar-track {
  height: 3px;
  background: rgba(255,255,255,.25);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.aw-bar-fill {
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  transition: width .4s ease;
}
.aw-label {
  font-size: 11px;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aw-spinner-sm {
  width: 14px; height: 14px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  animation: phaseSpin .7s linear infinite;
}
.analysis-widget.aw-done .aw-fn-name,
.analysis-widget.aw-done .aw-pct,
.analysis-widget.aw-done .aw-label { color: #fff; }

/* ── Mis Insights status badges ─────────────────────────── */
.mi-report-status {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  flex-shrink: 0;
}
.mi-report-status.completed {
  background: rgba(43,122,75,.12);
  color: #2B7A4B;
}
.mi-report-status.processing {
  background: rgba(232,181,53,.15);
  color: #b8860b;
}
.mi-report-status.incomplete {
  background: rgba(192,112,95,.12);
  color: #c2705f;
}
.mi-report-status.cancelled {
  background: rgba(120,120,120,.12);
  color: #777;
}
.mi-retomar-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.co-progress-cancel {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.6);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 400;
  padding: 10px 22px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  margin-top: 2px;
}
.co-progress-cancel:hover {
  border-color: rgba(255,255,255,.6);
  color: #ffffff;
}
.co-progress-warning {
  text-align: center;
  font-size: 12.5px;
  color: rgba(255,255,255,.45);
  margin-top: 18px;
}

/* ── Report ──────────────────────────────────────────────── */
.co-fn-report { display: none; }

#page-report { padding-top: 0; }

/* Report page breadcrumb strip */
.rp-bc-strip {
  background: var(--fn-color);
  padding: 0 40px;
}
.rp-bc-strip .breadcrumb-bar {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px 0;
  margin-bottom: 0;
  color: rgba(255,255,255,.6);
}
.rp-bc-strip .bc-home {
  color: rgba(255,255,255,.75);
}
.rp-bc-strip .bc-sep {
  color: rgba(255,255,255,.3);
}
.rp-bc-strip .bc-current {
  color: #ffffff;
}

.co-report-header-band {
  background: var(--fn-color); padding: 56px 40px 48px;
}
.co-report-header-inner {
  max-width: 1300px; margin: 0 auto;
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.co-report-fn-eyebrow {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 12px;
}
.co-report-brand {
  font-family: var(--font-display);
  font-size: clamp(48px,6vw,80px); font-weight: 600;
  color: #ffffff; line-height: .95; letter-spacing: -2px;
}
.co-report-meta { color: rgba(255,255,255,.65); font-size: 14px; margin-top: 10px; }
.co-report-btns { display: flex; gap: 10px; flex-shrink: 0; }
.co-report-btn {
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.4) !important;
  border-radius: 10px; padding: 10px 20px;
  color: #ffffff; font-family: var(--font-body);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .2s;
}
.co-report-btn:hover { background: rgba(255,255,255,.25); }

/* Report sidebar layout */
.co-report-layout {
  display: flex;
  align-items: flex-start;
  max-width: 1300px;
  margin: 0 auto;
}
.co-report-sidebar {
  width: 232px;
  flex-shrink: 0;
  position: sticky;
  top: 86px;
  max-height: calc(100vh - 86px);
  overflow-y: auto;
  border-right: 1px solid var(--content-terciary);
  padding: 40px 0 64px;
}
.co-sidenav-label {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--content-secondary);
  padding: 0 20px 14px; opacity: 0.55;
}
.co-report-main { flex: 1; min-width: 0; }
.co-rnav-item {
  display: block; width: 100%; text-align: left;
  padding: 11px 24px 11px 20px;
  font-size: 13px; font-weight: 500;
  color: var(--content-secondary); cursor: pointer;
  border: none; border-left: 3px solid transparent;
  background: none; font-family: var(--font-body);
  line-height: 1.4; box-sizing: border-box;
  transition: color .15s, background .15s;
}
.co-rnav-item:hover {
  color: var(--content-primary);
  background: var(--hover);
}
.co-rnav-item.active {
  color: var(--fn-color); font-weight: 600;
  border-left-color: var(--fn-color);
  background: color-mix(in srgb, var(--fn-color) 7%, transparent);
}
.co-rnav-foco { color: var(--fn-color) !important; opacity: 0.75; }
.co-rnav-foco.active { opacity: 1; }
.co-mobile-select-wrap { display: none; }
@media (max-width: 768px) {
  .co-report-layout { flex-direction: column; }
  .co-report-sidebar { display: none; }
  .co-mobile-select-wrap {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--content-terciary);
    background: var(--background);
    position: sticky; top: 86px; z-index: 20;
  }
  .co-mobile-select {
    width: 100%; padding: 10px 36px 10px 14px;
    font-size: 14px; font-family: var(--font-body);
    font-weight: 500; color: var(--content-primary);
    background: var(--background);
    border: 1.5px solid var(--content-terciary);
    border-radius: 10px;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer; box-sizing: border-box;
  }
}

/* Report modules */
.co-rmod { border-bottom: 1px solid var(--content-terciary); }
.co-rmod-inner {
  padding: 64px 56px 72px; box-sizing: border-box;
}
.co-rmod-eyebrow {
  font-size: 22px; font-weight: 700; letter-spacing: -.3px;
  color: var(--fn-color); font-family: var(--font-display);
  display: block; margin-bottom: 40px; line-height: 1.2;
}

/* Conclusión Ejecutiva — persistent block above module tabs */
.co-conclusion-band {
  border-bottom: 3px solid var(--fn-color);
  background: var(--background);
}
.co-conclusion-inner {
  max-width: 1300px; margin: 0 auto;
  padding: 64px 40px 56px; box-sizing: border-box;
}
.co-conclusion-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fn-color);
  display: block; margin-bottom: 32px;
}
@media (max-width: 600px) {
  .co-conclusion-inner { padding: 40px 20px 36px; }
}

/* Markdown typography inside report */
.co-rmd h2 {
  font-family: var(--font-display);
  font-size: clamp(26px,2.8vw,40px); font-weight: 700;
  letter-spacing: -.9px; line-height: 1.1;
  margin: 64px 0 18px; color: var(--content-primary);
}
.co-rmd h2:first-child { margin-top: 0; }
.co-rmd h3 {
  font-size: 20px; font-weight: 600; letter-spacing: -.2px;
  margin: 40px 0 12px; color: var(--content-primary);
}
.co-rmd h4 {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--content-secondary); margin: 28px 0 8px;
}
.co-rmd p {
  font-size: 15px; line-height: 1.75;
  color: var(--content-primary); margin-bottom: 16px;
}
.co-rmd ul, .co-rmd ol { margin: 0 0 16px 22px; }
.co-rmd li {
  font-size: 15px; line-height: 1.65;
  color: var(--content-primary); margin-bottom: 6px;
}
.co-rmd strong { font-weight: 600; color: var(--content-primary); }
.co-rmd em { font-style: italic; color: var(--content-secondary); }
.co-rmd table {
  width: 100%; border-collapse: collapse; margin: 24px 0;
  font-size: 14px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--content-terciary);
}
.co-rmd th {
  background: var(--fn-color); color: #ffffff;
  padding: 12px 16px; text-align: left;
  font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em;
}
.co-rmd td {
  padding: 11px 16px; border-bottom: 1px solid var(--content-terciary);
  color: var(--content-primary); vertical-align: top;
}
.co-rmd tr:last-child td { border-bottom: none; }
.co-rmd tr:nth-child(even) td { background: var(--hover); }
.co-rmd blockquote {
  border-left: 3px solid var(--fn-color);
  padding: 12px 20px; background: var(--hover);
  margin: 16px 0; border-radius: 0 10px 10px 0;
}
.co-rmd blockquote p {
  font-style: italic; color: var(--content-secondary);
  margin: 0; font-size: 14px;
}
.co-rmd hr {
  border: none; height: 1px;
  background: var(--content-terciary); margin: 40px 0;
}
.co-rmd code {
  background: var(--hover); padding: 2px 6px;
  border-radius: 4px; font-size: 13px;
}

/* ── Diagnóstico Integral — recomendaciones (fin del Roadmap) ── */
.diag-recs-section {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--content-terciary);
}
.diag-recs-section + .diag-recs-section { margin-top: 48px; }
.diag-recs-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: -.2px;
  color: var(--content-primary); margin: 0 0 8px;
}
.diag-recs-note {
  font-size: 14px; line-height: 1.6;
  color: var(--content-secondary); margin: 0 0 24px;
  max-width: 640px;
}
.diag-recs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.diag-rec-card {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: var(--hover);
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .15s;
}
.diag-rec-card:hover {
  background: var(--rec-color, var(--brand-primary));
  border-color: var(--rec-color, var(--brand-primary));
  transform: translateY(-2px);
}
.diag-rec-card:hover .diag-rec-num,
.diag-rec-card:hover .diag-rec-name,
.diag-rec-card:hover .diag-rec-arrow { color: #ffffff; }
.diag-rec-card:hover .diag-rec-num { color: rgba(255,255,255,.7); }
.diag-rec-num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--rec-color, var(--brand-primary));
}
.diag-rec-name {
  flex: 1;
  font-size: 14px; font-weight: 500;
  color: var(--content-primary);
}
.diag-rec-arrow {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--content-secondary);
  transition: transform .15s ease, color .15s ease;
}
.diag-rec-card:hover .diag-rec-arrow { transform: translateX(3px); }

.diag-recs-grid--kit {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.diag-rec-kit-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px;
  background: var(--hover);
  border: 1px solid var(--content-terciary);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .15s;
}
.diag-rec-kit-card:hover {
  background: var(--cat-color, var(--brand-primary));
  border-color: var(--cat-color, var(--brand-primary));
  transform: translateY(-2px);
}
.diag-rec-kit-card:hover .kit-card-cat,
.diag-rec-kit-card:hover .diag-rec-kit-title,
.diag-rec-kit-card:hover .diag-rec-kit-desc { color: #ffffff; }
.diag-rec-kit-card:hover .kit-card-cat { color: rgba(255,255,255,.7); }
.diag-rec-kit-card:hover .diag-rec-kit-desc { color: rgba(255,255,255,.85); }
.diag-rec-kit-title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  color: var(--content-primary); margin: 0;
}
.diag-rec-kit-desc {
  font-size: 14px; line-height: 1.5;
  color: var(--content-secondary); margin: 0;
}

/* Error toast */
.co-error-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1A1410; color: #fff; padding: 12px 22px;
  border-radius: 10px; font-size: 14px; z-index: 2000;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  transition: opacity .5s ease; pointer-events: none;
}

/* ── Analysis overlay (full-color fullscreen loading) ────── */
#analysis-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
}
#analysis-overlay.active { display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Responsive launcher */
@media (max-width: 860px) {
  .co-launcher-form-grid { grid-template-columns: 1fr 1fr; }
  .co-launcher-btn { grid-column: 1 / -1; height: 48px; }
}
@media (max-width: 600px) {
  .co-launcher-form-grid { grid-template-columns: 1fr; }
}

/* ── FAQ section (fn pages) ──────────────────────────────── */
.co-faq-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.co-faq-item {
  background: var(--hover);
  border-radius: 12px;
  padding: 0 20px;
}
.co-faq-item:last-child { border-bottom: none; }
.co-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--content-primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.co-faq-q::-webkit-details-marker { display: none; }
.co-faq-q::after { display: none; }
.co-faq-q-text { flex: 1; }
.co-faq-chevron {
  flex-shrink: 0;
  color: var(--content-terciary);
  transition: transform .25s cubic-bezier(.4,0,.2,1), color .15s;
}
.co-faq-item[open] .co-faq-chevron {
  transform: rotate(180deg);
  color: var(--brand-primary);
}
.co-faq-a {
  font-size: 14px;
  line-height: 1.7;
  color: var(--content-secundary);
  padding: 0 0 18px;
  max-width: 700px;
  border-top: 1px solid var(--content-terciary);
  margin-top: 0;
}

/* ── Admin panel ─────────────────────────────────────────── */
.admin-loading {
  color: var(--content-secundary);
  font-size: 14px;
  padding: 40px 0;
}
.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 32px;
  font-size: 14px;
}
.admin-users-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1A1410;
  padding: 0 16px 14px 0;
  border-bottom: 2px solid #1A1410;
}
.admin-users-table th:last-child { text-align: right; }
.admin-users-table td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid #e8e8e6;
  color: #1A1410;
  font-size: 14px;
  vertical-align: middle;
}
.admin-users-table tr:hover td { background: #f5f4f2; }
.admin-users-table tr { cursor: pointer; }
.admin-plan-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.admin-plan-badge.free     { background: rgba(0,0,0,.06); color: var(--content-secundary); }
.admin-plan-badge.on_demand{ background: rgba(232,181,53,.15); color: #b8860b; }
.admin-plan-badge.standard { background: rgba(91,98,168,.12); color: #5B62A8; }
.admin-plan-badge.pro      { background: rgba(43,122,75,.12); color: #2B7A4B; }
.admin-plan-badge.super_admin { background: #1A1410; color: #fff; }
.admin-back-btn {
  background: none;
  border: none;
  color: var(--content-secundary);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 24px;
  display: block;
}
.admin-back-btn:hover { color: var(--content-primary); }
.admin-user-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.admin-user-email {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -1px;
}

/* ── Admin toggle switch ─────────────────────────────────── */
.admin-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.admin-toggle input { display: none; }
.admin-toggle-track {
  width: 40px; height: 22px;
  background: #c8c4be;
  border-radius: 100px;
  position: relative;
  transition: background .25s;
  flex-shrink: 0;
}
.admin-toggle input:checked + .admin-toggle-track {
  background: var(--brand-primary);
}
.admin-toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
/* thumb is INSIDE .admin-toggle-track — correct selector */
.admin-toggle input:checked + .admin-toggle-track .admin-toggle-thumb {
  transform: translateX(18px);
}
.admin-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: #7A7570;
  transition: color .2s;
  white-space: nowrap;
}
.admin-toggle:has(input:checked) .admin-toggle-label {
  color: var(--brand-primary);
}
/* Alignment: last column left-aligned */
.admin-users-table td:last-child { text-align: left; }
.admin-users-table th:last-child { text-align: left; }

/* ── Mis Insights — group-by selector ────────────────────── */
.mi-groupby-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mi-groupby-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--content-secondary);
  white-space: nowrap;
}
.mi-groupby-select {
  height: 42px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--content-primary);
  background: var(--background);
  border: 1.5px solid var(--content-terciary);
  border-radius: 8px;
  padding: 0 32px 0 14px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

/* ── Mis Insights — sections (group-by site / report) ────── */
.mi-section { margin-bottom: 28px; }
.mi-section:last-child { margin-bottom: 0; }
.mi-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -8px 10px -8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.mi-section-header:hover { background: var(--hover); }
.mi-section--site .mi-section-header { background: var(--hover); }
.mi-section--site .mi-section-header:hover { background: var(--content-terciary); }
.mi-section--site .mi-section-icon,
.mi-section--site .mi-section-count { background: var(--background); }
.mi-section-chevron {
  flex-shrink: 0;
  color: var(--content-secondary);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.mi-section-header.collapsed .mi-section-chevron { transform: rotate(-90deg); }
.mi-section-header.collapsed { margin-bottom: 0; }
.mi-section-cap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}
.mi-section-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hover);
  color: var(--content-secondary);
}
.mi-section-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--content-primary);
  letter-spacing: -0.2px;
  flex: 1;
}
.mi-section-count {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--content-secondary);
  background: var(--hover);
  padding: 3px 10px;
  border-radius: 100px;
}
.mi-section-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1);
}
.mi-section-body.collapsed { grid-template-rows: 0fr; }
.mi-section-body-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  min-height: 0;
}
.mi-section-body--nc { margin-bottom: 28px; }

/* ── Mis Insights — grouped history ─────────────────────── */
.mi-group {
  margin-bottom: 4px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--content-terciary);
}
.mi-group .mi-report-item {
  border-bottom: none;
  border-radius: 0;
  background: var(--hover);
  transition: background .2s, color .2s;
}
.mi-group .mi-report-item:hover {
  background: var(--mi-fn-color, var(--brand-primary));
}
.mi-group .mi-report-item:hover .mi-report-fn,
.mi-group .mi-report-item:hover .mi-report-meta { color: rgba(255,255,255,.9); }
.mi-group .mi-report-item:hover .mi-report-arrow,
.mi-group .mi-report-item:hover .mi-report-delete { color: rgba(255,255,255,.7); }

.mi-version-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--brand-primary);
  color: #fff;
  padding: 2px 7px;
  border-radius: 100px;
  vertical-align: middle;
  margin-left: 4px;
}

.mi-demo-badge {
  background: #1A1A1A;
  text-transform: uppercase;
}

/* History toggle — colored background with chevron */
.mi-history-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  background: var(--mi-fn-color, var(--brand-primary));
  color: rgba(255,255,255,.9);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 16px 8px 52px;
  transition: filter .15s;
  text-align: left;
}
.mi-history-toggle:hover { filter: brightness(1.1); }
.mi-history-chevron {
  display: inline-flex;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.mi-history-toggle.open .mi-history-chevron {
  transform: rotate(180deg);
}

/* History list — animated expand */
.mi-history-list {
  padding: 0;
  background: var(--hover);
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  opacity: 0;
}
.mi-history-list.open {
  max-height: 600px;
  opacity: 1;
}
.mi-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 16px;
  cursor: pointer;
  border-top: 1px solid var(--content-terciary);
  background: var(--hover);
  transition: background .2s, color .2s;
}
.mi-history-item:hover {
  background: var(--mi-fn-color, var(--brand-primary));
}
.mi-history-item:hover .mi-history-fn,
.mi-history-item:hover .mi-history-date { color: rgba(255,255,255,.9); }
.mi-history-item:hover .mi-history-arrow { color: rgba(255,255,255,.7); transform: translateX(3px); }
.mi-history-cap {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: .04em;
  flex-shrink: 0;
}
.mi-history-ver {
  font-size: 11px;
  font-weight: 700;
  color: var(--content-terciary);
  width: 24px;
  flex-shrink: 0;
}
.mi-history-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mi-history-fn {
  font-size: 12px;
  font-weight: 600;
  color: var(--content-primary);
}
.mi-history-date {
  font-size: 11px;
  color: var(--content-secundary);
}
.mi-history-arrow {
  font-size: 13px;
  color: var(--content-terciary);
  transition: transform .15s;
}
.mi-history-item:hover .mi-history-arrow { transform: translateX(3px); color: var(--content-primary); }

/* ── Cookie consent banner ───────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid #e2e2e0;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
}
.cookie-banner-inner {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cookie-banner-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--content-secundary);
  margin: 0;
}
.cookie-banner-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.cookie-btn-reject {
  background: none;
  border: 1px solid var(--content-terciary);
  color: var(--content-secundary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s;
}
.cookie-btn-reject:hover { border-color: var(--content-primary); color: var(--content-primary); }
.cookie-btn-accept {
  background: var(--brand-primary);
  border: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: filter .2s;
}
.cookie-btn-accept:hover { filter: brightness(1.1); }
@media (max-width: 600px) {
  .cookie-banner { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* ── iOS PWA install prompt ──────────────────────────────── */
.ios-install-prompt {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  width: calc(100% - 32px);
  max-width: 380px;
}
.ios-install-inner {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ios-install-icon { flex-shrink: 0; }
.ios-install-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ios-install-text strong {
  font-size: 14px;
  font-weight: 700;
  color: #1A1410;
}
.ios-install-text span {
  font-size: 12px;
  color: #7A7570;
  line-height: 1.5;
}
.ios-install-text em { font-style: normal; font-weight: 600; color: #1A1410; }
.ios-install-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #c8c4be;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  line-height: 1;
}
.ios-install-arrow {
  text-align: center;
  font-size: 18px;
  color: #ffffff;
  margin-top: 2px;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* ── Arquitectura de sitio — sitemap tree (fn01 Mód.1, fn03 Mód.2) ── */
.arch-tree { margin: 8px 0 24px; }
.arch-tnode { position: relative; padding: 0 0 0 26px; }
.arch-tnode::before {
  content: ""; position: absolute; left: 9px; top: 0; bottom: 0;
  width: 1.5px; background: var(--content-terciary);
}
.arch-tnode.arch-root { padding-left: 0; }
.arch-tnode.arch-root::before { display: none; }
.arch-titem {
  position: relative; display: flex; align-items: center;
  gap: 10px; padding: 7px 0; flex-wrap: wrap;
}
.arch-tnode:not(.arch-root) > .arch-titem::before {
  content: ""; position: absolute; left: -17px; top: 50%;
  width: 14px; height: 1.5px; background: var(--content-terciary);
}
.arch-tcard {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--content-terciary);
  border-radius: 8px; padding: 7px 14px; font-size: 14px; font-weight: 600;
  color: var(--content-primary);
}
.arch-tcard.arch-lvl0 { background: var(--fn-color); border-color: var(--fn-color); color: #fff; }
.arch-tcard.arch-lvl1 { border-color: var(--fn-color); color: var(--fn-color); }
.arch-tcard.arch-new { border-style: dashed; }
.arch-tcard.arch-ext { background: var(--hover); color: var(--content-secondary); border-color: var(--content-terciary); }
.arch-turl { font-family: monospace; font-size: 11.5px; color: var(--content-secondary); }
.arch-tpill {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; border-radius: 4px; padding: 2px 7px;
}
.arch-tpill.arch-n { background: #E8F6EE; color: #1B7A44; }
.arch-tpill.arch-m { background: #FFF4E0; color: #9A6A00; }
.arch-tpill.arch-x { background: #F1F1F1; color: #777; }
.arch-tpill.arch-r { background: #FDEBEA; color: #B3372C; }
.arch-tree-legend {
  display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 0;
  font-size: 12px; color: var(--content-secondary);
}

/* ── Page transitions ────────────────────────────────────── */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-entering {
  animation: pageEnter .22s cubic-bezier(.4,0,.2,1) forwards;
}