/* BlazeInside — landing. Sistema visual inspirado en groq.com:
   fondo cálido claro, tinta oscura, un solo acento "blaze", display geométrica,
   etiquetas monoespaciadas en mayúsculas, bloques de color, ticker y prosa que se
   enciende al hacer scroll. Tokens --bi-* (misma convención que Reporte-IC-Template). */

:root {
  /* Paleta corporativa de blazeinside.com: índigo #0F072E, crema #FCF8EC, violeta #7D3BF4.
     Tema oscuro (índigo) por defecto. */
  --bi-bg: #0F072E;
  --bi-bg-2: #1F1740;
  --bi-ink: #FCF8EC;
  --bi-ink-80: color-mix(in srgb, var(--bi-ink) 80%, transparent);
  --bi-body: #D8D3E7;
  --bi-muted: #948CAE;
  --bi-line: color-mix(in srgb, #FCF8EC 14%, transparent);
  --bi-faint: #352E54;
  --bi-brand: #9A6BF7;
  --bi-brand-deep: #7D3BF4;
  --bi-on-brand: #FCF8EC;
  --bi-block-dark: #FCF8EC;
  --bi-block-olive: #591FC4;
  --bi-on-dark: #0F072E;
  --bi-fg: var(--bi-ink);
  --bi-surface: #1F1740;
  /* Programa personal (Reinvención profesional): azul provisional, pendiente del one-pager */
  --bi-personal: #4C8DFF;
  --bi-personal-deep: #2563EB;
  --bi-violet: #9A6BF7; /* morado de los em, estable aunque la página cambie --bi-brand */
  /* Colores de las cuatro dimensiones del IC Personal (documento de skills) */
  /* Las cuatro dimensiones usan solo el azul de personas (antes: azul, rojo, amarillo y verde). */
  --dim-pensar: var(--bi-personal);
  --dim-sentir: var(--bi-personal);
  --dim-decir: var(--bi-personal);
  --dim-hacer: var(--bi-personal);

  /* Tipografía */
  --ff-display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala fluida */
  --step--1: clamp(.8rem, .78rem + .1vw, .875rem);
  --step-0: clamp(.95rem, .9rem + .25vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --step-2: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.7vw, 2.6rem);
  --step-4: clamp(2.1rem, 1.6rem + 2.5vw, 3.4rem);
  --step-6: clamp(2.8rem, 2rem + 4.5vw, 5.4rem);
  --step-9: clamp(4.2rem, 2rem + 12vw, 12rem);

  /* Espacio */
  --page-inset: clamp(1.25rem, .75rem + 2vw, 2.5rem);
  --container: 80rem;
  --measure: 44rem;
  --space-section: clamp(5rem, 4rem + 5vw, 9rem);

  /* Movimiento (curvas de Groq) */
  --ease-expo-out: cubic-bezier(.19, 1, .22, 1);
  --ease-emphasis: cubic-bezier(0, .71, .16, 1);
  --ease-quad-out: cubic-bezier(.25, .46, .45, .94);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 700ms;
  --dur-arrive: 1100ms;

  --radius-pill: 1000px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bi-bg: #FCF8EC;
  --bi-bg-2: #F5EFDD;
  --bi-ink: #0F072E;
  --bi-body: #4F4870;
  --bi-muted: #6D6589;
  --bi-line: color-mix(in srgb, #0F072E 14%, transparent);
  --bi-faint: #D3D2FA;
  --bi-brand: #7D3BF4;
  --bi-brand-deep: #591FC4;
  --bi-on-brand: #FCF8EC;
  --bi-block-dark: #0F072E;
  --bi-block-olive: #591FC4;
  --bi-on-dark: #FCF8EC;
  --bi-surface: #FFFFFF;
  --bi-personal: #2563EB;
  --bi-personal-deep: #1D4ED8;
  --bi-violet: #7D3BF4;
  color-scheme: light;
}

/* Página del programa personal: el acento pasa a azul en toda la página */
body.personal { --bi-brand: var(--bi-personal); --bi-brand-deep: var(--bi-personal-deep); --bi-block-olive: var(--bi-personal-deep); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-arrive: 0ms; }
  html { scroll-behavior: auto; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bi-bg);
  color: var(--bi-body);
  font-family: var(--ff-body);
  font-size: var(--step-0);
  line-height: 1.5;
  overflow-x: clip;
  transition: background var(--dur-base), color var(--dur-base);
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) ease-in-out; }
p { margin: 0 0 1em; }
strong { font-weight: 600; color: var(--bi-ink); }
h1, h2, h3, h4 { font-family: var(--ff-display); color: var(--bi-ink); margin: 0; }
h2 { font-size: var(--step-6); font-weight: 500; line-height: .95; letter-spacing: -.035em; text-wrap: balance; max-width: 22ch; }
h3 { font-size: var(--step-2); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
h2 em, .statement em { font-style: normal; color: var(--bi-brand); }
.nowrap { white-space: nowrap; }

.container { width: min(100% - 2 * var(--page-inset), var(--container)); margin-inline: auto; }
.narrow { max-width: var(--measure); }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--bi-brand); color: #fff; padding: .5rem .75rem; z-index: 100; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--bi-brand); outline-offset: 3px; }

/* Etiquetas mono */
.label, .eyebrow {
  font-family: var(--ff-mono); font-size: var(--step--1); font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: var(--bi-muted);
}
.eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.5rem; }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--bi-brand); }

/* Botones (pill mono, como Groq) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.1rem; border-radius: var(--radius-pill);
  font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  border: 1px solid var(--bi-brand); color: var(--bi-brand); background: transparent; cursor: pointer;
  transition: color var(--dur-base) ease-in-out, background var(--dur-base) ease-in-out, border-color var(--dur-base);
  white-space: nowrap;
}
.btn:hover { background: var(--bi-brand); color: var(--bi-on-brand); }
.btn-solid { background: var(--bi-brand); color: var(--bi-on-brand); }
.btn-solid:hover { background: var(--bi-brand-deep); border-color: var(--bi-brand-deep); }
.btn-ink { border-color: var(--bi-ink); color: var(--bi-ink); }
.btn-ink:hover { background: var(--bi-ink); color: var(--bi-bg); }
.btn-light { border-color: currentColor; color: inherit; }
.btn-light:hover { background: var(--bi-brand); border-color: var(--bi-brand); color: var(--bi-on-brand); }
.btn-lg { padding: .95rem 1.5rem; font-size: var(--step-0); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Fondo animado (canvas) ---------- */
#bgCanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
.main-content { position: relative; z-index: 1; }
/* Las superficies opacas dejan pasar el fondo salvo donde hay bloque de color */
.site-header { background: color-mix(in srgb, var(--bi-bg) 82%, transparent); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bi-bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bi-line);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; }
.brand { display: inline-flex; color: var(--bi-ink); }
.logo-mask { display: inline-block; width: 139px; height: 25px; background: currentColor; -webkit-mask: url(/assets/img/logo-original.png) no-repeat center / contain; mask: url(/assets/img/logo-original.png) no-repeat center / contain; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.75rem; }
.site-nav a:not(.btn) { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); }
.site-nav a:not(.btn):hover, .site-nav a.active, .site-nav .nav-sub-toggle.active { color: var(--bi-brand); }
/* Enlace al programa personal: otro público, otro color */
.site-nav a.nav-alt, .site-footer a.nav-alt { color: var(--bi-personal); display: inline-flex; align-items: center; gap: .5rem; }
.site-nav a.nav-alt::before, .site-footer a.nav-alt::before { content: ""; width: 7px; height: 7px; background: var(--bi-personal); flex: none; }
.site-nav a.nav-alt:hover, .site-footer a.nav-alt:hover { color: var(--bi-ink); }
/* Desplegable "Soluciones" */
.has-sub { position: relative; }
.nav-sub-toggle { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); transition: color var(--dur-fast) ease-in-out; }
.nav-sub-toggle:hover { color: var(--bi-brand); }
.nav-sub-toggle .caret { font-size: .8em; transition: transform var(--dur-base) var(--ease-expo-out); }
.has-sub.open .nav-sub-toggle .caret, .has-sub:hover .nav-sub-toggle .caret { transform: translateY(1px) rotate(180deg); }
.has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.4rem; }
.site-nav .sub-menu { list-style: none; margin: 0; padding: .6rem 0; position: absolute; top: calc(100% + 1.2rem); left: -1.25rem; min-width: 17rem; background: var(--bi-bg); border: 1px solid var(--bi-line); display: none; flex-direction: column; align-items: stretch; gap: 0; z-index: 60; }
.site-nav .sub-menu li a { display: block; padding: .7rem 1.25rem; }
.site-nav .has-sub:hover .sub-menu, .site-nav .has-sub:focus-within .sub-menu, .site-nav .has-sub.open .sub-menu { display: flex; }
.nav-actions { display: flex; align-items: center; gap: .25rem; }
.icon-btn { background: none; border: 0; color: var(--bi-ink); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { color: var(--bi-brand); }
:root:not([data-theme="light"]) .icon-moon, :root[data-theme="light"] .icon-sun { display: none; }
.nav-toggle { display: none; }
.burger, .burger::before, .burger::after { content: ""; display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform var(--dur-base) var(--ease-expo-out); }
.burger { position: relative; }
.burger::before { position: absolute; top: -6px; }
.burger::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .burger { background: transparent; }
.nav-toggle[aria-expanded="true"] .burger::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-toggle { display: grid; }
  .site-nav { position: absolute; inset: 60px 0 auto 0; background: var(--bi-bg); border-bottom: 1px solid var(--bi-line); padding: 1rem var(--page-inset) 1.5rem; display: none; max-height: calc(100vh - 60px); overflow-y: auto; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: .25rem; }
  .site-nav a:not(.btn), .nav-sub-toggle { display: block; padding: .8rem 0; font-size: var(--step-0); }
  .site-nav a.nav-alt { display: inline-flex; }
  .nav-sub-toggle { pointer-events: none; }
  .nav-sub-toggle .caret { display: none; }
  .has-sub::after { display: none; }
  .site-nav .sub-menu { display: flex; position: static; border: 0; padding: 0 0 .5rem 1rem; min-width: 0; background: transparent; }
  .site-nav .sub-menu li a { padding: .6rem 0; }
  .nav-sub-toggle { font-size: var(--step--1); color: var(--bi-brand); padding-bottom: .2rem; }
  .site-nav .btn { margin-top: .75rem; justify-content: center; }
}

/* Barra de anuncio */
.announce { border-bottom: 1px solid var(--bi-line); }
.announce .container { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--bi-muted); }
.announce a { color: var(--bi-brand); white-space: nowrap; }
.announce a:hover { color: var(--bi-ink); }
@media (max-width: 640px) { .announce .container { flex-direction: column; gap: .25rem; } }

