/* VortexNeural — Wireframe funcional de la portada */

/* Tema cromático aislado de la portada. Las páginas interiores conservan
   los tokens globales hasta que exista una decisión específica para ellas. */
.home-brand {
  --bg-base: #080B10;
  --surface-1: #0F131A;
  --surface-2: #151A22;
  --surface-3: #1B212B;
  --border: rgba(190, 198, 211, 0.16);
  --border-strong: rgba(201, 207, 218, 0.28);
  --silver-100: #F5F6F8;
  --silver-300: #C8CED8;
  --silver-500: #929CAA;
  --silver-700: #626B79;
  --accent-blue: #4776D0;
  --accent-blue-strong: #76A0F2;
  --accent-blue-deep: #3159A8;
  --accent-blue-wash: rgba(71, 118, 208, 0.10);
  --text-primary: #F2F4F7;
  --text-secondary: #C2C8D2;
  --text-tertiary: #A4ACB9;
  --text-muted: #929BAA;
  --success: #4EAE7B;
  --warning: #D1A14A;
  --error: #E05D63;
}

.home-brand .site-header {
  background: rgba(8, 11, 16, 0.94);
  border-bottom-color: rgba(201, 207, 218, 0.18);
}

.home-brand .brand__mark-wrap {
  border-radius: 50%;
  filter: drop-shadow(0 0 8px rgba(245, 246, 248, 0.2));
}

.home-brand .brand__mark {
  filter: brightness(1.12) contrast(1.06);
}

.home-brand .btn-primary {
  background: linear-gradient(145deg, #F5F6F8 0%, #D7DCE4 58%, #B8C0CC 100%);
  color: #080B10;
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 8px 24px rgba(0, 0, 0, 0.28);
}

.home-brand .btn-primary:hover {
  background: linear-gradient(145deg, #FFFFFF 0%, #E1E5EB 58%, #C2C9D3 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset, 0 10px 28px rgba(0, 0, 0, 0.34);
}

.home-brand .btn-primary:focus-visible {
  outline-color: var(--accent-blue-strong);
  box-shadow: 0 0 0 4px rgba(118, 160, 242, 0.25), 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

.home-block { padding-block: var(--space-9); }
.home-block--alt { background: var(--surface-1); border-block: 1px solid var(--border-strong); }
.section-kicker { display: inline-block; color: var(--accent-blue-strong); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.section-intro { max-width: 620px; }
.section-intro--wide { max-width: 820px; }
.section-intro h2 { margin-top: var(--space-3); }
.section-intro p { margin-top: var(--space-4); color: var(--text-secondary); }
.section-action { margin-top: var(--space-7); text-align: center; }

/* Hero */
.hero-wireframe { padding-block: var(--space-8) var(--space-9); overflow: clip; }
.hero-wireframe__grid { display: grid; gap: var(--space-8); align-items: center; }
.hero-wireframe h1 { margin-top: var(--space-4); font-size: var(--fs-display); }
.hero-wireframe__lead { max-width: 620px; margin-top: var(--space-5); color: var(--text-secondary); font-size: var(--fs-body-lg); }
.hero-wireframe__territory { margin-top: var(--space-3); color: var(--silver-300); font-family: var(--font-heading); font-size: clamp(1rem, 1.8vw, 1.25rem); }
.hero-wireframe__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero-wireframe__trust { max-width: 620px; margin-top: var(--space-5); color: var(--text-secondary); font-size: var(--fs-caption); }
.hero-wireframe__local-link { display: inline-flex; gap: var(--space-2); align-items: center; margin-top: var(--space-3); color: var(--accent-blue-strong); font-size: var(--fs-caption); font-weight: 600; }
.hero-wireframe__local-link:hover { color: var(--silver-100); }

.process-map { position: relative; min-width: 0; margin: 0; padding: var(--space-5); padding-bottom: var(--space-7); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--surface-3), var(--surface-1) 58%, var(--bg-base)); overflow: hidden; }
.process-map__title { position: relative; margin-bottom: var(--space-5); font-family: var(--font-heading); font-weight: 700; }
.process-map__flow { position: relative; display: grid; gap: var(--space-3); }
.process-state { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(15, 19, 26, 0.94); }
.process-state:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: calc(100% + 1px); height: var(--space-3); border-left: 1px solid var(--accent-blue); }
.process-state__num { grid-row: 1 / 3; align-self: center; color: var(--silver-300); font-size: var(--fs-caption); font-weight: 700; }
.process-state strong { font-size: .9375rem; }
.process-state small { color: var(--text-tertiary); }
.process-state--validation { border-style: dashed; }
.process-state--human { border-left: 3px solid var(--warning); }
.process-state--result { border-color: var(--success); }

/* Coste oculto */
.split-editorial { display: grid; gap: var(--space-7); align-items: center; }
.before-after { display: grid; gap: var(--space-3); align-items: stretch; }
.before-after__side { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.before-after__side--after { border-color: rgba(63,174,122,.45); }
.before-after__side h3 { margin-top: var(--space-3); }
.state-label { color: var(--text-tertiary); font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; }
.before-after__connector { display: grid; place-items: center; color: var(--accent-blue-strong); font-size: var(--fs-h3); transform: rotate(90deg); }
.compact-list { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.compact-list li { color: var(--text-secondary); }
.compact-list li::before { content: "—"; margin-right: var(--space-2); color: var(--accent-blue); }

/* Alcance */
.scope-flow { display: grid; gap: 1px; margin-top: var(--space-7); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--border); }
.scope-flow li { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--surface-2); }
.scope-flow span { color: var(--accent-blue-strong); font-size: var(--fs-caption); text-transform: uppercase; }
.scope-grid { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.application-areas, .candidate-panel { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.tag-cloud li { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--text-secondary); font-size: var(--fs-caption); }
.candidate-panel { background: var(--surface-2); }
.candidate-panel__principle { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 700; }
.candidate-panel__columns { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.candidate-card { --candidate-accent: var(--silver-500); padding: var(--space-4); border: 1px solid var(--border); border-left: 3px solid var(--candidate-accent); border-radius: var(--radius-sm); background: var(--surface-1); }
.candidate-card--fit { --candidate-accent: var(--success); background: linear-gradient(145deg, rgba(78, 174, 123, 0.07), var(--surface-1) 42%); }
.candidate-card--caution { --candidate-accent: var(--warning); background: linear-gradient(145deg, rgba(209, 161, 74, 0.07), var(--surface-1) 42%); }
.candidate-card h3 { font-size: 1rem; }
.candidate-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-3); margin-top: var(--space-2); }
.candidate-list li { position: relative; padding-left: var(--space-3); color: var(--text-secondary); font-size: var(--fs-caption); }
.candidate-list li::before { content: ""; position: absolute; top: .65em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--candidate-accent); }

