/* ==========================================================================
   CAPABILITIES — 4 features con mockups conceptuales animados
   (Agentic Search · Company Intelligence · People Connect · Market Intelligence)
   Copy y layout en el sistema del sitio; los mockups conservan su estructura
   original con los tokens mapeados a la paleta Latency.
   ========================================================================== */

.caps {
  /* Mapeo de los tokens del componente original a la paleta del sitio */
  --purple: var(--grape);
  --purple-soft: var(--mauve);
  --ink: var(--obsidian);
  --text: var(--lead);
  --muted: var(--steel);
  --line: #e7e3eb;
  --success: #0a9b68;
  --shadow: 0 34px 90px rgba(37, 0, 102, .12);

  position: relative;
  /* 1 cuadro (44px) arriba; sin padding inferior para que la cuadrícula de
     DATA FOUNDATION arranque pegada a la línea de cierre de la última feature */
  padding: 44px var(--sp-2xl) 0;
  background: var(--parchment);
}

.caps__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.caps__header {
  margin-bottom: var(--sp-xl);
}

.caps__headline {
  font-family: 'Manrope', var(--sans);
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--obsidian);
}

.caps__headline em {
  color: var(--grape);
  font-style: normal;
}

.caps__intro {
  max-width: 780px;
  margin-top: var(--sp-md);
  font-family: 'Manrope', var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: -.01em;
  color: var(--lead);
}

.caps__intro strong {
  color: var(--obsidian);
  font-weight: 600;
}

.caps__index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: var(--sp-lg) 0 0;
  padding: 0;
  list-style: none;
}

.caps__index a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Manrope', var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--obsidian);
  text-decoration: none;
}

.caps__index a:hover {
  color: var(--grape);
}

.caps__index span {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--grape);
}

/* ── Panel sticky de cabecera: titular a la izquierda + resumen de las 4
   capabilities en fila a la derecha. Queda fijado bajo la nav mientras se
   recorren las features ── */
.caps__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: 16px 0;
  background: var(--parchment);
  border-bottom: 1px solid var(--sand);
}

.caps__panel .caps__header { margin-bottom: 0; }

.caps__panel .caps__headline { font-size: clamp(1.75rem, 3vw, 2.6rem); }

.caps__panel .caps__intro {
  margin-top: 8px;
  max-width: 560px;
  font-size: .9375rem;
}

.caps__minis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 1051px) {
  .caps__panel {
    position: sticky;
    top: 64px;
    z-index: 10;
  }

  .caps-feature { scroll-margin-top: 250px; }

  /* El borde del panel hace de divisor inicial */
  .caps__features .caps-feature:first-child { border-top: 0; }
}

@media (max-width: 1050px) {
  .caps__panel { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .caps__minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .caps__minis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .caps-mini__inner { padding: 8px 9px; }
}

/* Móvil: las 4 cajas del resumen miden lo mismo aunque el título ocupe una
   o dos líneas */
@media (max-width: 1050px) {
  .caps__minis { grid-auto-rows: 1fr; }
  .caps-mini { height: 100%; }
}


/* Mini-card: borde beam giratorio cuando es la sección activa
   (mismo patrón que .beam-card de Use Cases) */
.caps-mini {
  position: relative;
  display: block;
  padding: 2.5px;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
}

.caps-mini::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(78, 0, 235, 1) 45deg,
    rgba(130, 77, 255, .8) 80deg,
    transparent 120deg,
    transparent 180deg,
    rgba(78, 0, 235, .8) 225deg,
    rgba(130, 77, 255, .55) 260deg,
    transparent 300deg
  );
  opacity: 0;
  transition: opacity 320ms;
  animation: beam-rotate 3s linear infinite;
  animation-play-state: paused;
}

.caps-mini--active::before,
.caps-mini:hover::before {
  opacity: 1;
  animation-play-state: running;
}

.caps-mini--active { box-shadow: 0 6px 20px rgba(78, 0, 235, .17); }

.caps-mini__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  height: 100%;
  padding: 9px 11px;
  border: 1px solid var(--sand);
  border-radius: 10px;
  background: var(--air);
  transition: border-color 200ms;
}

.caps-mini--active .caps-mini__inner,
.caps-mini:hover .caps-mini__inner { border-color: transparent; }

.caps-mini__num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--lavender);
  border-radius: 50%;
  background: var(--air);
  color: var(--grape);
  font-family: 'Manrope', var(--sans);
  font-size: .625rem;
  font-weight: 700;
}

.caps-mini__title {
  font-family: 'Manrope', var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--obsidian);
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .caps-mini::before { animation: none; opacity: 0 !important; }
  .caps-mini--active .caps-mini__inner { border-color: var(--amethyst); }
}

/* ── Feature rows (alternadas) ── */
.caps-feature {
  scroll-margin-top: 64px;
  /* nota: en ≥1051px se amplía más abajo por el panel sticky */
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr);
  gap: clamp(38px, 5vw, 72px);
  align-items: center;
  padding: var(--sp-2xl) 0;
  border-top: 1px solid var(--sand);
}

.caps__features .caps-feature:first-child { padding-top: clamp(28px, 3vw, 44px); }

.caps-feature:last-of-type {
  border-bottom: 1px solid var(--sand);
}

.caps-feature--flip {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
}

.caps-feature--flip .caps-feature__copy { order: 2; }
.caps-feature--flip .caps-stage { order: 1; }

.caps-feature__copy {
  max-width: 560px;
}

.caps-feature__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--sp-md);
  color: var(--steel);
  font-family: 'Manrope', var(--sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.caps-feature__meta span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--lavender);
  border-radius: 50%;
  background: var(--air);
  color: var(--grape);
}

.caps-feature__title {
  margin-bottom: var(--sp-md);
  font-family: 'Manrope', var(--sans);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.03em;
  color: var(--obsidian);
}

.caps-feature__lead {
  font-family: 'Manrope', var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: -.01em;
  color: var(--lead);
}

.caps-feature__lead strong {
  color: var(--obsidian);
  font-weight: 600;
}

.caps-caps {
  margin-top: var(--sp-lg);
}

.caps-caps__label {
  margin-bottom: 14px;
  color: var(--grape);
  font-family: 'Manrope', var(--sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.caps-caps__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.caps-caps__list li {
  position: relative;
  padding-left: 15px;
  font-family: 'Manrope', var(--sans);
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--lead);
}

.caps-caps__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amethyst);
}