/* ---------- Hero ---------- */
.hero { padding: clamp(4rem, 3rem + 6vw, 9rem) 0 clamp(3rem, 2rem + 4vw, 6rem); position: relative; }
.hero-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.hero-grid > * { min-width: 0; }
.wordmark {
  font-family: var(--ff-display); font-size: clamp(3rem, .4rem + 9.6vw, 10.5rem); font-weight: 500;
  line-height: .85; letter-spacing: -.045em; color: var(--bi-ink);
}
.wordmark .line { display: block; white-space: nowrap; }
.wordmark .dot { display: inline-block; width: .31em; aspect-ratio: 1; background: var(--bi-brand); border-radius: 50%; margin-left: .12em; transform: translateY(.04em); }
/* Título de hero para frases largas (Home y páginas interiores) */
.hero-title {
  font-family: var(--ff-display); font-size: clamp(2.5rem, 1rem + 6.4vw, 7rem); font-weight: 500;
  line-height: .95; letter-spacing: -.04em; color: var(--bi-ink); max-width: 16ch; text-wrap: balance;
}
.hero-title em { font-style: normal; color: var(--bi-brand); }
.hero .eyebrow { margin-bottom: 0; }
.hero-support { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .hero-support { grid-template-columns: 7fr 5fr; gap: 4rem; } .hero-support .hero-cta { justify-content: flex-end; } .hero-support .hero-cta-col { justify-items: end; text-align: right; } }
.hero-support .lede { font-size: var(--step-1); line-height: 1.35; color: var(--bi-ink-80); max-width: 40ch; margin: 0; text-wrap: pretty; }
.hero-support .eyebrow { grid-column: 1 / -1; margin: 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-cta-col { display: grid; gap: .9rem; }
.hero-link { margin: 0; font-size: var(--step--1); color: var(--bi-muted); }
.hero-link a { color: var(--bi-personal); border-bottom: 1px solid color-mix(in srgb, var(--bi-personal) 40%, transparent); }
.hero-link a:hover { color: var(--bi-ink); border-color: var(--bi-ink); }
/* Hero de página interior: más compacto */
.page-hero { padding: clamp(3rem, 2rem + 4vw, 6rem) 0 clamp(2.5rem, 2rem + 3vw, 4.5rem); position: relative; border-bottom: 1px solid var(--bi-line); }
.page-hero .hero-grid { gap: 2rem; }
.page-hero .hero-title { font-size: clamp(2.2rem, 1rem + 4.8vw, 5.4rem); max-width: 18ch; }
.arrive { animation: arrive var(--dur-arrive) var(--ease-emphasis) both; }
.arrive-2 { animation-delay: 120ms; }
.arrive-3 { animation-delay: 240ms; }
@keyframes arrive { 0% { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }

/* Glifos pixelados */
.glyph { position: absolute; width: 22px; height: 22px; color: var(--bi-brand); pointer-events: none; opacity: 0; animation: glyph-in var(--dur-slow) var(--ease-expo-out) both, float 7s ease-in-out infinite; }
.glyph svg { width: 100%; height: 100%; }
.glyph.g1 { left: var(--page-inset); top: 22%; animation-delay: 300ms, 0s; }
.glyph.g2 { right: var(--page-inset); top: 30%; animation-delay: 500ms, 1.5s; transform: scale(-1); }
.glyph.g3 { right: 12%; bottom: 8%; animation-delay: 700ms, 3s; }
.glyph.g4 { left: 8%; bottom: 12%; animation-delay: 900ms, 4.5s; }
@keyframes glyph-in { to { opacity: 1; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 700px) { .glyph.g1, .glyph.g3, .glyph.g4 { display: none; } .glyph.g2 { top: 1.5rem; } }

/* ---------- Prosa que se enciende (manifiesto) ---------- */
.prose-reveal { padding: 10vh 0 6vh; }
.prose-reveal .line {
  font-family: var(--ff-display); font-size: var(--step-4); font-weight: 500; line-height: 1.05; letter-spacing: -.03em;
  margin: 0; max-width: 24ch; text-wrap: pretty;
  color: color-mix(in srgb, var(--bi-ink) calc(var(--p, 0) * 100%), var(--bi-faint));
  transition: color 120ms linear;
}
.prose-reveal .statement { margin-top: clamp(1.5rem, 4vh, 3rem); }
.prose-reveal .statement.big { margin-top: clamp(2.5rem, 8vh, 5rem); }
.prose-reveal .line .accent { color: color-mix(in srgb, var(--bi-brand) calc(var(--p, 0) * 100%), var(--bi-faint)); }

/* ---------- Ticker ---------- */
.ticker { border-block: 1px solid var(--bi-line); padding: 1.1rem 0; overflow: hidden; position: relative; --fade: min(12rem, 16vw); }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--fade); z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bi-bg), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--bi-bg), transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker-drift 64s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-strip { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0 2rem 0 0; }
.ticker-strip li { font-family: var(--ff-mono); font-size: var(--step-0); letter-spacing: .1em; text-transform: uppercase; color: var(--bi-muted); white-space: nowrap; display: flex; align-items: center; gap: 2rem; }
.ticker-strip li::after { content: "·"; color: var(--bi-brand); }
.ticker-strip li strong { color: var(--bi-ink); font-weight: 400; }
@keyframes ticker-drift { to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- Secciones ---------- */
.section { padding: var(--space-section) 0; }
.section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
@media (min-width: 900px) { .section-head { grid-template-columns: 7fr 5fr; align-items: end; gap: 3rem; } .section-head .sub { padding-bottom: .4rem; } }
.section-head .sub { font-size: var(--step-1); line-height: 1.4; color: var(--bi-body); margin: 0; max-width: 40ch; text-wrap: pretty; }

/* Bloques de color */
.block { color: var(--bi-on-dark); }
.block-dark { background: var(--bi-block-dark); }
.block-olive { background: var(--bi-block-olive); color: #FCF8EC; }
.block-brand { background: var(--bi-brand-deep); color: var(--bi-on-brand); }
.block h2, .block h3, .block strong { color: inherit; }
.block .sub, .block p { color: color-mix(in srgb, currentColor 90%, transparent); }
.block .eyebrow { color: color-mix(in srgb, currentColor 78%, transparent); }
.block-brand .eyebrow::before, .block-olive .eyebrow::before { background: currentColor; }
.block-dark h2 em { color: #7D3BF4; }
:root[data-theme="light"] .block-dark h2 em { color: var(--bi-brand); }
.block-brand h2 em { color: inherit; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .08em; }

/* Grids y tarjetas */
.grid-2 { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--bi-line); border: 1px solid var(--bi-line); }
@media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.grid-3 { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); background: var(--bi-line); border: 1px solid var(--bi-line); }
.card { background: var(--bi-bg); padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem; }
.card .label { color: var(--bi-brand); }
.card h3 { margin: .25rem 0 0; }
.card p { margin: 0; color: var(--bi-body); font-size: var(--step-0); }
.card .source { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--bi-muted); margin-top: auto; padding-top: 1rem; }
.card .big-num, .big-num { font-family: var(--ff-display); font-size: var(--step-6); font-weight: 500; line-height: .9; letter-spacing: -.04em; color: var(--bi-ink); margin: .5rem 0 .25rem; }
.big-num .pct { font-size: .45em; color: var(--bi-brand); margin-left: .05em; }
.block .grid-2, .block .grid-3 { background: color-mix(in srgb, currentColor 22%, transparent); border-color: color-mix(in srgb, currentColor 22%, transparent); }
.block .card { background: transparent; }
.block .card p, .block .card .source { color: color-mix(in srgb, currentColor 86%, transparent); }
.block .card .label { color: currentColor; }
/* Sobre crema, las tarjetas llevan un tinte suave en lugar del gris del gap */
.block-dark .card, .block-dark .hubs-brief li, .block-dark .points li { background: color-mix(in srgb, currentColor 5%, var(--bi-block-dark)); }
.card blockquote { margin: .25rem 0 0; font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; color: var(--bi-ink); text-wrap: pretty; }
.block .card blockquote { color: inherit; }
.card .btn { align-self: flex-start; margin-top: auto; }
.card .cta-text { margin-top: auto; padding-top: 1rem; }
.card .gain { color: var(--bi-ink); font-weight: 500; }
.card .gain::before { content: "→ "; color: var(--bi-brand); }
.block .card .gain { color: inherit; }
.block .card .gain::before { color: currentColor; }
.card.link-card { transition: background var(--dur-base); }
.card.link-card:hover { background: var(--bi-bg-2); }

/* Tres voces (citas anónimas) */
.voices { list-style: none; margin: clamp(2.5rem, 2rem + 3vw, 4rem) 0 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.voice { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--bi-brand); display: flex; flex-direction: column; gap: 1rem; }
.voice p { margin: 0; font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--bi-ink); text-wrap: pretty; }
.voice footer { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); margin-top: auto; }
.voice footer::before { content: "— "; color: var(--bi-brand); }
.closing { margin: clamp(2.5rem, 2rem + 3vw, 4rem) 0 0; font-family: var(--ff-display); font-size: var(--step-3); font-weight: 500; line-height: 1.1; letter-spacing: -.025em; color: var(--bi-ink); max-width: 32ch; text-wrap: pretty; }
.closing em { font-style: normal; color: var(--bi-brand); }