/* Personas */
.people-layout { display: grid; gap: var(--space-7); align-items: center; }
.section-intro blockquote { margin-top: var(--space-5); padding-left: var(--space-4); border-left: 2px solid var(--accent-blue); color: var(--text-primary); font-family: var(--font-heading); font-size: var(--fs-h4); }
.human-loop { display: grid; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2); }
.human-loop__lane { display: grid; gap: var(--space-1); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); }
.human-loop__lane span { color: var(--accent-blue-strong); font-size: var(--fs-caption); text-transform: uppercase; }
.human-loop__lane strong { font-size: var(--fs-h3); }
.human-loop__lane small { color: var(--text-tertiary); }
.human-loop__lane--human { border-color: rgba(211,160,62,.45); }
.human-loop__decision { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--text-secondary); font-size: var(--fs-caption); }
.human-loop__decision b { color: var(--warning); }

/* Experiencias */
.experience-grid { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
.experience-card { overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); }
.experience-card__body { padding: var(--space-5); }
.experience-card__body h3 { margin-top: var(--space-2); }
.experience-card__body h3 a { color: inherit; text-decoration-color: transparent; text-underline-offset: .2em; }
.experience-card__body h3 a:hover { color: var(--accent-blue-strong); text-decoration-color: currentColor; }
.experience-card__body p { margin-top: var(--space-3); color: var(--text-secondary); font-size: .9375rem; }
.status-badge { display: inline-flex; padding: 4px 8px; border: 1px solid var(--warning); border-radius: var(--radius-full); color: var(--warning); font-size: .6875rem; font-weight: 700; text-transform: uppercase; }
.status-badge--success { border-color: var(--success); color: var(--success); }
.status-badge--proposal { border-color: var(--accent-blue-strong); color: var(--accent-blue-strong); }

/* Método y control */
.method-stages { display: grid; gap: var(--space-4); margin-top: var(--space-7); }
.method-stages li { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: var(--space-4); padding-block: var(--space-5); border-top: 1px solid var(--border); }
.method-stages li > span { color: var(--silver-300); font-family: var(--font-heading); font-weight: 700; }
.method-stages p { margin-top: var(--space-2); color: var(--text-secondary); }
.control-panel { display: grid; gap: var(--space-6); margin-top: var(--space-7); padding: var(--space-6); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-3); }

.home-brand .cta-band {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.home-brand .site-footer {
  background: #0C1016;
  border-top-color: var(--border-strong);
}
.control-panel h3 { margin-top: var(--space-2); }
.control-panel p { margin-top: var(--space-3); color: var(--text-secondary); }
.control-signals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); }
.control-signals li { padding: var(--space-2); border-left: 2px solid var(--accent-blue); color: var(--text-secondary); font-size: var(--fs-caption); }

/* Cierre */
.home-closing { padding-block: var(--space-8) var(--space-10); }
.home-closing .cta-band { text-align: center; }
.home-closing .cta-band > * { max-width: 760px; }
.home-closing .cta-band .btn { margin-top: var(--space-6); }
.cta-band__microcopy { font-size: var(--fs-caption); color: var(--text-tertiary) !important; }

@media (min-width: 640px) {
  .before-after { grid-template-columns: 1fr auto 1fr; }
  .before-after__connector { transform: none; }
  .scope-flow { grid-template-columns: repeat(2,1fr); }
  .candidate-panel__columns { grid-template-columns: repeat(2,1fr); }
  .experience-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (min-width: 900px) {
  .hero-wireframe__grid { grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); }
  .split-editorial, .people-layout { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
  .scope-flow { grid-template-columns: repeat(4,1fr); }
  .scope-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
  .method-stages { grid-template-columns: repeat(3,1fr); }
  .method-stages li { grid-template-columns: 1fr; align-content: start; }
  .control-panel { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: center; }
}

@media (max-width: 389px) {
  .home-block { padding-block: var(--space-8); }
  .hero-wireframe__actions .btn { width: 100%; }
  .process-map, .candidate-panel, .control-panel { padding: var(--space-4); }
  .control-signals { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .process-map * { animation: none !important; transition: none !important; }
}