.caps-caps__list strong {
  color: var(--obsidian);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   MOCKUPS — portados del componente original (latency_features v12)
   ══════════════════════════════════════════════════════════════════════ */

.caps-stage { position: relative; min-width: 0; }
.caps-stage:before { content: ""; position: absolute; inset: 14% 9% -3%; border-radius: 50%; background: rgba(78, 0, 235, .08); filter: blur(72px); pointer-events: none; }
.browser { position: relative; z-index: 2; overflow: hidden; border: 1px solid rgba(31, 19, 47, .12); border-radius: 24px; background: #fff; box-shadow: var(--shadow); transform: translateY(26px); opacity: 0; transition: transform 1.19s cubic-bezier(.2, .8, .2, 1), opacity .98s ease; font-family: 'Manrope', var(--sans); }
.caps-feature.in-view .browser { transform: translateY(0); opacity: 1; }
.browser-chrome { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #fbfafc; }
.dots { display: flex; gap: 6px; } .dots i { width: 8px; height: 8px; border-radius: 50%; background: #d8d4dd; }
.secure { color: #9d97a3; font-size: .67rem; font-weight: 650; }
.app-topbar { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 10px 16px; color: #fff; background: linear-gradient(90deg, var(--grape) 0%, var(--indigo) 100%); }
.app-logo { font-size: .76rem; font-weight: 780; }
.app-search { display: flex; align-items: center; flex: 1; min-width: 0; min-height: 38px; padding: 0 13px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px; background: rgba(24, 0, 72, .34); }
.search-icon { position: relative; flex: 0 0 auto; width: 15px; height: 15px; margin-right: 9px; border: 1.6px solid rgba(255, 255, 255, .82); border-radius: 50%; }
.search-icon:after { content: ""; position: absolute; right: -4px; bottom: -3px; width: 5px; height: 1.5px; background: rgba(255, 255, 255, .82); transform: rotate(45deg); }
.typing-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(255, 255, 255, .96); font-size: .72rem; }
.caret { width: 1px; height: 15px; margin-left: 2px; background: #fff; animation: blink 1.05s steps(1) infinite; }
.avatar { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .23); }
@keyframes blink { 50% { opacity: 0; } }
.typing-text.is-typing:after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -.08em; background: currentColor; animation: blink .77s steps(1) infinite; }

/* primitivas conceptuales */
.concept-canvas { position: relative; min-height: 440px; padding: 16px; background: #f5f4f7; overflow: hidden; }
.soft-grid { position: absolute; inset: 0; opacity: .7; background-image: linear-gradient(rgba(93, 83, 111, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 83, 111, .05) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.skeleton { height: 7px; border-radius: 999px; background: #ece8f0; }
.skeleton.purple { background: #cbbdff; } .skeleton.green { background: #aee5d2; }

/* ── Agentic Search ── */
.search-canvas { min-height: 0; padding: 14px 16px; }
.search-query-card { position: relative; z-index: 2; margin: 4px auto 9px; max-width: 620px; padding: 13px 16px; border: 1px solid rgba(78, 0, 235, .14); border-radius: 18px; background: #fff; box-shadow: 0 18px 44px rgba(49, 28, 79, .08); }
.query-line { display: flex; align-items: flex-start; min-height: 56px; color: #2f2936; font-size: 1.55rem; line-height: 1.45; font-weight: 620; }
.query-caret { width: 1.5px; height: 1.25em; margin: 2px 0 0 2px; background: var(--grape); animation: blink 1.05s steps(1) infinite; }
.search-orbit { position: relative; height: 16px; margin: 0 auto 4px; max-width: 560px; }
.scan-line { position: absolute; left: 0; right: 0; top: 20px; height: 1px; background: linear-gradient(90deg, transparent, rgba(78, 0, 235, .28), transparent); }
.scan-dot { position: absolute; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--grape); box-shadow: 0 0 0 7px rgba(78, 0, 235, .09); opacity: 0; }
/* Bola de barrido desactivada: se solapaba con las cajas de fases del loader */
.scan-line, .scan-dot { display: none; }
.searching .scan-dot { opacity: 1; animation: scan 2.17s ease-in-out infinite; }
@keyframes scan { 0% { left: 3%; } 50% { left: 94%; } 100% { left: 3%; } }
.result-stack { display: grid; gap: 8px; position: relative; z-index: 2; }
.concept-result { display: grid; grid-template-columns: 42px minmax(120px, 1.4fr) minmax(70px, .55fr) minmax(70px, .55fr) 48px; align-items: center; gap: 11px; min-height: 48px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; opacity: 0; transform: translateY(12px) scale(.985); transition: opacity .63s ease, transform .63s ease; }
.concept-result.visible { opacity: 1; transform: translateY(0) scale(1); }
.abstract-logo { position: relative; width: 34px; height: 34px; border-radius: 10px; background: var(--mauve); overflow: hidden; }
.abstract-logo:before, .abstract-logo:after { content: ""; position: absolute; border-radius: 99px; background: var(--grape); }
.abstract-logo:before { width: 16px; height: 5px; left: 9px; top: 9px; } .abstract-logo:after { width: 10px; height: 10px; right: 7px; bottom: 7px; opacity: .35; }
.line-group { display: grid; gap: 6px; } .metric-lines { display: grid; gap: 5px; } .metric-lines .skeleton:first-child { width: 74%; } .metric-lines .skeleton:last-child { width: 46%; }
.score-ring { display: grid; width: 34px; height: 34px; place-items: center; border: 3px solid #d9ceff; border-top-color: var(--grape); border-radius: 50%; color: var(--grape); font-size: .5rem; font-weight: 760; }

.ai-search-loader { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; max-width: 620px; min-height: 48px; margin: 0 auto 15px; padding: 9px 13px; border: 1px solid rgba(78, 0, 235, .13); border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 24px rgba(49, 28, 79, .05); opacity: 0; transform: translateY(5px); transition: opacity .42s ease, transform .42s ease; }
.searching .ai-search-loader { opacity: 1; transform: translateY(0); }
.ai-loader-spinner { flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid #e4dcfb; border-top-color: var(--grape); border-radius: 50%; animation: aiSpin 1.19s linear infinite; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
.ai-loader-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ai-loader-stage { color: var(--deep-royal); font-size: .64rem; font-weight: 800; letter-spacing: .01em; }
.ai-loader-detail { overflow: hidden; color: #847895; font-size: .53rem; white-space: nowrap; text-overflow: ellipsis; }
.ai-loader-steps { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.ai-loader-step { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #ded8e7; transition: background .35s ease, transform .35s ease, box-shadow .35s ease; }
.ai-loader-step.complete { background: #b59cf5; }
.ai-loader-step.active { background: var(--grape); transform: scale(1.18); box-shadow: 0 0 0 4px rgba(78, 0, 235, .09); }
.ai-loader-copy.stage-swap { animation: stageSwap .35s ease both; }
@keyframes stageSwap { from { opacity: .15; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Company Intelligence ── */
.company-concept { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 570px; background: #f5f4f7; }
.concept-sidebar { display: flex; flex-direction: column; gap: 7px; padding: 16px 10px; border-right: 1px solid var(--line); background: #fbfafc; }
.nav-pill { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transition: background .42s ease, transform .42s ease; }
.nav-pill:before { content: ""; flex: 0 0 auto; width: 11px; height: 11px; border: 1.5px solid #9891a1; border-radius: 3px; transition: border-color .42s ease, background .42s ease; }
.nav-pill:after { content: ""; width: 42px; height: 6px; border-radius: 99px; background: #e9e5ed; transition: background .42s ease, width .42s ease; }
.nav-pill.active { background: var(--mauve); transform: translateX(2px); }
.nav-pill.active:before { border-color: var(--grape); background: var(--grape); }
.nav-pill.active:after { width: 48px; background: #c8b7ff; }
.company-main { position: relative; min-width: 0; padding: 16px; background: #f5f4f7; overflow: hidden; }
.company-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.company-id { display: flex; align-items: center; gap: 10px; } .company-mark { position: relative; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 11px; background: #fff; } .company-mark:before { content: ""; position: absolute; inset: 10px; border: 2px solid var(--grape); border-radius: 7px; transform: rotate(14deg); }
.header-lines { display: grid; gap: 6px; } .header-lines .skeleton:first-child { width: 120px; } .header-lines .skeleton:last-child { width: 78px; }
.header-chip { width: 62px; height: 24px; border-radius: 999px; background: var(--mauve); }
.company-view-stage { position: relative; min-height: 462px; }
.company-view { position: absolute; inset: 0; display: grid; align-content: start; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.992); }
.company-view.active { position: relative; opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition-delay: 0s; }
.ci-panel { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ci-panel-head { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 11px; border-bottom: 1px solid var(--line); }
.ci-panel-head:before { content: ""; width: 74px; height: 6px; border-radius: 99px; background: #dcd7e2; }
.ci-panel-head:after { content: ""; width: 38px; height: 6px; border-radius: 99px; background: #eeeaf2; }
.ci-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ci-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* overview */
.overview-layout { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 10px; }
.overview-left, .overview-right { display: grid; gap: 10px; align-content: start; }
.overview-copy { padding: 12px; } .overview-copy .skeleton { margin-bottom: 8px; } .overview-copy .skeleton:nth-child(1) { width: 94%; } .overview-copy .skeleton:nth-child(2) { width: 86%; } .overview-copy .skeleton:nth-child(3) { width: 66%; }
.overview-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .overview-tags i { display: block; width: 54px; height: 18px; border-radius: 5px; background: var(--mauve); } .overview-tags i:nth-child(2) { width: 72px; } .overview-tags i:nth-child(3) { width: 48px; background: #e4f7ef; } .overview-tags i:nth-child(4) { width: 62px; }
.overview-score { padding: 12px; } .overview-score-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; } .overview-score-card { display: grid; place-items: center; gap: 7px; padding: 9px 4px; border: 1px solid var(--line); border-radius: 9px; background: #fcfbfd; } .overview-score-card .skeleton { width: 30px; height: 5px; }
.ci-ring { position: relative; width: 37px; height: 37px; border-radius: 50%; background: conic-gradient(var(--grape) 0 var(--p), #e7e2ef var(--p) 100%); } .ci-ring:after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.overview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 12px; } .overview-metric { padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fcfbfd; } .overview-metric .skeleton:nth-child(1) { width: 42%; height: 5px; } .overview-metric .skeleton:nth-child(2) { width: 72%; height: 11px; margin-top: 8px; background: #c7b6ff; } .overview-metric .skeleton:nth-child(3) { width: 38%; height: 5px; margin-top: 6px; background: #bce8d8; }
.overview-bars { position: relative; display: flex; align-items: flex-end; gap: 7px; height: 118px; padding: 12px 12px 10px; border-top: 1px solid var(--line); }
/* Eje X propio: las barras apoyaban directamente en el borde del panel */
.overview-bars::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 10px; height: 1.5px; background: #b3adc2; } .overview-bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: #c6b7ff; transform-origin: bottom; }
.company-view.active .overview-bars i { animation: ciBarGrow 1.68s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ciBarGrow { from { transform: scaleY(.08); opacity: .2; } to { transform: scaleY(1); opacity: 1; } }
.overview-registry { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px 16px; padding: 12px; } .overview-registry div { display: grid; gap: 6px; } .overview-registry .skeleton:first-child { width: 38%; height: 5px; } .overview-registry .skeleton:last-child { width: 72%; height: 7px; }

/* assessment */
.assessment-scorecard { padding: 14px; } .assessment-rings { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; } .assessment-item { display: grid; place-items: center; gap: 7px; }
.assessment-gauge { position: relative; width: 58px; height: 31px; overflow: hidden; }
.assessment-gauge:before { content: ""; position: absolute; left: 4px; right: 4px; top: 3px; height: 49px; border: 5px solid #e4e0e9; border-bottom-color: transparent; border-radius: 50%; }
.assessment-gauge:after { content: ""; position: absolute; left: 4px; top: 3px; width: 50px; height: 50px; border: 5px solid var(--accent, #16a66e); border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(var(--angle, -10deg)); }
.assessment-item:nth-child(3n+2) { --accent: #73a3ff; } .assessment-item:nth-child(3n) { --accent: #c6a525; } .assessment-item .skeleton { width: 34px; height: 5px; }
.scatter-card { height: 188px; padding: 12px; }
.scatter-plot { position: relative; height: 135px; margin-top: 7px; border-left: 1px solid #d8d3de; border-bottom: 1px solid #d8d3de; background: linear-gradient(rgba(78, 0, 235, .04), rgba(78, 0, 235, .04)); }
.scatter-plot:before, .scatter-plot:after { content: ""; position: absolute; background: rgba(78, 0, 235, .11); }
.scatter-plot:before { left: 44%; top: 0; bottom: 0; width: 1px; } .scatter-plot:after { left: 0; right: 0; top: 55%; height: 1px; }
.scatter-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--dot, #25a875); opacity: .58; transform: scale(0); }
.company-view.active .scatter-dot { animation: dotIn .77s ease forwards; animation-delay: var(--d); }
.scatter-card:nth-child(2) .scatter-dot { --dot: #7a49ef; } .scatter-card:nth-child(3) .scatter-dot { --dot: #d4b10f; }
@keyframes dotIn { to { transform: scale(1); } }

/* ratios */
.ratio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ratio-card { height: 218px; }
.ratio-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); gap: 10px; height: 183px; padding: 11px; }
/* Eje X con más presencia: se confundía con el borde del panel */
.ratio-chart { position: relative; min-width: 0; border-bottom: 1.5px solid #b3adc2; background: repeating-linear-gradient(to top, transparent 0 30px, #eeeaf2 31px 32px); }
.ratio-bars { display: flex; align-items: flex-end; gap: 8px; height: 100%; padding: 26px 8px 0; } .ratio-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: #6a9ff7; transform-origin: bottom; }
.ratio-line { position: absolute; inset: 16px 8px 10px; } .ratio-line svg { width: 100%; height: 100%; overflow: visible; } .ratio-line path { fill: none; stroke: #326fff; stroke-width: 2; } .ratio-line .benchmark { stroke: #b6b0bc; stroke-dasharray: 4 4; stroke-width: 1.2; }
.ratio-waterfall { display: flex; align-items: center; gap: 5px; height: 100%; padding: 15px 4px; } .ratio-waterfall i { flex: 1; height: var(--h); align-self: flex-end; background: #24bd7a; } .ratio-waterfall i:nth-child(3n) { background: #ef8c82; } .ratio-waterfall i:last-child { background: #5e94ed; }
/* Las filas reparten la altura disponible: así la última línea de la tabla
   queda exactamente al nivel del eje X del chart de al lado */
.ratio-table { display: grid; grid-auto-rows: minmax(0, 1fr); overflow: hidden; }
.ratio-row { display: grid; grid-template-columns: 1.2fr .55fr .55fr .55fr; gap: 5px; align-items: center; min-height: 0; border-bottom: 1px solid #eeeaf2; }
.ratio-row span { height: 5px; border-radius: 99px; background: #e5e1e9; } .ratio-row span:first-child { width: 76%; } .ratio-row span:not(:first-child) { width: 60%; justify-self: end; } .ratio-row:nth-child(2n) span:first-child { width: 58%; }

/* ownership */
.ownership-view { min-height: 452px; } .ownership-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 11px; }
.ownership-tabs { display: flex; gap: 6px; } .ownership-tabs i { display: block; width: 58px; height: 23px; border-radius: 7px; background: #eeeaf2; } .ownership-tabs i:first-child { background: var(--mauve); box-shadow: inset 0 0 0 1px rgba(78, 0, 235, .14); }
.ownership-tools { display: flex; gap: 6px; } .ownership-tools i { display: block; width: 28px; height: 23px; border-radius: 7px; background: #f0edf3; }
.tree-canvas { position: relative; height: 390px; overflow: hidden; background: linear-gradient(#fff, #fdfcff); }
.tree-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tree-link { fill: none; stroke: #cfc7dc; stroke-width: 1.5; } .tree-link.primary { stroke: var(--grape); stroke-width: 2; } .tree-link.secondary { stroke: #e56bb5; }
.tree-node { position: absolute; width: 112px; height: 40px; border: 1px solid #d8d0e4; border-radius: 9px; background: #fff; box-shadow: 0 6px 16px rgba(39, 24, 60, .06); opacity: 0; transform: translateY(8px); }
.company-view.active .tree-node { animation: nodeIn .7s ease forwards; animation-delay: var(--d); }
.tree-node:before { content: ""; position: absolute; left: 9px; top: 9px; width: 22px; height: 22px; border-radius: 6px; background: var(--mauve); }
.tree-node:after { content: ""; position: absolute; left: 39px; right: 10px; top: 12px; height: 6px; border-radius: 99px; background: #ded8e7; box-shadow: 0 12px 0 #eeeaf2; }
.tree-node.hot { border-color: #d2bcff; box-shadow: 0 0 0 3px rgba(78, 0, 235, .06); } .tree-node.pink { border-color: #f0bfdc; } .tree-node.pink:before { background: #ffe8f5; }
@keyframes nodeIn { to { opacity: 1; transform: translateY(0); } }
.tn1 { left: 42%; top: 10%; --d: .07s; } .tn2 { left: 15%; top: 34%; --d: .21s; } .tn3 { right: 14%; top: 34%; --d: .308s; } .tn4 { left: 6%; top: 61%; --d: .42s; } .tn5 { left: 42%; top: 61%; --d: .532s; } .tn6 { right: 5%; top: 61%; --d: .644s; } .tn7 { left: 27%; top: 82%; --d: .77s; } .tn8 { right: 25%; top: 82%; --d: .896s; }

/* strategy */
.strategy-top { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: 10px; }
.strategy-chart { padding: 13px; }
.strategy-bars { display: flex; align-items: flex-end; gap: 12px; height: 146px; padding: 18px 9px 0; border-bottom: 1.5px solid #b3adc2; background: repeating-linear-gradient(to top, transparent 0 32px, #eeeaf2 33px 34px); }
.strategy-bars i { flex: 1; height: var(--h); background: #91b8f8; } .strategy-bars i:nth-child(2) { background: #ef8c82; } .strategy-bars i:nth-child(3) { background: #42d59a; }
.factor-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 13px; } .factor-list { display: grid; gap: 10px; }
.factor-row { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.factor-icon { width: 18px; height: 18px; border-radius: 50%; background: #bff1df; position: relative; }
.factor-icon:after { content: ""; position: absolute; left: 6px; top: 4px; width: 5px; height: 8px; border-right: 1.5px solid #168c63; border-bottom: 1.5px solid #168c63; transform: rotate(42deg); }
.factor-row:nth-child(4n) .factor-icon { background: #e9e6ed; } .factor-row:nth-child(4n) .factor-icon:after { left: 5px; top: 8px; width: 8px; height: 1px; border: 0; background: #8b8491; transform: none; }
.factor-lines { display: grid; gap: 5px; } .factor-lines .skeleton:first-child { width: 82%; height: 6px; } .factor-lines .skeleton:last-child { width: 96%; height: 5px; }
.swot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.swot-column { min-height: 212px; padding: 10px; border-radius: 9px; background: #eaf8f2; }
.swot-column:nth-child(2) { background: #fff0ef; } .swot-column:nth-child(3) { background: #edf4ff; } .swot-column:nth-child(4) { background: #fff8df; }
.swot-head { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.swot-icon { width: 17px; height: 17px; border-radius: 50%; background: #20bd7a; }
.swot-column:nth-child(2) .swot-icon { background: #ef5b4f; } .swot-column:nth-child(3) .swot-icon { background: #4c8cf5; } .swot-column:nth-child(4) .swot-icon { background: #e6bd08; }
.swot-head .skeleton { width: 45px; height: 6px; }
.swot-entry { padding: 8px 0; border-top: 1px solid rgba(70, 60, 80, .08); } .swot-entry:first-of-type { border-top: 0; }
.swot-entry .skeleton:first-child { width: 84%; height: 6px; } .swot-entry .skeleton:nth-child(2) { width: 95%; height: 5px; margin-top: 6px; } .swot-entry .skeleton:nth-child(3) { width: 72%; height: 5px; margin-top: 5px; }
.company-view.active .ci-animate { animation: ciFade .77s ease both; }
@keyframes ciFade { from { opacity: .15; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ── People Connect ── */
.people-concept { position: relative; min-height: 540px; padding: 18px; background: #f5f4f7; }
.people-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; }
.network-panel { position: relative; min-height: 455px; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.network-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Todas las conexiones quedan siempre marcadas; el pulso animado va encima */
.network-line { stroke: #cfc6e0; stroke-width: 1.4; stroke-dasharray: 5 6; }
.network-flow {
  stroke: var(--grape);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 20 80;
  stroke-dashoffset: 100;
  animation: netFlow 3.36s linear infinite;
}
.network-flow:nth-of-type(7) { animation-delay: .5s; }
.network-flow:nth-of-type(8) { animation-delay: 1s; }
.network-flow:nth-of-type(9) { animation-delay: 1.5s; }
.network-flow:nth-of-type(10) { animation-delay: 2s; }
@keyframes netFlow { to { stroke-dashoffset: 0; } }
.person-node { position: absolute; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #ded7e7; border-radius: 50%; background: #fff; box-shadow: 0 8px 22px rgba(50, 33, 74, .08); }
.person-node:before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: #c8b9ff; box-shadow: 0 12px 0 5px #eee9ff; }
.person-node.primary { width: 48px; height: 48px; border-color: rgba(78, 0, 235, .3); box-shadow: 0 0 0 8px rgba(78, 0, 235, .07); }
.node-1 { left: 14%; top: 17%; } .node-2 { left: 60%; top: 12%; } .node-3 { left: 70%; top: 47%; } .node-4 { left: 20%; top: 68%; } .node-5 { left: 44%; top: 40%; } .node-6 { left: 51%; top: 74%; }
.role-chip { position: absolute; height: 20px; border-radius: 6px; background: #eeeaf2; }
.role-1 { width: 54px; left: 7%; top: 30%; } .role-2 { width: 64px; right: 8%; top: 25%; } .role-3 { width: 50px; right: 4%; top: 63%; } .role-4 { width: 60px; left: 8%; bottom: 12%; }
.contact-panel { display: grid; gap: 11px; }
.contact-card { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.contact-top { display: flex; align-items: center; gap: 10px; }
.contact-avatar { position: relative; width: 42px; height: 42px; border-radius: 12px; background: var(--mauve); }
.contact-avatar:before { content: ""; position: absolute; left: 14px; top: 8px; width: 13px; height: 13px; border-radius: 50%; background: var(--grape); box-shadow: 0 14px 0 6px #d8ccff; }
.contact-lines { display: grid; gap: 6px; } .contact-lines .skeleton:first-child { width: 112px; } .contact-lines .skeleton:last-child { width: 78px; }
.contact-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 13px; }
.info-chip { height: 54px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fcfbfd; }
.info-chip .skeleton:first-child { width: 35%; height: 5px; } .info-chip .skeleton:last-child { width: 72%; height: 7px; margin-top: 9px; background: #c8b9ff; }
.message-concept { position: relative; min-height: 210px; padding: 14px; border: 1px solid rgba(78, 0, 235, .14); border-radius: 14px; background: var(--mauve); overflow: hidden; }
.message-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.message-head .skeleton:first-child { width: 92px; background: #baabf5; } .message-head .skeleton:last-child { width: 46px; }
.message-lines { display: grid; gap: 10px; }
.message-line { height: 7px; border-radius: 99px; background: #d8cef7; transform-origin: left; transform: scaleX(0); }
.message-line:nth-child(1) { width: 92%; } .message-line:nth-child(2) { width: 84%; } .message-line:nth-child(3) { width: 96%; } .message-line:nth-child(4) { width: 73%; } .message-line:nth-child(5) { width: 58%; }
.send-chip { position: absolute; right: 14px; bottom: 14px; width: 76px; height: 26px; border-radius: 8px; background: var(--grape); }

/* People Connect — vistas dinámicas */
.people-view-stage { position: relative; min-height: 455px; }
.people-view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.994); }
.people-view.active { position: relative; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.people-view-dots { position: absolute; right: 18px; bottom: 18px; z-index: 6; display: flex; gap: 6px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 7px 18px rgba(43, 31, 61, .08); }
.people-view-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #d8d2df; cursor: pointer; transition: width .35s ease, background .35s ease; }
.people-view-dot.active { width: 20px; border-radius: 99px; background: var(--grape); }

.pc-outreach-view { display: grid; grid-template-columns: minmax(118px, .34fr) minmax(0, 1fr); gap: 10px; min-height: 455px; }
.pc-directory, .pc-workspace { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.pc-directory { padding: 10px; }
.pc-directory-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px; border-bottom: 1px solid #eeeaf2; }
.pc-directory-head .skeleton:first-child { width: 54px; height: 6px; } .pc-directory-head .skeleton:last-child { width: 25px; height: 18px; border-radius: 999px; background: var(--mauve); }
.pc-person-list { display: grid; gap: 6px; padding-top: 9px; }
.pc-person-item { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; min-height: 48px; padding: 7px; border: 1px solid transparent; border-radius: 9px; opacity: .55; transform: translateX(-4px); transition: opacity .42s ease, transform .42s ease, border-color .42s ease, background .42s ease; }
.pc-person-item.active { opacity: 1; transform: none; border-color: #d8caff; background: var(--mauve); }
.pc-person-avatar { position: relative; width: 28px; height: 28px; border-radius: 50%; background: #eee9f7; }
.pc-person-avatar:before { content: ""; position: absolute; left: 9px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: #b7a4f3; box-shadow: 0 9px 0 4px #dcd2fa; }
.pc-person-lines { display: grid; gap: 5px; } .pc-person-lines .skeleton:first-child { width: 76%; height: 5px; } .pc-person-lines .skeleton:last-child { width: 51%; height: 4px; }
.pc-workspace { display: grid; grid-template-rows: auto 1fr; padding: 11px; background: #fff; }
.pc-profile-card { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: #fcfbfd; opacity: .25; transform: translateY(-6px) scale(.99); transition: opacity .588s ease, transform .7s cubic-bezier(.2, .8, .2, 1), border-color .56s ease; }
.pc-outreach-view.profile-open .pc-profile-card { opacity: 1; transform: none; border-color: #d9caff; }
.pc-profile-avatar { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--mauve); }
.pc-profile-avatar:before { content: ""; position: absolute; left: 13px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--grape); box-shadow: 0 12px 0 5px #d6c8ff; }
.pc-profile-lines { display: grid; gap: 6px; min-width: 0; flex: 1; } .pc-profile-lines .skeleton:nth-child(1) { width: 96px; background: #c7b6ff; } .pc-profile-lines .skeleton:nth-child(2) { width: 70px; } .pc-profile-lines .skeleton:nth-child(3) { width: 120px; height: 4px; }
.pc-profile-action { width: 52px; height: 22px; border-radius: 7px; background: var(--mauve); }
.pc-compose-card { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; min-height: 0; margin-top: 9px; padding: 11px; border: 1px solid rgba(78, 0, 235, .14); border-radius: 12px; background: #faf8ff; overflow: hidden; }
.pc-compose-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; } .pc-compose-top .skeleton:first-child { width: 72px; background: #c5b5fa; } .pc-compose-top .skeleton:last-child { width: 38px; }
.pc-compose-fields { display: grid; gap: 5px; margin-bottom: 9px; }
.pc-compose-field { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 7px; min-height: 25px; padding: 0 7px; border: 1px solid #e4ddef; border-radius: 7px; background: #fff; }
.pc-compose-field:before { content: ""; width: 15px; height: 4px; border-radius: 99px; background: #d8d2df; } .pc-compose-field .skeleton { height: 5px; width: 48%; background: #cbc0ec; }
.pc-email-body { display: grid; align-content: start; gap: 7px; padding: 9px; border: 1px solid #e5dff0; border-radius: 9px; background: #fff; }
.pc-email-line { height: 6px; border-radius: 99px; background: #d7cdf8; transform: scaleX(0); transform-origin: left; opacity: .45; }
.pc-email-line:nth-child(1) { width: 34%; } .pc-email-line:nth-child(2) { width: 91%; } .pc-email-line:nth-child(3) { width: 84%; } .pc-email-line:nth-child(4) { width: 96%; } .pc-email-line:nth-child(5) { width: 76%; } .pc-email-line:nth-child(6) { width: 52%; }
.pc-outreach-view.writing .pc-email-line { animation: pcWrite .77s ease forwards; animation-delay: var(--d); }
@keyframes pcWrite { to { transform: scaleX(1); opacity: 1; } }
.pc-compose-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.pc-tools { display: flex; gap: 5px; } .pc-tools i { display: block; width: 18px; height: 18px; border-radius: 5px; background: #eee9f5; }
.pc-send-button { position: relative; display: grid; width: 70px; height: 25px; place-items: center; border: 0; border-radius: 8px; background: var(--grape); overflow: hidden; transition: width .49s ease, background .49s ease, transform .35s ease; }
.pc-send-button:before { content: ""; width: 27px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .9); }
.pc-outreach-view.ready .pc-send-button { animation: pcButtonPulse 1.4s ease-in-out infinite; }
@keyframes pcButtonPulse { 50% { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(78, 0, 235, .22); } }
.pc-outreach-view.sending .pc-send-button { width: 30px; border-radius: 50%; animation: none; }
.pc-outreach-view.sending .pc-send-button:before { width: 10px; height: 10px; border: 2px solid rgba(255, 255, 255, .38); border-top-color: #fff; border-radius: 50%; background: transparent; animation: pcSpin .91s linear infinite; }
@keyframes pcSpin { to { transform: rotate(360deg); } }
.pc-outreach-view.sent .pc-send-button { width: 70px; border-radius: 8px; background: #13a873; animation: none; }
.pc-outreach-view.sent .pc-send-button:before { width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; border-radius: 0; background: transparent; transform: rotate(-45deg); }
.pc-sent-ripple { position: absolute; right: 25px; bottom: 21px; width: 18px; height: 18px; border: 1px solid rgba(19, 168, 115, .3); border-radius: 50%; opacity: 0; }
.pc-outreach-view.sent .pc-sent-ripple { animation: pcRipple 1.26s ease-out; }
@keyframes pcRipple { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(4); } }

/* ── Market Intelligence ── */
.market-concept { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 570px; background: #f5f4f7; }
.market-sidebar { display: flex; flex-direction: column; gap: 7px; padding: 16px 10px; border-right: 1px solid var(--line); background: #fbfafc; }
.market-nav { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transition: background .42s ease, transform .42s ease; }
.market-nav:before { content: ""; flex: 0 0 auto; width: 11px; height: 11px; border: 1.5px solid #9891a1; border-radius: 50%; transition: border-color .42s ease, background .42s ease; }
.market-nav:after { content: ""; width: 42px; height: 6px; border-radius: 99px; background: #e9e5ed; transition: background .42s ease, width .42s ease; }
.market-nav:nth-child(2):before { border-radius: 3px; }
.market-nav:nth-child(3):before { border-radius: 2px; transform: rotate(45deg); }
.market-nav:nth-child(4):before { border-radius: 2px; background: linear-gradient(90deg, transparent 42%, #9891a1 43% 57%, transparent 58%); }
.market-nav.active { background: var(--mauve); transform: translateX(2px); }
.market-nav.active:before { border-color: var(--grape); background: var(--grape); }
.market-nav.active:after { width: 48px; background: #c8b7ff; }
.market-main { position: relative; min-width: 0; padding: 16px; background: #f5f4f7; overflow: hidden; }
.market-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.market-heading-lines { display: grid; gap: 6px; } .market-heading-lines .skeleton:first-child { width: 128px; } .market-heading-lines .skeleton:last-child { width: 82px; }
.market-chip { width: 74px; height: 24px; border-radius: 999px; background: var(--mauve); }
.market-view-stage { position: relative; min-height: 462px; }
.market-view { position: absolute; inset: 0; display: grid; align-content: start; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.992); }
.market-view.active { position: relative; opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition-delay: 0s; }
.market-panel { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.market-panel-head { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 11px; border-bottom: 1px solid var(--line); }
.market-panel-head:before { content: ""; width: 72px; height: 6px; border-radius: 99px; background: #dcd7e2; }
.market-panel-head:after { content: ""; width: 54px; height: 20px; border-radius: 7px; background: #f0edf3; }

/* distribución geográfica */
.location-view { grid-template-columns: minmax(0, 1.15fr) minmax(150px, .45fr); gap: 10px; }
.region-map { position: relative; min-height: 430px; padding: 12px; background: linear-gradient(145deg, #eef1f5 0%, #e4e8ee 100%); }
.region-map:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .9), transparent 35%), radial-gradient(circle at 90% 85%, rgba(195, 201, 211, .7), transparent 38%); }
.region-map svg { position: relative; z-index: 1; width: 100%; height: 405px; filter: drop-shadow(0 8px 18px rgba(62, 54, 74, .06)); }
.market-region { stroke: #fff; stroke-width: 2; fill: #f1e9bb; opacity: .92; transition: fill .77s ease, opacity .77s ease, transform .77s ease; transform-origin: center; }
.market-view.active .market-region { animation: regionPulse 5.04s ease-in-out infinite; animation-delay: var(--d); }
.market-region.hot { fill: #f7d943; } .market-region.warm { fill: #edd271; } .market-region.deep { fill: #ad8c00; }
@keyframes regionPulse { 0%, 100% { opacity: .72; transform: scale(.99); } 40%, 65% { opacity: 1; transform: scale(1.015); } }
.map-controls { position: absolute; right: 15px; top: 54px; z-index: 2; display: grid; gap: 1px; padding: 4px; border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(43, 34, 58, .1); }
.map-controls i { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 5px; background: #faf9fb; } .map-controls i:after { content: ""; width: 10px; height: 2px; background: #8d8793; } .map-controls i:first-child:before { content: ""; position: absolute; width: 2px; height: 10px; background: #8d8793; }
.map-legend { position: absolute; left: 17px; bottom: 16px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .94); }
.map-legend .skeleton { width: 52px; height: 5px; }
.legend-scale { display: flex; gap: 2px; } .legend-scale i { width: 9px; height: 8px; border-radius: 2px; background: #f8edab; } .legend-scale i:nth-child(2) { background: #f3df70; } .legend-scale i:nth-child(3) { background: #e8c832; } .legend-scale i:nth-child(4) { background: #af9000; }
.location-side { display: grid; gap: 10px; align-content: start; }
.location-stat { padding: 12px; } .location-stat .skeleton:nth-child(1) { width: 46%; height: 5px; } .location-stat .skeleton:nth-child(2) { width: 72%; height: 12px; margin-top: 10px; background: #c8b7ff; } .location-stat .skeleton:nth-child(3) { width: 38%; height: 5px; margin-top: 7px; background: #bfe8da; }
.location-rank { display: grid; gap: 10px; padding: 12px; }
.location-rank-row { display: grid; grid-template-columns: 18px 1fr 30px; align-items: center; gap: 8px; }
.location-rank-row:before { content: ""; width: 18px; height: 18px; border-radius: 5px; background: var(--mauve); }
.location-rank-row .skeleton { height: 5px; }
.location-rank-row i { height: 6px; border-radius: 99px; background: #c8b7ff; transform-origin: left; transform: scaleX(0); }
.market-view.active .location-rank-row i { animation: marketBarIn 1.12s ease forwards; animation-delay: var(--d); }

/* posicionamiento (burbujas) */
.bubble-view { min-height: 452px; padding: 12px; }
.market-scatter { position: relative; height: 410px; border-left: 1px solid #cfd5dd; border-bottom: 1px solid #cfd5dd; background-image: linear-gradient(to right, transparent calc(20% - 1px), #e3e7ed 20%, transparent calc(20% + 1px)), linear-gradient(to bottom, transparent calc(20% - 1px), #e3e7ed 20%, transparent calc(20% + 1px)); background-size: 20% 20%; overflow: hidden; }
.market-scatter:before, .market-scatter:after { content: ""; position: absolute; z-index: 1; border-color: #7b59ef; border-style: dashed; opacity: .75; }
.market-scatter:before { left: 47%; top: 0; bottom: 0; border-width: 0 0 0 1px; } .market-scatter:after { left: 0; right: 0; top: 47%; border-width: 1px 0 0; }
.bubble-point { position: absolute; z-index: 2; width: var(--s); height: var(--s); left: var(--x); top: var(--y); border-radius: 50%; background: rgba(255, 151, 72, var(--o, .24)); border: 1px solid rgba(244, 136, 49, .15); opacity: 0; transform: scale(.15); }
.bubble-point.focus { background: rgba(255, 139, 45, .82); border-color: rgba(236, 119, 23, .45); box-shadow: 0 0 0 5px rgba(255, 151, 72, .08); }
.market-view.active .bubble-point { animation: bubbleIn .98s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: var(--d); }
@keyframes bubbleIn { to { opacity: 1; transform: scale(1); } }
.scatter-axis-label { position: absolute; z-index: 3; height: 5px; border-radius: 99px; background: #bbb5c3; }
.scatter-axis-label.x { width: 72px; right: 10px; bottom: 9px; } .scatter-axis-label.y { width: 64px; left: -19px; top: 48%; transform: rotate(-90deg); }
.scatter-legend { position: absolute; z-index: 3; left: 45%; bottom: 7px; display: flex; gap: 8px; }
.scatter-legend i { display: block; width: 42px; height: 5px; border-radius: 99px; background: #d8d3df; } .scatter-legend i:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--grape); }

/* crecimiento acumulado */
.growth-view { grid-template-columns: minmax(0, 1.2fr) minmax(180px, .45fr); gap: 10px; }
.growth-chart { padding: 12px; } .growth-svg { width: 100%; height: 395px; overflow: visible; }
.growth-grid-line { stroke: #dfe3e8; stroke-width: 1; stroke-dasharray: 3 5; } .growth-axis { stroke: #9da4ae; stroke-width: 1.2; }
.growth-path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; }
.growth-path.p1 { stroke: #7a50ee; } .growth-path.p2 { stroke: #28b97e; } .growth-path.p3 { stroke: #f1c313; } .growth-path.p4 { stroke: #f06f63; } .growth-path.p5 { stroke: #7895b3; }
.growth-path.benchmark { stroke: #9aa4ba; stroke-width: 2; stroke-dasharray: 7 6; }
.market-view.active .growth-path { animation: lineDraw 2.38s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: var(--d); }
@keyframes lineDraw { to { stroke-dashoffset: 0; } }
.growth-side { display: grid; gap: 10px; align-content: start; } .growth-side-card { padding: 12px; }
.growth-side-card .skeleton:first-child { width: 48%; height: 5px; } .growth-side-card .skeleton:nth-child(2) { width: 65%; height: 12px; margin-top: 10px; background: #c8b7ff; }
.growth-mini-lines { display: grid; gap: 10px; margin-top: 12px; }
.growth-mini-line { display: grid; grid-template-columns: 8px 1fr 34px; align-items: center; gap: 7px; }
.growth-mini-line:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grape); }
.growth-mini-line:nth-child(2):before { background: #28b97e; } .growth-mini-line:nth-child(3):before { background: #f1c313; } .growth-mini-line:nth-child(4):before { background: #f06f63; }
.growth-mini-line .skeleton { height: 5px; }
.growth-mini-line i { height: 6px; border-radius: 99px; background: #d4c8f8; transform-origin: left; transform: scaleX(0); }
.market-view.active .growth-mini-line i { animation: marketBarIn 1.12s ease forwards; animation-delay: var(--d); }

/* clustering */
.cluster-view { gap: 10px; }
.cluster-grid-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cluster-grid-bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cluster-card { padding: 11px; }
.cluster-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cluster-card-head .skeleton:first-child { width: 54px; height: 6px; } .cluster-card-head .skeleton:last-child { width: 28px; height: 5px; }
.hbar-chart { display: grid; gap: 8px; }
.hbar-row { display: grid; grid-template-columns: 37px 1fr; align-items: center; gap: 7px; }
.hbar-row .skeleton { width: 31px; height: 5px; }
.hbar-row i { height: 9px; width: 0; border-radius: 0 4px 4px 0; background: #a9c8f8; }
.cluster-card:nth-child(2) .hbar-row i { background: #f5dd72; } .cluster-card:nth-child(3) .hbar-row i { background: #74dfb6; }
.market-view.active .hbar-row i { animation: clusterBar 1.26s ease forwards; animation-delay: var(--d); }
@keyframes clusterBar { to { width: var(--w); } }
@keyframes marketBarIn { to { transform: scaleX(1); } }
.cluster-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cluster-heat i { aspect-ratio: 1.22; border-radius: 2px; background: rgba(38, 202, 139, var(--o)); opacity: 0; transform: scale(.7); }
.cluster-card:nth-child(2) .cluster-heat i { background: rgba(244, 204, 29, var(--o)); } .cluster-card:nth-child(3) .cluster-heat i { background: rgba(132, 80, 232, var(--o)); }
.market-view.active .cluster-heat i { animation: heatIn .588s ease forwards; animation-delay: var(--d); }
@keyframes heatIn { to { opacity: 1; transform: scale(1); } }
.cluster-axis { display: flex; justify-content: space-between; margin-top: 7px; }
.cluster-axis i { display: block; width: 28px; height: 4px; border-radius: 99px; background: #dcd7e2; }
.market-view.active .market-animate { animation: marketFade .77s ease both; }
@keyframes marketFade { from { opacity: .18; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ── Responsive ── */
@media (max-width: 1050px) {
  .caps-feature, .caps-feature--flip { grid-template-columns: 1fr; gap: 50px; padding: var(--sp-2xl) 0; }
  .caps-feature--flip .caps-feature__copy, .caps-feature--flip .caps-stage { order: initial; }
  .caps-feature__copy { max-width: 720px; }
}

@media (max-width: 760px) {
  .caps { padding: var(--sp-2xl) var(--sp-lg); }
  .caps-feature { padding: var(--sp-xl) 0; gap: 38px; }
  .concept-canvas { min-height: 470px; padding: 12px; }
  .app-topbar { gap: 9px; padding: 9px 10px; }
  .app-logo { display: none; }
  .concept-result { grid-template-columns: 38px minmax(90px, 1fr) 58px 38px; }
  .concept-result > div:nth-child(4) { display: none; }
  .company-concept { grid-template-columns: 72px minmax(0, 1fr); }
  .concept-sidebar { padding: 12px 7px; }
  .nav-pill { padding: 0 7px; } .nav-pill:after { width: 22px; } .nav-pill.active:after { width: 28px; }
  .company-main { padding: 10px; }
  .overview-layout { grid-template-columns: 1fr; }
  .assessment-rings { grid-template-columns: repeat(4, 1fr); }
  .ci-grid-3 { grid-template-columns: 1fr; }
  .ratio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swot-grid { grid-template-columns: repeat(2, 1fr); }
  .strategy-top { grid-template-columns: 1fr; }
  .tree-node { width: 94px; }
  .people-layout { grid-template-columns: 1fr; }
  .market-concept { grid-template-columns: 72px minmax(0, 1fr); }
  .market-sidebar { padding: 12px 7px; }
  .market-nav { padding: 0 7px; } .market-nav:after { width: 22px; } .market-nav.active:after { width: 28px; }
  .market-main { padding: 10px; }
  .location-view, .growth-view { grid-template-columns: 1fr; }
  .location-side, .growth-side { grid-template-columns: repeat(2, 1fr); }
  .cluster-grid-top, .cluster-grid-bottom { grid-template-columns: 1fr; }
  .cluster-grid-top .cluster-card:nth-child(3), .cluster-grid-bottom .cluster-card:nth-child(3) { display: none; }
  .network-panel { min-height: 310px; }
  .contact-panel { grid-template-columns: 1fr 1fr; }
  .message-concept { min-height: 166px; }
  .bubble-view { min-height: 320px; }
}

@media (max-width: 720px) {
  .ai-loader-detail { max-width: 210px; }
  .ai-loader-steps { display: none; }
}

@media (max-width: 520px) {
  .contact-panel { grid-template-columns: 1fr; }
  .ratio-grid { grid-template-columns: 1fr; }
  .assessment-rings { grid-template-columns: repeat(3, 1fr); }
  .overview-score-grid { grid-template-columns: repeat(2, 1fr); }
  .overview-metrics { grid-template-columns: 1fr; }
  .swot-grid { grid-template-columns: 1fr 1fr; }
  .factor-columns { grid-template-columns: 1fr; }
  .tree-node { width: 78px; height: 36px; } .tree-node:after { left: 34px; }
  .location-side, .growth-side { grid-template-columns: 1fr; }
}

/* ── Compactado: aplica siempre (los selectores solo existen en los
   mockups; en móvil el mini proporcional necesita estas mismas medidas) ── */
@media (min-width: 0px) {
  .company-concept { min-height: 0; }
  .company-main { padding: 13px; }
  .company-header { margin-bottom: 9px; }
  .company-view { gap: 8px; }
  .ci-grid-2, .ci-grid-3, .ratio-grid, .overview-layout, .overview-left, .overview-right, .strategy-top { gap: 8px; }
  .ci-panel-head { height: 30px; padding: 0 10px; }
  .overview-copy, .overview-score, .overview-metrics, .overview-registry { padding: 10px; }
  .overview-copy .skeleton { margin-bottom: 6px; }
  .overview-tags { margin-top: 9px; }
  .overview-score-grid { gap: 6px; }
  .overview-score-card { gap: 5px; padding: 7px 4px; }
  .overview-metric { padding: 8px; }
  .overview-bars { height: 86px; padding: 16px 10px 8px; }
  .overview-bars::after { left: 10px; right: 10px; bottom: 8px; }
  .overview-registry { gap: 8px 13px; }
  .assessment-scorecard { padding: 10px 12px; }
  .assessment-rings { gap: 7px; }
  .assessment-item { gap: 5px; }
  .assessment-gauge { width: 51px; height: 27px; }
  .assessment-gauge:before { left: 4px; right: 4px; top: 3px; height: 43px; border-width: 4px; }
  .assessment-gauge:after { left: 4px; top: 3px; width: 43px; height: 43px; border-width: 4px; }
  .scatter-card { height: 154px; padding: 9px; }
  .scatter-plot { height: 106px; margin-top: 5px; }
  .ratio-card { height: 190px; }
  .ratio-body { height: 159px; padding: 9px; gap: 8px; }
  .ratio-bars { gap: 6px; padding: 22px 6px 0; }
  .ratio-row { min-height: 0; }
  .ratio-waterfall { padding: 10px 3px; }
  .ownership-view { min-height: 400px; }
  .ownership-toolbar { padding: 9px 10px; }
  .tree-canvas { height: 346px; }
  .tree-node { height: 38px; }
  .strategy-chart { padding: 10px; }
  .strategy-bars { height: 108px; padding: 22px 7px 0; background: repeating-linear-gradient(to top, transparent 0 24px, #eeeaf2 25px 26px); }
  .factor-columns { gap: 9px; padding: 10px; }
  .factor-list { gap: 7px; }
  .factor-row { grid-template-columns: 16px 1fr; gap: 6px; }
  .factor-icon { width: 16px; height: 16px; }
  .factor-icon:after { left: 5px; top: 3px; }
  .swot-grid { gap: 7px; }
  .swot-column { min-height: 164px; padding: 8px; }
  .swot-head { margin-bottom: 7px; }
  .swot-entry { padding: 6px 0; }
}

/* ── Reducción global de altura de mockups: aplica siempre (ídem) ── */
@media (min-width: 0px) {
  .browser-chrome { height: 36px; }
  .app-topbar { min-height: 50px; padding: 7px 14px; }
  .app-search { min-height: 34px; }
  .search-canvas { min-height: 405px; padding: 13px 16px 14px; }
  .search-query-card { margin: 6px auto 11px; padding: 14px 16px; border-radius: 14px; }
  .query-line { min-height: 46px; font-size: clamp(.78rem, 1.15vw, .96rem); }
  .ai-search-loader { min-height: 42px; margin-bottom: 10px; padding: 7px 11px; }
  .search-orbit { height: 30px; margin-bottom: 8px; }
  .scan-line { top: 14px; } .scan-dot { top: 8px; }
  .result-stack { gap: 6px; }
  .concept-result { min-height: 47px; padding: 6px 10px; grid-template-columns: 35px minmax(110px, 1.4fr) minmax(62px, .55fr) minmax(62px, .55fr) 42px; }
  .abstract-logo { width: 29px; height: 29px; border-radius: 8px; }
  .abstract-logo:before { left: 7px; top: 7px; } .abstract-logo:after { right: 6px; bottom: 6px; }
  .company-main { padding: 11px; }
  .company-header { margin-bottom: 7px; }
  .company-view { gap: 7px; }
  .overview-bars { height: 68px; }
  .assessment-scorecard { padding: 8px 10px; }
  .scatter-card { height: 126px; }
  .scatter-plot { height: 82px; }
  .ratio-card { height: 154px; }
  .ratio-body { height: 123px; }
  .ownership-view { min-height: 310px; }
  .tree-canvas { height: 260px; }
  .strategy-bars { height: 82px; }
  .swot-column { min-height: 126px; }
  .people-concept { min-height: 0; padding: 12px; }
  .people-layout { gap: 9px; align-items: stretch; }
  .network-panel { min-height: 340px; height: 340px; }
  .contact-panel { gap: 8px; grid-template-rows: auto 1fr; }
  .contact-card { padding: 11px; }
  .contact-avatar { width: 36px; height: 36px; }
  .contact-avatar:before { left: 12px; top: 7px; width: 11px; height: 11px; box-shadow: 0 12px 0 5px #d8ccff; }
  .contact-info { margin-top: 9px; gap: 6px; }
  .info-chip { height: 43px; padding: 8px; }
  .info-chip .skeleton:last-child { margin-top: 6px; }
  .message-concept { min-height: 0; height: auto; padding: 11px; }
  .message-head { margin-bottom: 11px; }
  .message-lines { gap: 7px; }
  .message-line { height: 6px; }
  .send-chip { right: 11px; bottom: 11px; width: 65px; height: 22px; }
  .people-view-stage { min-height: 340px; }
  .people-view-dots { right: 12px; bottom: 12px; }
  .pc-outreach-view { min-height: 340px; grid-template-columns: minmax(108px, .32fr) minmax(0, 1fr); gap: 8px; }
  .pc-directory { padding: 8px; } .pc-person-list { gap: 4px; padding-top: 7px; } .pc-person-item { min-height: 40px; padding: 5px; }
  .pc-person-avatar { width: 25px; height: 25px; } .pc-person-avatar:before { left: 8px; top: 5px; width: 8px; height: 8px; box-shadow: 0 8px 0 3px #dcd2fa; }
  .pc-workspace { padding: 8px; } .pc-profile-card { min-height: 49px; padding: 6px 8px; }
  .pc-profile-avatar { width: 33px; height: 33px; } .pc-profile-avatar:before { left: 11px; top: 6px; width: 10px; height: 10px; box-shadow: 0 10px 0 4px #d6c8ff; }
  .pc-compose-card { margin-top: 7px; padding: 8px; } .pc-compose-top { margin-bottom: 5px; }
  .pc-compose-fields { gap: 4px; margin-bottom: 6px; } .pc-compose-field { min-height: 21px; }
  .pc-email-body { gap: 5px; padding: 7px; } .pc-email-line { height: 5px; }
  .pc-compose-footer { margin-top: 6px; } .pc-send-button { height: 22px; width: 62px; }
  .market-concept { min-height: 0; }
  .market-main { padding: 11px; }
  .market-header { margin-bottom: 8px; }
  .market-view-stage { min-height: 345px; }
  .market-view { gap: 8px; }
  .region-map { min-height: 325px; padding: 9px; }
  .region-map svg { height: 300px; }
  .bubble-view { min-height: 335px; padding: 9px; }
  .market-scatter { height: 300px; }
  .growth-chart { padding: 9px; }
  .growth-svg { height: 295px; }
  .growth-side { gap: 8px; }
  .growth-side-card { padding: 9px; }
  .cluster-view { gap: 8px; }
  .cluster-grid-top, .cluster-grid-bottom { gap: 8px; }
  .cluster-card { padding: 8px; }
  .cluster-card-head { margin-bottom: 7px; }
  .hbar-chart { gap: 6px; }
  .cluster-heat { gap: 2px; }

  /* Viewport fijo de Company Intelligence: misma altura en todas las pestañas */
  .company-concept { height: 385px; min-height: 385px; }
  .company-main { height: 385px; }
  .company-view-stage { height: 316px !important; min-height: 316px !important; overflow: hidden; transition: none !important; }
  .company-view { height: 316px; overflow: hidden; }
}

/* ── Secuencias de construcción rápidas ── */
.company-view, .market-view, .people-view {
  transition: opacity .336s ease, transform .42s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .42s;
}
.company-view.active, .market-view.active, .people-view.active { transition-delay: 0s; }

@keyframes componentBuild { from { opacity: .12; transform: translateY(8px) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes skeletonBuild { from { opacity: .18; transform: scaleX(.08); } to { opacity: 1; transform: scaleX(1); } }
@keyframes quickPop { from { opacity: .12; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes quickDraw { to { stroke-dashoffset: 0; } }
@keyframes quickSlide { from { opacity: .08; transform: translateX(-9px); } to { opacity: 1; transform: none; } }

.company-view.active .ci-panel,
.market-view.active .market-panel { animation: componentBuild .588s cubic-bezier(.2, .8, .2, 1) both; }
.company-view.active .ci-panel:nth-child(2),
.market-view.active .market-panel:nth-child(2) { animation-delay: .112s; }
.company-view.active .ci-panel:nth-child(3),
.market-view.active .market-panel:nth-child(3) { animation-delay: .196s; }
.company-view.active .ci-panel-head:before,
.company-view.active .ci-panel-head:after,
.company-view.active .skeleton,
.market-view.active .market-panel-head:before,
.market-view.active .market-panel-head:after,
.market-view.active .skeleton { transform-origin: left; animation: skeletonBuild .588s ease both; }
.company-view.active .assessment-item,
.company-view.active .overview-score-card { animation: quickPop .588s cubic-bezier(.2, .8, .2, 1) both; }
.company-view.active .assessment-item:nth-child(2),
.company-view.active .overview-score-card:nth-child(2) { animation-delay: .084s; }
.company-view.active .assessment-item:nth-child(3),
.company-view.active .overview-score-card:nth-child(3) { animation-delay: .168s; }
.company-view.active .assessment-item:nth-child(4),
.company-view.active .overview-score-card:nth-child(4) { animation-delay: .252s; }
.company-view.active .assessment-item:nth-child(5) { animation-delay: .336s; }
.company-view.active .assessment-item:nth-child(6) { animation-delay: .42s; }
.company-view.active .assessment-item:nth-child(7) { animation-delay: .504s; }

.company-view:not(.active) .ratio-bars i,
.company-view:not(.active) .ratio-waterfall i { animation: none; transform: scaleY(.08); opacity: .15; }
.company-view.active .ratio-bars i,
.company-view.active .ratio-waterfall i { transform-origin: bottom; animation: ciBarGrow .728s cubic-bezier(.2, .8, .2, 1) both; }
.company-view.active .ratio-bars i:nth-child(2), .company-view.active .ratio-waterfall i:nth-child(2) { animation-delay: .07s; }
.company-view.active .ratio-bars i:nth-child(3), .company-view.active .ratio-waterfall i:nth-child(3) { animation-delay: .14s; }
.company-view.active .ratio-bars i:nth-child(4), .company-view.active .ratio-waterfall i:nth-child(4) { animation-delay: .21s; }
.company-view.active .ratio-bars i:nth-child(5), .company-view.active .ratio-waterfall i:nth-child(5) { animation-delay: .28s; }
.company-view.active .ratio-waterfall i:nth-child(6) { animation-delay: .35s; }
.company-view.active .ratio-waterfall i:nth-child(7) { animation-delay: .42s; }
.company-view.active .ratio-row { animation: quickSlide .532s ease both; }
.company-view.active .ratio-row:nth-child(2) { animation-delay: .07s; }
.company-view.active .ratio-row:nth-child(3) { animation-delay: .14s; }
.company-view.active .ratio-row:nth-child(4) { animation-delay: .21s; }
.company-view.active .ratio-row:nth-child(5) { animation-delay: .28s; }
.company-view.active .ratio-row:nth-child(6) { animation-delay: .35s; }
.company-view.active .ratio-line path,
.company-view.active .tree-link { stroke-dasharray: 600; stroke-dashoffset: 600; animation: quickDraw .98s cubic-bezier(.2, .8, .2, 1) forwards; }
.company-view.active .tree-link:nth-child(2) { animation-delay: .112s; }
.company-view.active .tree-link:nth-child(3) { animation-delay: .224s; }
.company-view.active .tree-link:nth-child(4) { animation-delay: .336s; }
.company-view.active .tree-link:nth-child(5) { animation-delay: .448s; }
.company-view.active .swot-column { animation: componentBuild .588s ease both; }
.company-view.active .swot-column:nth-child(2) { animation-delay: .098s; }
.company-view.active .swot-column:nth-child(3) { animation-delay: .196s; }
.company-view.active .swot-column:nth-child(4) { animation-delay: .294s; }
.company-view.active .swot-entry { animation: quickSlide .532s ease both; }
.company-view.active .swot-entry:nth-child(3) { animation-delay: .168s; }

.market-view.active .growth-path { animation-duration: 1.008s; }
.market-view.active .market-region { animation-duration: 1.61s; }
.market-view.active .bubble-point { animation-duration: .588s; }
.market-view.active .location-rank-row i,
.market-view.active .growth-mini-line i { animation-duration: .644s; }

.people-view.active .person-node { animation: quickPop .588s cubic-bezier(.2, .8, .2, 1) both; }
.people-view.active .person-node:nth-of-type(2) { animation-delay: .098s; }
.people-view.active .person-node:nth-of-type(3) { animation-delay: .196s; }
.people-view.active .person-node:nth-of-type(4) { animation-delay: .294s; }
.people-view.active .person-node:nth-of-type(5) { animation-delay: .392s; }
.people-view.active .person-node:nth-of-type(6) { animation-delay: .49s; }
.people-view.active .role-chip,
.people-view.active .contact-card,
.people-view.active .message-concept { animation: componentBuild .63s ease both; }
.people-view.active .contact-card { animation-delay: .14s; }
.people-view.active .message-concept { animation-delay: .28s; }
.network-flow { animation-duration: 2.4s; }
.people-view.active .message-line { animation: messageBuild .588s ease forwards; animation-delay: var(--write-delay, 0s); }
.people-view.active .message-line:nth-child(1) { --write-delay: .112s; }
.people-view.active .message-line:nth-child(2) { --write-delay: .224s; }
.people-view.active .message-line:nth-child(3) { --write-delay: .336s; }
.people-view.active .message-line:nth-child(4) { --write-delay: .448s; }
.people-view.active .message-line:nth-child(5) { --write-delay: .56s; }
@keyframes messageBuild { to { transform: scaleX(1); opacity: 1; } }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .caps .browser, .caps .concept-result, .caps .bubble-point, .caps .cluster-heat i {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .caps .hbar-row i { width: var(--w) !important; animation: none !important; }
  .caps .growth-path { stroke-dashoffset: 0 !important; animation: none !important; }
  .caps .location-rank-row i, .caps .growth-mini-line i, .caps .message-line, .caps .pc-email-line { transform: scaleX(1) !important; opacity: 1 !important; animation: none !important; }
  .caps .scatter-dot, .caps .tree-node { opacity: 1 !important; transform: none !important; animation: none !important; }
  .caps .scan-dot, .caps .ai-loader-spinner, .caps .caret, .caps .query-caret,
  .caps .network-flow, .caps .market-region, .caps .pc-send-button { animation: none !important; }
  .caps .overview-bars i, .caps .ratio-bars i, .caps .ratio-waterfall i { animation: none !important; transform: none !important; opacity: 1 !important; }
  .caps .ci-panel, .caps .market-panel, .caps .swot-column, .caps .assessment-item,
  .caps .overview-score-card, .caps .person-node, .caps .role-chip, .caps .contact-card,
  .caps .message-concept, .caps .ratio-row, .caps .swot-entry, .caps .skeleton,
  .caps .ci-panel-head::before, .caps .ci-panel-head::after,
  .caps .market-panel-head::before, .caps .market-panel-head::after { animation: none !important; opacity: 1 !important; transform: none !important; }
}


/* Maquetas de capabilities: proporción fija 16:11 e interior escalado */
.caps-stage { container-type: inline-size; }

.caps-stage .browser {
  display: flex;
  flex-direction: column;
  aspect-ratio: 23 / 17;
}

.caps-stage .browser-chrome,
.caps-stage .app-topbar { zoom: .88; }

.caps-stage .concept-canvas,
.caps-stage .company-concept,
.caps-stage .people-concept,
.caps-stage .market-concept {
  flex: 1;
  height: auto;
  min-height: 0;
  overflow: hidden;
  zoom: .88;
}

@container (max-width: 520px) {
  .caps-stage .concept-canvas,
  .caps-stage .company-concept,
  .caps-stage .people-concept,
  .caps-stage .market-concept { zoom: .72; }
  .caps-stage .browser-chrome,
  .caps-stage .app-topbar { zoom: .72; }
}

@container (max-width: 380px) {
  .caps-stage .concept-canvas,
  .caps-stage .company-concept,
  .caps-stage .people-concept,
  .caps-stage .market-concept { zoom: .58; }
  .caps-stage .browser-chrome,
  .caps-stage .app-topbar { zoom: .58; }
}

/* ── Móvil: mini proporcional. Los mockups conservan el layout de escritorio
   (los grids de abajo re-afirman los valores base que las reglas ≤760/≤520
   reflowaban a una columna) y se encogen con zoom para caber en el ancho del
   teléfono guardando proporciones. Va al final para ganar la cascada ── */
@media (max-width: 760px) {
  .caps-stage .browser { aspect-ratio: auto; }
  .caps-stage .browser-chrome,
  .caps-stage .app-topbar { zoom: .5; }
  .caps-stage .concept-canvas,
  .caps-stage .company-concept,
  .caps-stage .people-concept,
  .caps-stage .market-concept {
    zoom: .5;
    flex: none;
    height: auto;
  }

  /* Layout de escritorio dentro de los mockups (valores base) */
  .caps-stage .app-logo, .hero-flow .app-logo { display: block; }
  .caps-stage .ai-loader-steps, .hero-flow .ai-loader-steps { display: flex; }
  .caps-stage .ai-loader-detail, .hero-flow .ai-loader-detail { max-width: none; }
  .caps-stage .concept-result > div:nth-child(4),
  .hero-flow .concept-result > div:nth-child(4) { display: block; }
  .caps-stage .overview-layout, .hero-flow .overview-layout { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
  .caps-stage .ci-grid-3, .hero-flow .ci-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .caps-stage .ratio-grid, .hero-flow .ratio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caps-stage .swot-grid, .hero-flow .swot-grid { grid-template-columns: repeat(4, 1fr); }
  .caps-stage .strategy-top, .hero-flow .strategy-top { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); }
  .caps-stage .people-layout, .hero-flow .people-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .caps-stage .location-view, .hero-flow .location-view { grid-template-columns: minmax(0, 1.15fr) minmax(150px, .45fr); }
  .caps-stage .growth-view, .hero-flow .growth-view { grid-template-columns: minmax(0, 1.2fr) minmax(180px, .45fr); }
  .caps-stage .location-side, .caps-stage .growth-side,
  .hero-flow .location-side, .hero-flow .growth-side { grid-template-columns: none; }
  .caps-stage .cluster-grid-top, .caps-stage .cluster-grid-bottom,
  .hero-flow .cluster-grid-top, .hero-flow .cluster-grid-bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .caps-stage .cluster-grid-top .cluster-card:nth-child(3),
  .caps-stage .cluster-grid-bottom .cluster-card:nth-child(3),
  .hero-flow .cluster-grid-top .cluster-card:nth-child(3),
  .hero-flow .cluster-grid-bottom .cluster-card:nth-child(3) { display: block; }
  .caps-stage .contact-panel, .hero-flow .contact-panel { grid-template-columns: none; }
  .caps-stage .assessment-rings, .hero-flow .assessment-rings { grid-template-columns: repeat(7, 1fr); }
  .caps-stage .overview-score-grid, .hero-flow .overview-score-grid { grid-template-columns: repeat(4, 1fr); }
  .caps-stage .overview-metrics, .hero-flow .overview-metrics { grid-template-columns: repeat(3, 1fr); }
  .caps-stage .factor-columns, .hero-flow .factor-columns { grid-template-columns: repeat(2, 1fr); }
  .caps-stage .tree-node, .hero-flow .tree-node { width: 112px; height: 38px; }
  .caps-stage .tree-node:after, .hero-flow .tree-node:after { left: 39px; }
  .caps-stage .company-concept, .caps-stage .market-concept,
  .hero-flow .company-concept, .hero-flow .market-concept { grid-template-columns: 164px minmax(0, 1fr); }
  .caps-stage .concept-sidebar, .caps-stage .market-sidebar,
  .hero-flow .concept-sidebar, .hero-flow .market-sidebar { padding: 16px 10px; }
  .caps-stage .company-main, .hero-flow .company-main,
  .caps-stage .market-main, .hero-flow .market-main { padding: 11px; }
}

/* Teléfonos más estrechos que el iPhone 12 (stage = ancho − 48): el zoom
   baja por tramos para que el lienzo natural se mantenga en ~682px y los
   mockups se vean idénticos, solo más pequeños */
@media (max-width: 388px) {
  .caps-stage .browser-chrome,
  .caps-stage .app-topbar,
  .caps-stage .concept-canvas,
  .caps-stage .company-concept,
  .caps-stage .people-concept,
  .caps-stage .market-concept { zoom: .48; }
}

@media (max-width: 372px) {
  .caps-stage .browser-chrome,
  .caps-stage .app-topbar,
  .caps-stage .concept-canvas,
  .caps-stage .company-concept,
  .caps-stage .people-concept,
  .caps-stage .market-concept { zoom: .46; }
}

@media (max-width: 348px) {
  .caps-stage .browser-chrome,
  .caps-stage .app-topbar,
  .caps-stage .concept-canvas,
  .caps-stage .company-concept,
  .caps-stage .people-concept,
  .caps-stage .market-concept { zoom: .42; }
}


/* Etiqueta de sección: solo en el menú lateral y solo en el elemento activo */
.nav-pill__label {
  display: none;
  font-family: 'Manrope', var(--sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--obsidian);
  text-align: left;
}

.nav-pill.active .nav-pill__label,
.market-nav.active .nav-pill__label { display: block; }
.nav-pill.active:after,
.market-nav.active:after { display: none; }

.company-concept,
.market-concept { grid-template-columns: 164px minmax(0, 1fr); }


/* Recorte de altura: una fila de resultados menos y menos padding inferior */
.caps-stage .company-main,
.caps-stage .market-main { padding-bottom: 10px; }


/* Ajuste fino del mock de Agentic Search para que quepa sin recortes */
.caps-stage .search-query-card { margin: 2px auto 8px; padding: 11px 15px; }
.caps-stage .query-line { min-height: 40px; }
.caps-stage .search-orbit { height: 14px; margin: 0 auto 4px; }
.caps-stage .ai-search-loader { min-height: 38px; margin-bottom: 8px; }
.caps-stage .result-stack { gap: 6px; }
.caps-stage .concept-result { min-height: 44px; padding: 6px 12px; }

/* Un solo ancho para todo el lienzo de Agentic Search: la consulta, el loader
   y el listado comparten margen izquierdo y derecho */
.search-canvas .search-query-card,
.search-canvas .ai-search-loader,
.search-canvas .result-stack {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.search-canvas .search-query-card { margin-bottom: 12px; }
.search-canvas .ai-search-loader { margin-bottom: 12px; }
.search-canvas .search-orbit { display: none; }

/* ── Móvil: el número de la feature sube a la línea del título y la copy se
   compacta para que cada feature quepa en una pantalla de teléfono ── */
@media (max-width: 760px) {
  .caps-feature { gap: 24px; padding: var(--sp-lg) 0; }
  .caps-feature__meta {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 10px 0 0;
    transform: translateY(-2px);
  }
  .caps-feature__meta span { width: 26px; height: 26px; }
  .caps-feature__title { display: inline; }
  .caps-feature__lead { margin-top: var(--sp-sm); }
  .caps-feature__list { gap: 7px; }
}

/* ── Móvil: el panel resumen queda fijo bajo la nav mientras se recorren las
   features (compacto: titular pequeño y las 4 opciones en una fila) ── */
@media (max-width: 900px) {
  .caps__panel {
    position: sticky;
    top: 64px;
    z-index: 10;
    gap: 8px;
    padding: 10px 0 12px;
  }

  .caps__panel .caps__header .overline { margin-bottom: 2px; }
  .caps__panel .caps__headline { font-size: 1.125rem; }

  .caps__minis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .caps-mini { padding: 2px; }
  .caps-mini__inner {
    grid-template-columns: 1fr;
    gap: 0;
    justify-items: center;
    padding: 9px 4px;
  }
  .caps-mini__num { display: none; }
  .caps-mini__title { font-size: .6875rem; line-height: 1.3; text-align: center; }

  /* Las anclas del menú caen bajo el panel fijo */
  .caps-feature { scroll-margin-top: 168px; }
}