/* Franja del programa personal (B2C) */
.b2c-band { margin-top: 2rem; padding: 1.75rem 2rem; border: 1px solid var(--bi-personal); background: color-mix(in srgb, var(--bi-personal) 10%, transparent); display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; justify-content: space-between; }
.b2c-band .label { color: var(--bi-personal); margin-bottom: .5rem; display: block; }
.b2c-band p { margin: 0; color: var(--bi-ink); font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -.015em; line-height: 1.25; max-width: 34ch; text-wrap: pretty; }
.btn-personal { border-color: var(--bi-personal); color: var(--bi-personal); }
.btn-personal:hover { background: var(--bi-personal); border-color: var(--bi-personal); color: #fff; }

/* Resumen de hubs (Home) y "cómo contratarlo" */
.hubs-brief { list-style: none; margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); background: color-mix(in srgb, currentColor 22%, transparent); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.hubs-brief li { padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.hubs-brief .label { color: currentColor; opacity: .7; }
.hubs-brief h3 { font-size: var(--step-1); margin: .5rem 0 0; }
.hubs-brief p { margin: 0; font-size: var(--step-0); }
.hire { margin-top: 2.5rem; display: grid; gap: 1rem; padding: 1.5rem 0; border-block: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
@media (min-width: 900px) { .hire { grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; } }
.hire .label { color: currentColor; opacity: .7; }
.hire p { margin: 0; font-size: var(--step-0); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: .55rem .8rem; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.chips.brand li { border-color: var(--bi-brand); color: var(--bi-brand); }
.ic-personal { margin: 1.5rem 0 0; font-size: var(--step-0); }
.ic-personal a { color: var(--bi-personal); font-weight: 500; }
.ic-personal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.block-dark .ic-personal a { color: var(--bi-personal-deep); }
.ic-personal .chips { display: inline-flex; vertical-align: middle; margin-left: .5rem; }
.section-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Comunidad (franja corta) */
.community { padding: 0 0 var(--space-section); }
.community .cta-band { margin-top: 0; }
.community .eyebrow { margin-bottom: .75rem; }

/* Listas de puntos y "qué te llevas" */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); background: var(--bi-line); border: 1px solid var(--bi-line); }
.points li { background: var(--bi-bg); padding: 1.5rem; display: grid; gap: .4rem; }
.points .label { color: var(--bi-brand); }
.points strong { display: block; font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.points p { margin: 0; color: var(--bi-body); }
.block .points { background: color-mix(in srgb, currentColor 22%, transparent); border-color: color-mix(in srgb, currentColor 22%, transparent); }
.block .points li { background: transparent; }
.block .points .label { color: currentColor; }
.checks.big { font-size: var(--step-1); line-height: 1.35; gap: 1rem; margin-top: 0; max-width: var(--measure); }
.checks.big li { padding-left: 1.75rem; color: var(--bi-ink); }
.checks.big li::before { background: var(--bi-brand); top: .55em; width: 10px; height: 10px; }
.block .checks.big li { color: inherit; }
.block .checks.big li::before { background: currentColor; }
.timeline.compact .hub { min-height: 0; }
.timeline.compact .hub h3 { margin-top: 1.25rem; }
.two-col { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.two-col h3 { font-size: var(--step-2); margin-bottom: 1rem; }
.two-col .ic-list li { grid-template-columns: 3rem 1fr; padding: 1rem 0; }
.two-col .ic-list h3 { font-size: var(--step-1); }
.base-text { font-size: var(--step-1); line-height: 1.45; color: var(--bi-body); max-width: var(--measure); margin: 0 0 2rem; }
.cta-band.tall { flex-direction: column; align-items: flex-start; padding: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.cta-band.tall h2 { font-size: var(--step-4); max-width: 26ch; margin-bottom: .75rem; }
.cta-band.tall p { max-width: 52ch; }
.cta-band .aside-link { margin: 1rem 0 0; font-size: var(--step--1); }
.cta-band .aside-link a { color: var(--bi-brand); border-bottom: 1px solid color-mix(in srgb, var(--bi-brand) 40%, transparent); }
.cta-band .aside-link a:hover { color: var(--bi-ink); border-color: var(--bi-ink); }
.block .cta-band { border-color: color-mix(in srgb, currentColor 30%, transparent); }
.block .cta-band .aside-link a { color: inherit; border-color: color-mix(in srgb, currentColor 40%, transparent); }
.form.simple { max-width: 32rem; }

/* Revelado al hacer scroll */
.reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity var(--dur-slow) var(--ease-expo-out), transform var(--dur-slow) var(--ease-expo-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- IC (bloque oscuro) ---------- */
.ic-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .ic-grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.ic-figure { margin: 0; display: grid; place-items: center; }
.ic-figure svg { width: min(100%, 420px); height: auto; }
.icg-a { stop-color: #7D3BF4; }
.icg-b { stop-color: #B69AF9; }
.ic-ring { fill: none; stroke: color-mix(in srgb, currentColor 22%, transparent); stroke-width: 1; }
.ic-ring-dash { stroke-dasharray: 3 6; }
.ic-axes line { stroke: color-mix(in srgb, currentColor 22%, transparent); stroke-width: 1; }
.ic-shape { fill-opacity: .2; stroke-width: 2; stroke-linejoin: round; }
.ic-dots circle { fill: #7D3BF4; }
:root[data-theme="light"] .ic-dots circle, :root[data-theme="light"] .ic-num { color: #B69AF9; fill: #B69AF9; }
:root[data-theme="light"] .block-dark h2 em { color: #B69AF9; }
.ic-labels text { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; fill: currentColor; }
.ic-center { font-family: var(--ff-display); font-size: 40px; font-weight: 500; letter-spacing: -.04em; fill: currentColor; }
.ic-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.ic-list li { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.ic-num { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .1em; color: #7D3BF4; padding-top: .35rem; }
.ic-list h3 { margin: 0 0 .35rem; }
.ic-list p { margin: 0; }
.block-dark .ic-list p { color: color-mix(in srgb, currentColor 75%, transparent); }

/* ---------- Metodología ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); background: var(--bi-line); border: 1px solid var(--bi-line); }
.hub { background: var(--bi-bg); padding: 1.75rem; display: flex; flex-direction: column; gap: .5rem; min-height: 20rem; }
.hub-step { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .1em; color: var(--bi-brand); display: flex; justify-content: space-between; align-items: center; }
.hub-step .hub-time { color: var(--bi-muted); }
.hub h3 { margin-top: 2.5rem; }
.hub-tag { color: var(--bi-ink); font-weight: 500; margin: 0 0 .5rem; }
.hub-body { margin: 0; color: var(--bi-body); }
.cta-band { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; padding: 2rem; border: 1px solid var(--bi-line); }
.cta-band h3 { margin-bottom: .3rem; }
.cta-band p { margin: 0; max-width: 46ch; color: var(--bi-body); }

/* ---------- Statement de sección ---------- */
.statement {
  font-family: var(--ff-display); font-size: var(--step-6); font-weight: 500; line-height: .95; letter-spacing: -.035em;
  max-width: 24ch; margin: 0; text-wrap: balance; color: var(--bi-ink);
}
.manifesto { display: grid; gap: 1.5rem; max-width: var(--measure); font-size: var(--step-1); line-height: 1.45; color: var(--bi-body); margin-top: 2.5rem; }
.manifesto strong { color: var(--bi-ink); font-weight: 500; }

/* Valores */
.values { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--bi-line); border: 1px solid var(--bi-line); }
@media (min-width: 600px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .values { grid-template-columns: repeat(3, 1fr); } }
.values li { background: var(--bi-bg); padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.values .label { color: var(--bi-brand); }
.values h3 { font-size: var(--step-1); margin: .5rem 0 0; }
.values p { margin: 0; color: var(--bi-body); font-size: var(--step-0); }

/* ---------- Equipo ---------- */
.team { gap: 1.5rem; background: none; border: 0; }
.person { display: flex; flex-direction: column; gap: .4rem; }
.person img { aspect-ratio: 608 / 658; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter var(--dur-slow) var(--ease-expo-out); margin-bottom: .75rem; border: 1px solid var(--bi-line); }
.person:hover img { filter: none; }
.person h3 { display: flex; align-items: center; gap: .5rem; font-size: var(--step-2); }
.person .li { color: var(--bi-muted); display: inline-grid; place-items: center; }
.person .li:hover { color: var(--bi-brand); }
.person .role { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-brand); margin: 0 0 .6rem; }
.person p:last-child { color: var(--bi-body); margin: 0; }

/* ---------- Lead magnet (bloque brand) ---------- */
.lead-magnet .grid-lm { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .lead-magnet .grid-lm { grid-template-columns: 6fr 6fr; gap: 5rem; } }
.checks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .6rem; }
.checks li { padding-left: 1.4rem; position: relative; }
.checks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: currentColor; }

/* ---------- Formularios ---------- */
.form { display: grid; gap: .9rem; padding: 1.75rem; border: 1px solid var(--bi-line); background: var(--bi-bg); color: var(--bi-body); }
.form h3 { margin: 0 0 .25rem; color: var(--bi-ink); }
.form label { display: grid; gap: .4rem; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--bi-muted); }
.form-row { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; font-family: var(--ff-body); font-size: var(--step-0); letter-spacing: 0; text-transform: none; color: var(--bi-ink);
  background: var(--bi-surface); border: 1px solid var(--bi-line); border-radius: 0; padding: .7rem .85rem; transition: border-color var(--dur-fast);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--bi-brand); }
.form [aria-invalid="true"] { border-color: var(--bi-brand); background: color-mix(in srgb, var(--bi-brand) 6%, var(--bi-surface)); }
.form .check { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; font-family: var(--ff-body); text-transform: none; letter-spacing: 0; font-size: var(--step-0); color: var(--bi-body); }
.form .check a { color: var(--bi-brand); text-decoration: underline; text-underline-offset: 3px; }
.form .check input { width: 16px; height: 16px; margin-top: .2rem; accent-color: var(--bi-brand); }
.form .btn { justify-self: start; }
.form-msg { margin: 0; font-size: var(--step-0); min-height: 1.4em; }
.form-msg.ok { color: #86EFAC; }
:root[data-theme="light"] .form-msg.ok { color: #15803D; }
.form-msg.err { color: var(--bi-brand-deep); }
.fine { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .04em; color: var(--bi-muted); margin: 0; line-height: 1.5; text-transform: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.block-brand .form { background: var(--bi-bg); border-color: transparent; color: var(--bi-body); }
.block-brand .form h3 { color: var(--bi-ink); }
.block-brand .form label { color: var(--bi-muted); }
.block-brand .form .fine { color: var(--bi-muted); }
.block-brand .form .btn { border-color: var(--bi-brand); color: var(--bi-brand); }
.block-brand .form .btn:hover { background: var(--bi-brand); color: var(--bi-on-brand); }

/* ---------- FAQ ---------- */
.faq { max-width: 56rem; border-top: 1px solid var(--bi-line); }
.faq details { border-bottom: 1px solid var(--bi-line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.4rem 3rem 1.4rem 0; font-family: var(--ff-display); font-size: var(--step-2); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; color: var(--bi-ink); position: relative; transition: color var(--dur-fast); }
.faq summary:hover { color: var(--bi-brand); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-family: var(--ff-mono); font-size: 1.4rem; color: var(--bi-brand); transition: transform var(--dur-base) var(--ease-expo-out); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-body { padding: 0 0 1.6rem; color: var(--bi-body); max-width: 60ch; }
.faq-body p:last-child, .faq-body ul { margin-bottom: 0; }
.faq-body ul { padding-left: 1.2rem; }

/* ---------- Contacto ---------- */
.contact { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--bi-line); border: 1px solid var(--bi-line); }
@media (min-width: 960px) { .contact { grid-template-columns: 5fr 7fr; } }
.contact-card { padding: 2rem; background: var(--bi-bg); display: flex; flex-direction: column; }
.contact-card h3 { font-size: var(--step-3); margin-bottom: .75rem; }
.contact-card p { color: var(--bi-body); max-width: 36ch; }
.contact-email { display: grid; gap: .3rem; margin-top: auto; padding-top: 2rem; }
.contact-email a { font-family: var(--ff-display); font-size: var(--step-2); font-weight: 500; letter-spacing: -.02em; color: var(--bi-ink); }
.contact-email a:hover { color: var(--bi-brand); }
.contact-social { display: flex; gap: 1.25rem; margin: 1.25rem 0 0; }
.contact-social a { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); }
.contact-social a:hover { color: var(--bi-brand); }
.contact .form { border: 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--bi-line); padding: 3rem 0 1.5rem; overflow: hidden; }
.footer-wordmark { font-family: var(--ff-display); font-size: clamp(3rem, 1rem + 11vw, 11rem); font-weight: 500; line-height: .85; letter-spacing: -.045em; color: var(--bi-ink); margin: 0 0 3rem; text-transform: uppercase; }
.footer-wordmark span { display: block; }
.footer-wordmark .brand-word { color: var(--bi-brand); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; border-top: 1px solid var(--bi-line); padding-top: 2rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr auto; } }
.site-footer .logo-mask { color: var(--bi-ink); margin-bottom: 1rem; }
.tagline { color: var(--bi-body); max-width: 34ch; font-size: var(--step-0); }
.site-footer nav .label { display: block; margin: 0 0 1rem; color: var(--bi-ink); }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer nav a { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); }
.site-footer nav a:hover { color: var(--bi-brand); }
.social { display: flex; gap: .5rem; }
.social a { color: var(--bi-muted); width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--bi-line); border-radius: 50%; }
.social a:hover { color: var(--bi-brand); border-color: var(--bi-brand); }
.footer-bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--bi-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--bi-muted); }
.footer-bottom p { margin: 0; }

/* ---------- Legal / 404 ---------- */
.legal { padding: 3rem 0 5rem; }
.legal h1 { font-size: var(--step-6); font-weight: 500; letter-spacing: -.035em; line-height: .95; margin-bottom: 1.5rem; }
.legal h2 { font-size: var(--step-2); margin-top: 2rem; margin-bottom: .5rem; }
.legal .notice { padding: 1rem 1.2rem; border-left: 3px solid var(--bi-brand); background: var(--bi-bg-2); color: var(--bi-body); }
.legal .sub { font-size: var(--step-1); color: var(--bi-body); }

/* ---------- Reinvención profesional (B2C) ---------- */
.card.accent { border-top: 3px solid var(--accent, var(--bi-brand)); }
.card.accent .label { color: var(--accent, var(--bi-brand)); }
.mirror .card blockquote { font-size: var(--step-1); }
.mirror .mirror-close { justify-content: center; }
.mirror .mirror-close .closing { margin: 0; font-size: var(--step-2); max-width: none; }
.question { margin: 2.5rem 0 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--bi-brand); background: var(--bi-bg-2); font-family: var(--ff-display); font-size: var(--step-2); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: var(--bi-ink); max-width: var(--measure); text-wrap: pretty; }
.dims { margin-top: 2.5rem; }
.note { margin: 1.25rem 0 0; color: var(--bi-body); max-width: var(--measure); }
.card .lead-p { font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; color: var(--bi-ink); }
.levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--bi-line); }
.levels li { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--bi-line); }
.levels strong { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; font-weight: 400; color: var(--accent, var(--bi-brand)); white-space: nowrap; }
.levels strong::before { content: ""; width: 10px; height: 10px; background: var(--accent, var(--bi-brand)); }
.levels span { color: var(--bi-body); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; gap: .8rem; }
.steps li { counter-increment: paso; display: grid; grid-template-columns: 2.5rem 1fr; gap: .75rem; align-items: baseline; color: var(--bi-body); }
.steps li::before { content: "0" counter(paso); font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; color: var(--bi-brand); }
.form-intro { margin: 0 0 .25rem; font-family: var(--ff-body); text-transform: none; letter-spacing: 0; color: var(--bi-body); }
.form label .opt { text-transform: none; letter-spacing: 0; opacity: .7; }
.block-brand .checks li { color: inherit; }
.block-brand .checks strong { color: inherit; }
.mirror { grid-template-columns: 1fr; }
@media (min-width: 600px) { .mirror { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .mirror { grid-template-columns: repeat(3, 1fr); } }
/* Sobre los bloques azules del programa personal, el destacado va en crema subrayado */
body.personal .block-olive h2 em, body.personal .block-olive .closing em { color: #FCF8EC; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .08em; }
body.personal .block-dark h2 em, body.personal .block-dark .closing em { color: var(--bi-personal-deep); }

/* ---------- Infografía interactiva por rol (páginas de soluciones) ---------- */
.persona { display: grid; gap: 0; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.persona-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: color-mix(in srgb, currentColor 22%, transparent); border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
@media (min-width: 800px) { .persona-tabs { grid-template-columns: repeat(var(--tabs, 4), 1fr); } }
.persona-tab { position: relative; display: grid; gap: .6rem; justify-items: start; text-align: left; padding: 1.25rem 1.25rem 1.1rem; background: var(--bi-bg); border: 0; color: inherit; cursor: pointer; font: inherit; transition: background var(--dur-base), color var(--dur-base); }
.block-dark .persona-tab { background: var(--bi-block-dark); }
.persona-tab:hover { background: color-mix(in srgb, currentColor 6%, var(--bi-bg)); }
.block-dark .persona-tab:hover { background: color-mix(in srgb, currentColor 6%, var(--bi-block-dark)); }
.persona-tab[aria-selected="true"] { background: var(--bi-brand-deep); color: #FCF8EC; }
.persona-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; background: var(--bi-brand-deep); transform: translateX(-50%) rotate(45deg); }
.persona-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 50%; color: var(--bi-brand-deep); transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
.persona-icon svg { width: 22px; height: 22px; }
:root:not([data-theme="light"]) .persona-icon { color: var(--bi-brand); }
.persona-tab[aria-selected="true"] .persona-icon { background: #FCF8EC; border-color: #FCF8EC; color: var(--bi-brand-deep); }
.persona-step { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.persona-name { font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
.persona-panel { display: none; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); gap: 2rem; grid-template-columns: 1fr; }
.persona-panel.active { display: grid; animation: arrive 500ms var(--ease-emphasis) both; }
@media (min-width: 960px) { .persona-panel { grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; } }
.persona-quote { margin: 0; display: grid; gap: 1rem; }
.persona-quote .label { color: var(--bi-brand-deep); }
:root:not([data-theme="light"]) .persona-quote .label { color: var(--bi-brand); }
.persona-quote p { margin: 0; font-family: var(--ff-display); font-size: var(--step-3); font-weight: 500; line-height: 1.1; letter-spacing: -.025em; color: inherit; text-wrap: pretty; }
.persona-quote footer { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.flow { display: grid; gap: .75rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 640px) { .flow { grid-template-columns: 1fr auto 1fr; } }
.flow-step { padding: 1.25rem 1.4rem; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); display: grid; gap: .6rem; align-content: start; }
.flow-step .label { display: inline-flex; align-items: center; gap: .5rem; }
.flow-step .label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.flow-step p { margin: 0; color: inherit; font-size: var(--step-0); line-height: 1.45; }
.flow-step.hoy { opacity: .85; border-style: dashed; }
.flow-step.hoy .label { color: var(--bi-brand); }
.flow-step.con { border-color: var(--bi-brand-deep); background: color-mix(in srgb, var(--bi-brand-deep) 10%, transparent); }
.flow-step.con .label { color: var(--bi-brand-deep); }
:root:not([data-theme="light"]) .flow-step.con .label { color: var(--bi-brand); }
.flow-step.con p { font-weight: 500; }
.flow-arrow { display: grid; place-items: center; color: var(--bi-brand-deep); font-family: var(--ff-display); font-size: 2rem; line-height: 1; }
:root:not([data-theme="light"]) .flow-arrow { color: var(--bi-brand); }
.flow-arrow svg { width: 28px; height: 28px; }
@media (max-width: 639px) { .flow-arrow svg { transform: rotate(90deg); } }
.persona-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 clamp(1.5rem, 1rem + 2vw, 2.5rem) 1.25rem; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.persona-nav .btns { display: flex; gap: .5rem; }
.persona-nav button { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); color: inherit; padding: .45rem .8rem; border-radius: var(--radius-pill); cursor: pointer; }
.persona-nav button:hover { border-color: var(--bi-brand-deep); color: var(--bi-brand-deep); }
:root:not([data-theme="light"]) .persona-nav button:hover { border-color: var(--bi-brand); color: var(--bi-brand); }
.persona-tab[aria-selected="true"]:hover, .block-dark .persona-tab[aria-selected="true"]:hover { background: var(--bi-brand-deep); color: #FCF8EC; }
.persona-nav button, .persona-count { white-space: nowrap; }
@media (max-width: 520px) { .persona-nav { flex-wrap: wrap; } .persona-nav .btns { width: 100%; justify-content: space-between; } }
/* Franja B2C dentro del bloque violeta: crema y azul claro en ambos temas */
.block .b2c-band { --band-blue: #A9CBFF; border-color: var(--band-blue); background: color-mix(in srgb, var(--band-blue) 12%, transparent); }
.block .b2c-band p { color: #FCF8EC; }
.block .b2c-band .label { color: var(--band-blue); }
.block .b2c-band .btn-personal { border-color: var(--band-blue); color: var(--band-blue); }
.block .b2c-band .btn-personal:hover { background: var(--band-blue); border-color: var(--band-blue); color: #0F072E; }

/* ---------- Marca: propósito, firma, equipo ---------- */
.purpose { margin: 0 0 1.5rem; font-family: var(--ff-display); font-size: var(--step-2); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: var(--bi-brand); max-width: 34ch; text-wrap: pretty; }
.signature { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--bi-line); font-family: var(--ff-display); font-size: var(--step-2); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: var(--bi-ink); max-width: 30ch; text-wrap: pretty; }
.mirror-line { font-style: normal; color: var(--bi-brand-deep); }
:root:not([data-theme="light"]) .block-dark .mirror-line { color: #7D3BF4; }
.footer-sign { display: grid; gap: .25rem; text-align: right; }
.footer-sign .firma { text-transform: none; letter-spacing: 0; font-family: var(--ff-body); color: var(--bi-body); }
@media (max-width: 640px) { .footer-sign { text-align: left; } }
.person .city { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); margin: 0 0 .5rem; }
.person .motto { font-family: var(--ff-display); font-style: italic; font-size: var(--step-1); font-weight: 500; line-height: 1.2; letter-spacing: -.015em; color: var(--bi-brand); margin: 0 0 .75rem; }
.person .bio { color: var(--bi-body); margin: 0 0 1rem; }
.person .drive { margin: auto 0 0; padding-top: .9rem; border-top: 1px solid var(--bi-line); color: var(--bi-ink); display: grid; gap: .4rem; }
.person .drive .label { color: var(--bi-brand); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Método: tres fases sobre los cuatro hubs ---------- */
.phases-line { margin: 0 0 1rem; font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -.015em; color: var(--bi-ink); }
.phases { list-style: none; margin: 0 0 1px; padding: 0; display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--bi-line); border: 1px solid var(--bi-line); border-bottom: 0; }
.phases li { background: color-mix(in srgb, var(--bi-brand) 10%, var(--bi-bg)); padding: 1.1rem 1.5rem; display: grid; gap: .3rem; }
.phases .label { color: var(--bi-brand); }
.phases strong { font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -.015em; color: var(--bi-ink); }
.phases p { margin: 0; color: var(--bi-body); font-size: var(--step-0); }
@media (min-width: 960px) { .phases { grid-template-columns: repeat(4, 1fr); } .phases .span-2 { grid-column: span 2; } }
@media (min-width: 960px) { .phases + .timeline { border-top: 0; } }

/* ---------- Reinvención: ciclo de coherencia ---------- */
.journey { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .journey { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.journey-figure { margin: 0; display: grid; place-items: center; }
.journey-figure svg { width: min(100%, 440px); height: auto; overflow: visible; color: var(--bi-brand-deep); }
.j-ring { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 4 6; opacity: .55; }
.j-loop { fill: none; stroke: currentColor; stroke-width: 2.5; }
.j-loop-label { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; fill: currentColor; }
.j-node circle { fill: currentColor; }
.j-node text { font-family: var(--ff-display); font-size: 20px; font-weight: 500; fill: #FCF8EC; }
.j-node .j-label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; fill: var(--bi-on-dark); }
.journey-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.journey-steps li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); align-items: start; }
.j-num { width: 2rem; height: 2rem; border-radius: 50%; background: var(--bi-brand-deep); color: #FCF8EC; display: grid; place-items: center; font-family: var(--ff-display); font-size: 1rem; font-weight: 500; }
.journey-steps strong { display: block; font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; margin-bottom: .2rem; }
.journey-steps p { margin: 0; }
body.personal .block-olive .statement em { color: #FCF8EC; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .08em; }
.block .voice { border-top-color: color-mix(in srgb, currentColor 60%, transparent); }
.block-dark .cta-band p { color: inherit; opacity: .85; }

/* ---------- Quiénes somos: historia en tres pasos ---------- */
.purpose { font-size: var(--step-0); font-family: var(--ff-body); font-weight: 500; letter-spacing: 0; color: var(--bi-brand); max-width: 60ch; margin-bottom: 1.25rem; }
.story { display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-top: 3rem; align-items: start; }
@media (min-width: 900px) { .story { grid-template-columns: 7fr 5fr; gap: 4rem; } }
.story-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 2rem; }
.story-steps::before { content: ""; position: absolute; left: 1.35rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--bi-line); }
.story-steps > li { position: relative; display: grid; grid-template-columns: 2.75rem 1fr; gap: 1.25rem; align-items: start; }
.story-num { position: relative; z-index: 1; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--bi-bg); border: 1px solid var(--bi-brand); color: var(--bi-brand); display: grid; place-items: center; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .06em; }
.story-steps > li > div > strong { display: block; font-family: var(--ff-display); font-size: var(--step-3); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; color: var(--bi-ink); margin: .4rem 0 .5rem; }
.story-steps > li > div > p { margin: 0; color: var(--bi-body); font-size: var(--step-1); line-height: 1.4; max-width: 40ch; text-wrap: pretty; }
.story-chips { margin-top: 1rem; }
.story-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); background: var(--bi-line); border: 1px solid var(--bi-line); }
@media (min-width: 900px) { .story-stats { grid-template-columns: 1fr; } }
.story-stats li { background: var(--bi-bg); padding: 1.5rem; display: grid; gap: .5rem; align-content: start; }
.story-stats .big-num { font-size: var(--step-6); color: var(--bi-brand); margin: 0; }
.stat-label { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); line-height: 1.4; }
@media (max-width: 560px) { .story-stats .big-num { font-size: var(--step-4); } .story-stats li { padding: 1rem; } }
.story-close { margin-top: clamp(3rem, 2rem + 4vw, 5rem); max-width: 26ch; }
.values { margin-top: 3rem; }
.values .icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--bi-brand) 50%, transparent); color: var(--bi-brand); display: grid; place-items: center; margin-bottom: .5rem; }
.values .icon svg { width: 20px; height: 20px; }
.footer-sign .firma { font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -.015em; color: var(--bi-ink); text-transform: none; }
.footer-wordmark.small { font-size: var(--step-6); text-transform: none; line-height: .95; letter-spacing: -.035em; }
body.personal .footer-sign { display: none; }

/* ---------- Selector «¿En qué momento estás hoy?» (Reinvención) ---------- */
.momentos { display: grid; gap: 1.25rem; }
.momento-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 720px) { .momento-tabs { grid-template-columns: repeat(4, 1fr); } }
.momento-tab { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: .85rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--bi-line); background: transparent; color: var(--bi-ink); cursor: pointer; transition: color var(--dur-base) var(--ease-quad-out), border-color var(--dur-base) var(--ease-quad-out), background var(--dur-base) var(--ease-quad-out); }
.momento-tab:hover, .momento-tab:focus-visible { border-color: var(--bi-personal); color: var(--bi-personal); outline: none; }
.momento-tab[aria-selected="true"] { background: var(--bi-personal); border-color: var(--bi-personal); color: var(--bi-on-brand); }
.momento-stage { position: relative; }
.momento-panel { background: var(--bi-surface); border-top: 3px solid var(--bi-personal); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; gap: 1rem; justify-items: start; animation: momento-in var(--dur-base) var(--ease-quad-out) both; }
.momento-panel[hidden] { display: none; }
.momento-panel.leaving { animation: momento-out var(--dur-base) var(--ease-quad-out) both; }
@keyframes momento-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
@keyframes momento-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-.5rem); } }
.momento-num { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--bi-personal); }
.momento-text { margin: 0; font-family: var(--ff-display); font-size: var(--step-2); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: var(--bi-ink); max-width: 34ch; text-wrap: pretty; }
.momento-panel.initial .momento-text { color: var(--bi-muted); }
.momento-quote { margin: 0; font-style: italic; font-size: var(--step-1); line-height: 1.35; color: var(--bi-violet); max-width: 40ch; }
.momento-panel .btn { margin-top: .5rem; }

/* ---------- Productos para personas ---------- */
/* Desplegable «Para personas» con estilo nav-alt */
.site-nav .has-sub.alt .nav-sub-toggle { color: var(--bi-personal); }
.site-nav .has-sub.alt .nav-sub-toggle::before { content: ""; width: 7px; height: 7px; background: var(--bi-personal); flex: none; }
.site-nav .has-sub.alt .nav-sub-toggle:hover, .site-nav .has-sub.alt .nav-sub-toggle.active { color: var(--bi-ink); }
.site-nav .has-sub.alt .sub-menu a:hover { color: var(--bi-personal); }
.hero-note { margin: 0; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--bi-muted); line-height: 1.5; max-width: 40ch; }
@media (min-width: 900px) { .hero-cta-col .hero-note { text-align: right; } }
.b2c-band .hero-cta { justify-content: flex-end; }
/* Franja angosta (enlace directo al Índice) */
.strip-wrap { padding: 0 0 var(--space-section); }
.strip { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; background: var(--bi-surface); border-left: 3px solid var(--bi-personal); }
.strip p { margin: 0; color: var(--bi-ink); max-width: 56ch; text-wrap: pretty; }
/* Tres pasos del camino (masterclass) */
.path { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .path { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; } .path li:nth-child(2)::before, .path li:nth-child(3)::before { content: none; } }
.path-card { position: relative; background: color-mix(in srgb, currentColor 5%, var(--bi-block-dark)); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); padding: 1.6rem; display: grid; gap: .6rem; align-content: start; }
.path-card .label { color: var(--bi-personal-deep); }
.path-tag { font-family: var(--ff-display); font-size: var(--step-3); font-weight: 500; line-height: 1; letter-spacing: -.025em; }
.path-card p { margin: 0; }
.path-price { font-family: var(--ff-mono); font-size: var(--step-0); letter-spacing: .06em; text-transform: uppercase; margin-top: .5rem; }
.path-card .btn { justify-self: start; margin-top: .5rem; }
.path-card.featured { background: var(--bi-personal-deep); color: #FCF8EC; border-color: var(--bi-personal-deep); }
.path-card.featured .label { color: #FCF8EC; opacity: .85; }
.path-card.featured p { color: #FCF8EC; }
@media (min-width: 900px) {
  .path::before { display: none; }
  .path { grid-template-columns: 1fr 2rem 1fr 2rem 1fr; }
  .path-card:nth-child(1) { grid-column: 1; } .path-card:nth-child(2) { grid-column: 3; } .path-card:nth-child(3) { grid-column: 5; }
  .path-card:nth-child(2)::before, .path-card:nth-child(3)::before { content: "→"; position: absolute; left: -2rem; top: 50%; width: 2rem; text-align: center; transform: translateY(-50%); font-family: var(--ff-display); font-size: 1.5rem; color: var(--bi-personal-deep); }
}
@media (max-width: 899px) { .path-card::before { content: none; } }
/* Skills por dimensión */
.skills-num { margin: .25rem 0 0; font-family: var(--ff-display); font-size: var(--step-6); font-weight: 500; line-height: .9; letter-spacing: -.04em; color: var(--accent, var(--bi-brand)); }
.skills-num small { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: inherit; opacity: .8; }
/* Escala 0–100 en cuatro tramos */
.scale { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 720px) { .scale { flex-direction: row; } }
.scale li { padding: 1.1rem 1.2rem; display: grid; gap: .35rem; background: color-mix(in srgb, var(--bi-personal) calc(var(--shade) * 22%), var(--bi-bg-2)); color: var(--bi-ink); min-width: 0; }
.scale li[style*="--shade: 4"], .scale li[style*="--shade: 3"] { color: #FCF8EC; }
.scale-range { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; }
.scale strong { font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
/* Caja de precio */
.price-box { display: grid; gap: 2rem; grid-template-columns: 1fr; padding: clamp(1.75rem, 1rem + 3vw, 3rem); border: 1px solid var(--bi-personal); background: color-mix(in srgb, var(--bi-personal) 8%, var(--bi-bg)); align-items: center; }
@media (min-width: 900px) { .price-box { grid-template-columns: 7fr 5fr; gap: 3rem; } }
.price-box h2 { font-size: var(--step-4); margin: 0 0 1rem; max-width: none; }
.price { font-family: var(--ff-display); }
.price-note { font-family: var(--ff-mono); font-size: var(--step-0); letter-spacing: .06em; text-transform: uppercase; color: var(--bi-muted); }
.price-box .checks { margin-top: .5rem; }
.price-box .checks li::before { background: var(--bi-personal); }
.price-cta { display: grid; gap: .75rem; justify-items: start; }
@media (min-width: 900px) { .price-cta { justify-items: end; text-align: right; } }
.lead-magnet .price { font-size: var(--step-6); }
.form-hint { margin: -.25rem 0 0; font-family: var(--ff-body); text-transform: none; letter-spacing: 0; font-size: var(--step-0); color: var(--bi-ink); padding: .7rem .9rem; border-left: 3px solid var(--bi-personal); background: var(--bi-bg-2); }
.form-hint a { color: var(--bi-personal); font-weight: 500; }
/* Cifras en fila (Evolution Journey Personal) */
.story-stats.row { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .story-stats.row { grid-template-columns: repeat(4, 1fr); } }
/* Bloques de hubs */
.hub-blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: color-mix(in srgb, currentColor 22%, transparent); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.hub-block { background: color-mix(in srgb, currentColor 4%, var(--bi-block-dark)); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; gap: 1rem; }
.hub-block-head { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: baseline; }
.hub-block-head .label { color: var(--bi-personal-deep); }
.hub-dates { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.hub-block h3 { font-size: var(--step-3); max-width: 24ch; }
.hub-block-body { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hub-block-body { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.hub-block-body .label { display: block; margin-bottom: .5rem; opacity: .7; }
.hub-block-body p { margin: 0; }
.entregable { margin: 0; padding: 1rem 1.2rem; border-left: 3px solid var(--bi-personal-deep); background: color-mix(in srgb, var(--bi-personal-deep) 8%, transparent); display: grid; gap: .35rem; font-weight: 500; }
.entregable .label { color: var(--bi-personal-deep); }
.hub-pause { background: transparent; padding: 1rem clamp(1.5rem, 1rem + 2vw, 2.5rem); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; }
.hub-pause .label { opacity: .7; }
.hub-pause p { margin: 0; }
/* Calendario */
.calendar { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--bi-line); border: 1px solid var(--bi-line); }
@media (min-width: 900px) { .calendar { grid-template-columns: repeat(7, 1fr); } }
.calendar li { background: var(--bi-bg); padding: 1.1rem 1rem; display: grid; gap: .4rem; align-content: start; position: relative; }
.calendar li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bi-personal); margin-bottom: .25rem; }
.calendar li.pause::before { background: transparent; border: 1px solid var(--bi-personal); }
.cal-date { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--bi-personal); }
.calendar strong { font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; color: var(--bi-ink); }
.cal-hub { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--bi-muted); }
.next-step { border-color: var(--bi-personal); }
.points a { color: var(--bi-personal); font-weight: 500; }
.site-footer nav .label-personas { margin-top: 1.5rem; color: var(--bi-personal); }
/* Pie: cuadradito también en los enlaces «Para empresas», en el gris del texto */
.site-footer nav a.nav-biz { display: inline-flex; align-items: center; gap: .5rem; }
.site-footer nav a.nav-biz::before { content: ""; width: 7px; height: 7px; background: currentColor; flex: none; }

/* ---------- Equipo: tarjetas interactivas ---------- */
.team-x { position: relative; }
.tcard-btn { display: grid; gap: .35rem; justify-items: start; text-align: left; width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.tcard-photo { display: block; overflow: hidden; border: 1px solid var(--bi-line); margin-bottom: .75rem; width: 100%; }
.tcard-photo img { aspect-ratio: 608 / 658; object-fit: cover; width: 100%; filter: grayscale(100%) contrast(1.05); transition: transform var(--dur-slow) var(--ease-expo-out), filter var(--dur-slow); margin: 0; border: 0; }
.tcard-btn:hover .tcard-photo img, .tcard-btn:focus-visible .tcard-photo img { transform: scale(1.04); }
.tcard-name { font-family: var(--ff-display); font-size: var(--step-2); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; color: var(--bi-ink); }
.tcard-btn .city { margin: 0; }
.tcard-btn .motto { margin: .25rem 0 0; }
.tcard-more { margin-top: .75rem; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); padding: .55rem .9rem; border: 1px solid var(--bi-line); border-radius: var(--radius-pill); transition: color var(--dur-base), border-color var(--dur-base); }
.tcard-btn:hover .tcard-more, .tcard-btn:focus-visible .tcard-more { color: var(--bi-brand); border-color: var(--bi-brand); }
.tcard-btn:focus-visible { outline: 2px solid var(--bi-brand); outline-offset: 4px; }
.tcard-full { margin-top: 1rem; display: grid; gap: 1rem; }
.js .tcard-full { display: none; }
html:not(.js) .tcard-more { display: none; }
.tcard-li a, .team-text .tcard-li a { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); }
.tcard-li a:hover, .team-text .tcard-li a:hover { color: var(--bi-brand); }
/* Transiciones entre estados */
[data-team-grid], .team-detail { transition: opacity var(--dur-base) var(--ease-quad-out); }
.team-x.is-fading [data-team-grid], .team-x.is-fading .team-detail { opacity: 0; }
/* Vista abierta */
.team-detail { position: relative; }
.team-close { position: absolute; top: 0; right: 0; z-index: 2; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; background: var(--bi-bg); color: var(--bi-ink); border: 1px solid var(--bi-line); border-radius: var(--radius-pill); padding: .55rem .9rem; cursor: pointer; transition: color var(--dur-base), border-color var(--dur-base); }
.team-close:hover, .team-close:focus-visible { color: var(--bi-brand); border-color: var(--bi-brand); outline: none; }
.team-detail-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; padding-top: 3.25rem; }
@media (min-width: 900px) { .team-detail-grid { grid-template-columns: 5fr 7fr; gap: 4rem; padding-top: 0; } .team-detail-grid .team-text { padding-right: 11rem; } }
.team-photo img[data-team-photo] { width: 100%; aspect-ratio: 608 / 658; object-fit: cover; border: 1px solid var(--bi-line); filter: grayscale(100%) contrast(1.05); transition: filter 400ms var(--ease-quad-out); }
.team-photo img[data-team-photo].color { filter: none; }
.team-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
.team-thumb { display: grid; gap: .5rem; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.team-thumb img { width: 100%; aspect-ratio: 608 / 658; object-fit: cover; border: 1px solid var(--bi-line); filter: grayscale(100%) contrast(1.05); transition: transform var(--dur-slow) var(--ease-expo-out), border-color var(--dur-base); }
.team-thumb:hover img, .team-thumb:focus-visible img { transform: scale(1.03); border-color: var(--bi-brand); }
.team-thumb:focus-visible { outline: 2px solid var(--bi-brand); outline-offset: 4px; }
.team-thumb span { font-family: var(--ff-display); font-size: var(--step-0); font-weight: 500; color: var(--bi-ink); }
.team-text { display: grid; gap: .5rem; align-content: start; }
.team-text h3 { font-size: var(--step-3); margin: 0; outline: none; }
.team-text .city { margin: 0; }
.team-text .motto { margin: .25rem 0 .75rem; }
.team-text .bio { color: var(--bi-body); margin: 0 0 1rem; font-size: var(--step-0); line-height: 1.6; }
.team-text .drive { margin: 0 0 1rem; padding-top: .9rem; border-top: 1px solid var(--bi-line); color: var(--bi-ink); display: grid; gap: .4rem; }
.team-text .drive .label { color: var(--bi-brand); }
.team-text .tcard-li { margin: 0; }
@media (prefers-reduced-motion: reduce) { [data-team-grid], .team-detail, .team-photo img[data-team-photo], .tcard-photo img { transition: none; } }
[data-team-grid][hidden], .team-detail[hidden] { display: none !important; }
.team-text .city { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); }
.team-text .motto { font-family: var(--ff-display); font-style: italic; font-size: var(--step-1); font-weight: 500; line-height: 1.2; letter-spacing: -.015em; color: var(--bi-brand); }

/* ---------- Menú de tres puertas ---------- */
.nav-sub-head { display: inline-flex; align-items: center; gap: .35rem; }
.site-nav a.nav-sub-link { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); }
.site-nav a.nav-sub-link:hover, .site-nav a.nav-sub-link.active { color: var(--bi-brand); }
.site-nav .has-sub.alt a.nav-sub-link { color: var(--bi-personal); display: inline-flex; align-items: center; gap: .5rem; }
.site-nav .has-sub.alt a.nav-sub-link::before { content: ""; width: 7px; height: 7px; background: var(--bi-personal); flex: none; }
.site-nav .has-sub.alt a.nav-sub-link:hover, .site-nav .has-sub.alt a.nav-sub-link.active { color: var(--bi-ink); }
.site-nav .nav-sub-toggle.arrow { padding: .25rem .1rem; }
.site-nav .has-sub.alt .nav-sub-toggle.arrow::before { content: none; }
.site-nav .sub-menu li.overview { border-bottom: 1px solid var(--bi-line); margin-bottom: .35rem; padding-bottom: .35rem; }
.site-nav .sub-menu li.overview a { color: var(--bi-ink); }
@media (max-width: 1100px) {
  .nav-sub-head { display: flex; justify-content: space-between; width: 100%; }
  .site-nav a.nav-sub-link { display: block; padding: .8rem 0; font-size: var(--step-0); flex: 1; }
  .nav-sub-toggle { pointer-events: auto; }
  .nav-sub-toggle .caret { display: inline; }
  .site-nav .nav-sub-toggle.arrow { width: 44px; text-align: center; padding: .8rem 0; }
  .site-nav .nav-sub-toggle:not(.arrow) { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: .8rem 0; font-size: var(--step-0); color: var(--bi-muted); }
  .site-nav .sub-menu { display: none; }
  .site-nav .has-sub.open .sub-menu { display: flex; }
  .has-sub.open .nav-sub-toggle .caret { transform: translateY(1px) rotate(180deg); }
}

/* ---------- Home: dos puertas y adelanto del equipo ---------- */
.doors { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--bi-line); border: 1px solid var(--bi-line); }
@media (min-width: 800px) { .doors { grid-template-columns: 1fr 1fr; } }
.door { display: grid; gap: 1rem; align-content: start; padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); background: var(--bi-bg); color: inherit; transition: background var(--dur-base); }
.door:hover { background: var(--bi-bg-2); }
.door .label { color: var(--bi-brand); }
.door-text { margin: 0; font-family: var(--ff-display); font-size: var(--step-3); font-weight: 500; line-height: 1.1; letter-spacing: -.025em; color: var(--bi-ink); max-width: 20ch; text-wrap: pretty; }
.door .chips li { border-color: color-mix(in srgb, currentColor 35%, transparent); color: var(--bi-body); }
.door-cta { margin-top: .5rem; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-brand); transition: color var(--dur-base); }
.door:hover .door-cta { color: var(--bi-ink); }
.door.personal .label, .door.personal .door-cta { color: var(--bi-personal); }
.door.personal:hover { background: color-mix(in srgb, var(--bi-personal) 8%, var(--bi-bg)); }
.door.personal:hover .door-cta { color: var(--bi-ink); }
.team-teaser { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .team-teaser { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.team-teaser-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; max-width: 30rem; }
.team-teaser-photos img { width: 100%; aspect-ratio: 608 / 658; object-fit: cover; border: 1px solid var(--bi-line); filter: grayscale(100%) contrast(1.05); }
.team-teaser h2 { margin-bottom: .5rem; }
.page-first { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }

/* ---------- Landing Para personas ---------- */
.path.flow-steps .path-card { background: var(--bi-surface); border-color: var(--bi-line); }
.path.flow-steps .path-card .label { color: var(--bi-personal); }
.path.flow-steps .path-card::before { color: var(--bi-personal); }
.chips.dims li { border-color: var(--accent); color: var(--accent); }
.products { display: grid; gap: 1px; grid-template-columns: 1fr; background: color-mix(in srgb, currentColor 22%, transparent); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
@media (min-width: 900px) { .products { grid-template-columns: 1fr 1fr; } }
.product { display: grid; gap: 1rem; align-content: start; padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); background: color-mix(in srgb, currentColor 4%, var(--bi-block-dark)); color: inherit; transition: background var(--dur-base); }
.product:hover { background: color-mix(in srgb, var(--bi-personal-deep) 10%, var(--bi-block-dark)); }
.product .label { color: var(--bi-personal-deep); }
.product h3 { font-size: var(--step-3); }
.product p { margin: 0; }
.product .chips li { border-color: color-mix(in srgb, currentColor 35%, transparent); }
.product .fine { color: inherit; opacity: .75; }
.product .btn { justify-self: start; margin-top: .25rem; }
.block-dark .product .btn-personal { border-color: var(--bi-personal-deep); color: var(--bi-personal-deep); }
.product:hover .btn-personal { background: var(--bi-personal-deep); border-color: var(--bi-personal-deep); color: #fff; }

/* ---------- Home para los dos públicos ---------- */
.hero-cta-dual .btn { min-width: 14rem; justify-content: center; }
.hero .btn-personal { border-color: var(--bi-personal); color: var(--bi-personal); }
.hero .btn-personal:hover { background: var(--bi-personal); border-color: var(--bi-personal); color: #fff; }
.door-sub { margin: -.25rem 0 0; color: var(--bi-body); font-size: var(--step-0); max-width: 40ch; }
.about-brief { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .about-brief { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.about-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; max-width: 30rem; }
.about-photos li { display: grid; gap: .15rem; }
.about-photos img { width: 100%; aspect-ratio: 608 / 658; object-fit: cover; border: 1px solid var(--bi-line); filter: grayscale(100%) contrast(1.05); margin-bottom: .5rem; }
.about-photos strong { font-family: var(--ff-display); font-weight: 500; font-size: var(--step-0); letter-spacing: -.01em; color: var(--bi-ink); line-height: 1.2; }
.about-photos span { font-family: var(--ff-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); }
.about-text h2 { margin-bottom: 1rem; }
.about-text > p { color: var(--bi-body); max-width: 54ch; text-wrap: pretty; }
.facts-line { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 0; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); }
.facts-line li + li::before { content: "·"; margin: 0 .75rem; color: var(--bi-brand); }
.facts-line strong { color: var(--bi-ink); font-weight: 500; }
.more-link { margin: 1.5rem 0 0; }
.more-link a { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-brand); border-bottom: 1px solid color-mix(in srgb, var(--bi-brand) 40%, transparent); }
.more-link a:hover { color: var(--bi-ink); border-color: var(--bi-ink); }
.method-brief .card h3 { font-size: var(--step-2); }
.hub-flow { margin-top: .75rem; align-items: center; gap: .5rem .35rem; }
.hub-flow li { border-color: currentColor; }
.hub-flow li + li::before { content: "→"; display: inline-block; margin-right: .5rem; font-family: var(--ff-display); font-size: 1rem; opacity: .7; }
.faq-more { margin: 1.75rem 0 0; color: var(--bi-body); font-size: var(--step-0); }
.faq-more a { color: var(--bi-brand); border-bottom: 1px solid color-mix(in srgb, var(--bi-brand) 40%, transparent); }
.faq-more a:hover { color: var(--bi-ink); border-color: var(--bi-ink); }
.form-row[hidden] { display: none; }

/* ---------- Casos de uso reales: niveles, video, sigue explorando, rutas ---------- */
/* Contraste: pasos y puntos dentro de bloques de color */
.block .points p, .block .hub-body, .block .values p, .block .note { color: color-mix(in srgb, currentColor 82%, transparent); }
.block .points strong, .block .hub-tag { color: inherit; }

/* Niveles de contratación */
.levels .level-hubs { margin: 0; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); }
.levels .level-get { margin-top: auto; padding-top: 1rem; display: grid; gap: .3rem; color: var(--bi-ink); }
.levels .level-get .label { color: var(--bi-muted); }
.levels .offer { margin: 0; font-size: var(--step--1); color: var(--bi-body); border-top: 1px solid var(--bi-line); padding-top: .75rem; }
.levels .offer strong { color: var(--bi-brand); font-weight: 500; }
.block .levels .level-hubs, .block .levels .level-get .label, .block .levels .offer { color: color-mix(in srgb, currentColor 70%, transparent); }
.block .levels .level-get, .block .levels .offer strong { color: inherit; }

/* Espacio reservado para el video */
.video-section { padding-top: 0; }
.video-slot { margin: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; max-height: 32rem; display: grid; place-items: center; align-content: center; gap: 1rem; border: 1px dashed color-mix(in srgb, var(--bi-brand) 55%, transparent); background: color-mix(in srgb, var(--bi-brand) 6%, var(--bi-bg)); }
.video-play { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--bi-brand); color: var(--bi-brand); display: grid; place-items: center; }
.video-frame figcaption { display: grid; justify-items: center; gap: .25rem; text-align: center; }
.video-soon { font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -.015em; color: var(--bi-ink); }
body.personal .video-frame { border-color: color-mix(in srgb, var(--bi-personal) 55%, transparent); background: color-mix(in srgb, var(--bi-personal) 6%, var(--bi-bg)); }
body.personal .video-play { border-color: var(--bi-personal); color: var(--bi-personal); }

/* Sigue explorando */
.explore { padding-top: 0; }
.explore-links .link-card { gap: .5rem; color: inherit; }
.explore-links .link-card strong { font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -.015em; color: var(--bi-ink); }
.explore-links .link-card:hover strong { color: var(--bi-brand); }
.explore-links .link-card.personal .label { color: var(--bi-personal); }
.explore-links .link-card.personal:hover strong { color: var(--bi-personal); }

/* Recursos (bloque al final de las landings) */
.resource-band { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center; padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); border: 1px solid var(--bi-line); background: var(--bi-surface); }
@media (min-width: 800px) { .resource-band { grid-template-columns: 1fr auto; gap: 3rem; } }
.resource-band h3 { font-size: var(--step-3); margin: .25rem 0 .5rem; }
.resource-band p { margin: 0; color: var(--bi-body); max-width: 56ch; }
.resource-band.personal { border-color: var(--bi-personal); background: color-mix(in srgb, var(--bi-personal) 8%, var(--bi-bg)); }
.resource-band.personal .label { color: var(--bi-personal); }

/* Masterclass destacada (landing personas) */
.strip.featured { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); border: 1px solid var(--bi-personal); border-left-width: 3px; }
@media (min-width: 800px) { .strip.featured { grid-template-columns: 1fr auto; align-items: center; gap: 3rem; } }
.strip.featured h3 { font-size: var(--step-3); margin: .25rem 0 .5rem; max-width: 20ch; }
.strip.featured p { max-width: 50ch; }

/* Diagnóstico: dos miradas y línea de tiempo T0 · T1 · T2 */
.gap-line { margin: 2rem 0 0; font-family: var(--ff-display); font-size: var(--step-2); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: var(--bi-ink); max-width: 40ch; text-wrap: pretty; }
.block .gap-line { color: inherit; }
.gap-line em { font-style: normal; color: var(--bi-brand); }
.block-dark .gap-line em { color: #7D3BF4; }
.tline { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.tline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: color-mix(in srgb, currentColor 35%, transparent); }
.tline li { position: relative; padding: 1.5rem 1rem 0 0; display: grid; gap: .25rem; }
.tline li::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--bi-brand); }
.block-dark .tline li::before { background: #7D3BF4; }
.tline strong { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }
.tline p { margin: 0; font-size: var(--step-0); }
.tline-note { margin: 1.5rem 0 0; font-size: var(--step-0); }

/* Hubs sobre el cronograma */
.hub-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); background: var(--bi-line); border: 1px solid var(--bi-line); }
.hub-plan li { background: var(--bi-bg); padding: 1.5rem; display: grid; gap: .5rem; align-content: start; }
.hub-plan .label { color: var(--bi-brand); }
.hub-plan h3 { margin: .25rem 0 0; font-size: var(--step-2); }
.hub-plan .hub-time { font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); }
.hub-plan .hub-goal { margin: 0; color: var(--bi-ink); font-weight: 500; }
.hub-plan .hub-deliv { list-style: none; margin: .5rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--bi-line); display: grid; gap: .4rem; font-size: var(--step--1); color: var(--bi-body); }
.hub-plan .hub-deliv li { background: none; padding: 0 0 0 1rem; position: relative; display: block; }
.hub-plan .hub-deliv li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--bi-brand); }
.golive { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border: 1px solid var(--bi-line); border-top: 0; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); }
.golive span { padding: .8rem 1.5rem; position: relative; }
.golive span + span { border-left: 1px solid var(--bi-line); }
.golive span + span::before { content: ""; position: absolute; left: -7px; top: -7px; width: 13px; height: 13px; border-radius: 50%; background: var(--bi-brand); }
.golive strong { color: var(--bi-brand); font-weight: 400; }
@media (max-width: 899px) { .hub-plan { grid-template-columns: 1fr; } .golive { grid-template-columns: 1fr; } .golive span + span { border-left: 0; border-top: 1px solid var(--bi-line); } .golive span + span::before { left: 1.5rem; top: -7px; } }

/* Dirección y foco: dos rutas */
.milestone { margin: 0 0 1px; padding: 1.5rem clamp(1.25rem, 1rem + 1.5vw, 2rem); border: 1px solid var(--bi-line); background: color-mix(in srgb, var(--bi-brand) 8%, var(--bi-bg)); display: grid; gap: .35rem; }
.milestone p { margin: 0; font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--bi-ink); max-width: 60ch; text-wrap: pretty; }
.routes { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--bi-line); border: 1px solid var(--bi-line); }
@media (min-width: 900px) { .routes { grid-template-columns: 1fr 1fr; } }
.route { --rc: var(--bi-brand); background: var(--bi-bg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; gap: 1rem; align-content: start; border-top: 4px solid var(--rc); }
.route.b { --rc: var(--bi-personal); }
.route .label { color: var(--rc); }
.route h3 { font-size: var(--step-3); margin: 0; }
.route .look { margin: 0; color: var(--bi-ink); }
.route .look .label { display: block; margin-bottom: .35rem; }
.route .how { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; color: var(--bi-body); }
.route .how li { padding-left: 1.1rem; position: relative; }
.route .how li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--rc); }
.route .deliv { margin-top: .5rem; }
.route .deliv .label { display: block; margin-bottom: .5rem; color: var(--bi-muted); }
.route .chips li { border-color: color-mix(in srgb, var(--rc) 55%, transparent); color: var(--bi-ink); }
.route-cards .card.b .label { color: var(--bi-personal); }
.route-cards .card p { color: var(--bi-ink); font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }

/* Punto de partida: frases en formato cita */
.quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); background: var(--bi-line); border: 1px solid var(--bi-line); }
.quotes li { background: var(--bi-bg); padding: 1.5rem; }
.quotes blockquote { margin: 0; font-family: var(--ff-display); font-size: var(--step-2); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: var(--bi-ink); text-wrap: pretty; }
.quotes blockquote::before { content: ""; display: block; width: 2rem; height: 3px; background: var(--bi-brand); margin-bottom: 1rem; }

/* Soluciones: título que describe, para quién y cita en segundo plano */
.card .who { margin: 0; font-size: var(--step--1); color: var(--bi-muted); }
.card .pain { margin: .25rem 0 0; font-size: var(--step-0); color: var(--bi-body); font-style: italic; }
.block .card .who, .block .card .pain { color: color-mix(in srgb, currentColor 70%, transparent); }

/* Reporte compacto (Índice personal) */
.report-grid { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); background: var(--bi-line); border: 1px solid var(--bi-line); margin-bottom: 1px; }
.report-grid li { background: var(--bi-bg); padding: 1.25rem; display: grid; gap: .3rem; list-style: none; }
.report-grid strong { font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; color: var(--bi-ink); }
.report-grid span { font-size: var(--step--1); color: var(--bi-body); }
.report-grid .label { color: var(--bi-personal); font-size: var(--step--2); }
.hero-line { margin: 0; font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--bi-ink); max-width: 36ch; text-wrap: pretty; }
.hero-line em { font-style: normal; color: var(--bi-personal); }
.hub-block .one-line { margin: 0; display: grid; gap: .35rem; }
.hub-block .one-line .label { opacity: .7; }

/* Equipo: la foto principal más grande que las miniaturas */
.team-thumbs { max-width: 55%; }

/* Formulario «¿Desde dónde llegas?» */
.router-form { display: grid; gap: .75rem; grid-template-columns: 1fr; max-width: 32rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .router-form { grid-template-columns: 1fr auto; align-items: end; } }
.router-form label { display: grid; gap: .4rem; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); }
.router-form select { width: 100%; }
.router-form select { font: inherit; font-family: var(--ff-body); font-size: var(--step-0); letter-spacing: 0; text-transform: none; color: var(--bi-ink); background: var(--bi-surface); border: 1px solid var(--bi-line); border-radius: 0; padding: .7rem .85rem; min-width: 20rem; }
.router-form select:focus { outline: none; border-color: var(--bi-brand); }

/* ---------- Tres públicos: empresas, partners y personas ---------- */
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; } }
.resource-band.brand { border-color: var(--bi-brand); background: var(--bi-surface); }
.resource-band.brand .label, .resource-band.brand .eyebrow { color: var(--bi-brand); }
.resource-band.brand p { color: var(--bi-ink); font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; }
.resource-band.brand .eyebrow { font-family: var(--ff-mono); font-size: var(--step--1); font-weight: 400; letter-spacing: .08em; line-height: 1.4; margin-bottom: .5rem; }
.partner-band { margin-top: 1px; }
@media (min-width: 900px) { .doors.three { grid-template-columns: repeat(3, 1fr); } }
.solutions-2 .card { padding: clamp(1.75rem, 1rem + 2vw, 2.5rem); }
.solutions-2 .card h3 { font-size: var(--step-3); }
.solutions-2 .card .checks { margin: .75rem 0 .5rem; font-size: var(--step-0); }
.hero-link.brand a { color: var(--bi-brand); border-color: color-mix(in srgb, var(--bi-brand) 40%, transparent); }
.hero-link.brand a:hover { color: var(--bi-ink); border-color: var(--bi-ink); }

/* ---------- Revisión con las socias: hero que rota, riesgos, por qué, blog ---------- */
.hero-rotator { display: grid; gap: .35rem; }
.hero-fixed { margin: 0; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-brand); }
.hero-rotate { margin: 0; display: grid; font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--bi-ink); max-width: 34ch; text-wrap: pretty; }
.hero-rotate [data-rotate-item] { grid-area: 1 / 1; opacity: 0; transition: opacity 700ms ease-in-out; }
.hero-rotate [data-rotate-item].is-on { opacity: 1; }
.quote-rotator { display: grid; margin: 0 0 1rem; min-height: 4rem; }
.quote-rotator [data-rotate-item] { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity 700ms ease-in-out; font-family: var(--ff-display); font-size: var(--step-3); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; max-width: 26ch; text-wrap: pretty; }
.quote-rotator [data-rotate-item].is-on { opacity: 1; }
.quote-rotator [data-rotate-item]::before { content: ""; display: block; width: 2rem; height: 3px; background: currentColor; margin-bottom: 1rem; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .hero-rotate [data-rotate-item], .quote-rotator [data-rotate-item] { transition: none; } }
.chips.risks li { border-color: color-mix(in srgb, currentColor 45%, transparent); }
.risk-line { margin: .25rem 0 0; font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; color: var(--bi-ink); }
.block .risk-line { color: inherit; }
.partner-link { margin: 1.5rem 0 0; font-size: var(--step--1); max-width: 70ch; }
.partner-link a { color: inherit; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); white-space: nowrap; }
.partner-link a:hover { border-color: currentColor; }
.values.why { margin-top: 0; }
.benefits .card h3 { font-size: var(--step-1); }
.benefits .card p { font-size: var(--step--1); }
.route .keep .label { display: block; margin-bottom: .5rem; }
.block-dark .quote-rotator [data-rotate-item] { color: inherit; }
.post .container.narrow { max-width: 46rem; }
.post-meta { margin: 1rem 0 0; font-family: var(--ff-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-muted); }
.post-body { margin-top: 2.5rem; display: grid; gap: 1rem; font-size: var(--step-0); color: var(--bi-body); }
.post-body h2 { font-size: var(--step-2); margin: 1.5rem 0 0; color: var(--bi-ink); }
.post-body blockquote { margin: 1rem 0; padding-left: 1.25rem; border-left: 3px solid var(--bi-brand); font-family: var(--ff-display); font-size: var(--step-1); font-weight: 500; line-height: 1.3; color: var(--bi-ink); }
.post-body ul { padding-left: 1.2rem; }
.post .cta-band { margin-top: 3rem; }
.blog-list:empty { display: none; }
/* Método · el instrumento: filas parejas en las dos columnas, números de personas en un solo azul */
.two-col .ic-list { display: grid; grid-auto-rows: 1fr; }
.two-col .ic-list li { align-items: start; }
@media (min-width: 900px) { .two-col .ic-list li { min-height: 8.75rem; } }
.ic-personal-col .ic-num, .ic-personal-col .eyebrow { color: var(--bi-personal) !important; }

/* ---------- Celular: todo dentro del ancho de pantalla y hero a pantalla completa ---------- */
.card, .product, .door, .route, .cta-band > *, .resource-band > *, .strip > *, .hero-grid > *, .story-steps > li > div { min-width: 0; }
.story-steps > li { grid-template-columns: 2.75rem minmax(0, 1fr); }
.chips li { white-space: normal; line-height: 1.25; }
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; }
  .hero-cta .btn, .cta-band .btn, .resource-band .btn, .strip .btn, .price-cta .btn, .section-actions .btn, .product .btn, .card .btn { width: 100%; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta-dual .btn { min-width: 0; }
  .cta-band { padding: 1.5rem; }
  .cta-band.tall h2 { font-size: var(--step-3); }
  .resource-band, .strip.featured { padding: 1.5rem; }
  .chips li { font-size: var(--step--2); padding: .5rem .7rem; }
  .hero-rotate { max-width: none; }
  .announce .container { flex-wrap: wrap; }
}
/* El hero ocupa la pantalla del celular (la cabecera mide 60px; en la Home, además, la franja de la guía) */
@media (max-width: 900px) {
  .hero, .page-hero { min-height: calc(100svh - 60px); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
  .announce + main .hero { min-height: calc(100svh - 60px - 3.4rem); }
  .hero .container { width: min(100% - 2 * var(--page-inset), var(--container)); }
}
@media (max-width: 640px) { .btn-lg { font-size: var(--step--1); padding: .85rem 1rem; } }
.story { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .story { grid-template-columns: 7fr 5fr; } }
.story-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story-stats .stat-label { overflow-wrap: anywhere; }
@media (max-width: 560px) { .story-stats { grid-template-columns: 1fr; } .story-stats.row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .router-form select { min-width: 0; width: 100%; } .statement em { overflow-wrap: anywhere; } }
@media (max-width: 640px) { .hide-mobile { display: none; } .hero { padding-top: 2rem; padding-bottom: 2.5rem; } .page-hero { padding-top: 2rem; padding-bottom: 2.5rem; } }

/* ---------- Menú: un solo color para todas las entradas y marco en la página actual ---------- */
.site-nav .has-sub.alt .nav-sub-toggle, .site-nav a.nav-alt, .site-nav .has-sub.alt a.nav-sub-link { color: var(--bi-muted); }
.site-nav .has-sub.alt .nav-sub-toggle::before, .site-nav a.nav-alt::before, .site-nav .has-sub.alt a.nav-sub-link::before { content: none; }
.site-nav .has-sub.alt .nav-sub-toggle:hover, .site-nav a.nav-alt:hover, .site-nav .has-sub.alt a.nav-sub-link:hover,
.site-nav .has-sub.alt .nav-sub-toggle.active, .site-nav .has-sub.alt a.nav-sub-link.active, .site-nav .has-sub.alt .sub-menu a:hover { color: var(--bi-brand); }
/* Página actual: marco redondeado en la entrada principal y marcador en la subpágina */
.site-nav > ul > li.current > a:not(.btn), .site-nav > ul > li.current > .nav-sub-head, .site-nav > ul > li.current > .nav-sub-toggle { border: 1px solid var(--bi-brand); border-radius: var(--radius-pill); padding: .4rem .85rem; color: var(--bi-brand); }
.site-nav > ul > li.current > .nav-sub-head .nav-sub-link, .site-nav > ul > li.current > .nav-sub-head .nav-sub-toggle { color: var(--bi-brand); }
.site-nav .sub-menu a.active { color: var(--bi-brand); display: inline-flex; align-items: center; gap: .5rem; }
.site-nav .sub-menu a.active::before { content: ""; width: 7px; height: 7px; background: var(--bi-brand); flex: none; }
@media (max-width: 1100px) {
  .site-nav > ul > li.current > a:not(.btn), .site-nav > ul > li.current > .nav-sub-head, .site-nav > ul > li.current > .nav-sub-toggle { border: 0; border-left: 3px solid var(--bi-brand); border-radius: 0; padding-left: .75rem; }
}
/* El marco de la página actual y el marcador de la subpágina son siempre morados, también en las páginas de personas */
.site-nav > ul > li.current > a:not(.btn), .site-nav > ul > li.current > .nav-sub-head, .site-nav > ul > li.current > .nav-sub-toggle,
.site-nav > ul > li.current > .nav-sub-head .nav-sub-link, .site-nav > ul > li.current > .nav-sub-head .nav-sub-toggle, .site-nav .sub-menu a.active { color: var(--bi-violet); border-color: var(--bi-violet); }
.site-nav .sub-menu a.active::before { background: var(--bi-violet); }
.site-nav a:not(.btn):hover, .site-nav .nav-sub-toggle:hover, .site-nav .sub-menu a:hover { color: var(--bi-violet); }
/* Footer: la columna de personas con el mismo color que las demás */
.site-footer nav .label-personas { color: var(--bi-ink); }
.site-footer a.nav-alt { color: var(--bi-muted); }
.site-footer a.nav-alt::before { background: currentColor; }
.site-footer a.nav-alt:hover { color: var(--bi-brand); }
/* Contacto sin el bloque de email: las redes quedan abajo de la tarjeta */
.contact-social { margin-top: auto; padding-top: 2rem; }
/* Citas de clientes (Dirección y foco): firma pequeña bajo cada cita del rotador y cita corta en cada ruta */
.quote-rotator [data-rotate-item] p { margin: 0; }
.quote-rotator .sig { margin-top: .85rem; font-family: var(--ff-body); font-size: var(--step--1); font-weight: 400; line-height: 1.4; letter-spacing: 0; color: color-mix(in srgb, currentColor 65%, transparent); }
.route .quote { margin: 0; font-style: italic; font-size: var(--step-0); line-height: 1.4; color: var(--bi-violet); max-width: 40ch; }
/* Contacto: botón de agenda (Calendly) en la tarjeta */
.contact-cta { margin: 1.25rem 0 .5rem; }
.contact-card .contact-cta + .fine { margin: 0; }