/* Líderes editoriales: solo componentes de lideres-editoriales.html (prefijos lid- y pf). Hereda tokens y componentes de style.css. */
.lid-page #top::after, .lid-page #contacto::before { content: none; }

/* Hero: un molde, tres perfiles (núcleo + tres nodos unidos por hilos dorados que se dibujan al cargar) */
.lid-visual { max-width: 560px; }
.lid-art { width: 100%; height: auto; overflow: visible; }
.lid-art__g1 { stop-color: var(--gold-400); stop-opacity: .16; }
.lid-art__g2 { stop-color: var(--gold-400); stop-opacity: 0; }
.lid-art__tri, .lid-art__ring { fill: none; stroke: var(--line-dark-strong); stroke-dasharray: 2 6; }
.lid-art__thread { fill: none; stroke: var(--gold-400); stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 1 1; }
.lid-art__core circle { fill: var(--ink-900); stroke: var(--gold-400); }
.lid-art__node circle { fill: var(--ink-900); stroke: var(--line-dark-strong); }
.lid-art__ic { fill: none; stroke: var(--gold-400); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lid-art__t { font: 500 13px var(--font-mono); letter-spacing: .06em; fill: var(--stone-400); }
.lid-art__t--g { fill: var(--gold-300); }
html.js .lid-art__thread { stroke-dashoffset: 1; }
html.js .lid-art__tri, html.js .lid-art__ring, html.js .lid-art__core, html.js .lid-art__node { opacity: 0; }
html.js.is-ready .lid-art__tri, html.js.is-ready .lid-art__ring, html.js.is-ready .lid-art__core { opacity: 1; transition: opacity .6s var(--ease-out) .1s; }
html.js.is-ready .lid-art__thread { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-in-out) calc(.5s + var(--k) * .15s); }
html.js.is-ready .lid-art__node { opacity: 1; transition: opacity .6s var(--ease-out) calc(.9s + var(--k) * .15s); }
@media (prefers-reduced-motion: reduce) {
  html.js .lid-art__thread, html.js.is-ready .lid-art__thread { stroke-dashoffset: 0; transition: none; }
  html.js .lid-art__tri, html.js .lid-art__ring, html.js .lid-art__core, html.js .lid-art__node,
  html.js.is-ready .lid-art__tri, html.js.is-ready .lid-art__ring, html.js.is-ready .lid-art__core, html.js.is-ready .lid-art__node { opacity: 1; transition: none; }
}

/* Perfiles: tabs (la lógica es la de #rm en main.js) y cuatro bloques iguales por perfil */
.pf__steps { max-width: 720px; }
.pf__panel { margin-top: var(--s-4); }
.pf__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.pf__blk, .pf__case { border: 1px solid var(--line-light); border-radius: var(--r-md); background: var(--bezel-core); transition: opacity .3s var(--ease-out) calc(var(--k, 0) * 50ms), transform .3s var(--ease-out) calc(var(--k, 0) * 50ms), border-color .16s ease; }
.pf__blk { padding: 24px 20px; }
.pf__h { margin-bottom: var(--s-3); }
.pf__list { display: grid; gap: 14px; }
.pf__list li { position: relative; padding-left: 22px; font-weight: 500; line-height: 1.4; }
.pf__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pf__sys { display: grid; gap: 18px; }
.pf__sys li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; }
.pf__k { font-weight: 500; line-height: 1.3; }
.pf__sys .t-small { margin-top: 2px; }
.pf__cases { grid-column: 1 / -1; }
.pf__caselist { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.pf__case { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.pf__cn { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf__cn .num { font-size: .8125rem; letter-spacing: .06em; }
.pf__ct { font-weight: 500; line-height: 1.4; }
.pf__note { margin-top: var(--s-3); }
@media (prefers-reduced-motion: no-preference) {
  .pf .rm__panel.is-enter .pf__blk, .pf .rm__panel.is-enter .pf__case { opacity: 0; transform: translateY(8px); }
}
@media (hover: hover) and (pointer: fine) {
  .pf__case:hover { border-color: var(--line-light-strong); }
  .pf__case:hover .ico { translate: 0 -2px; }
}
@media (min-width: 768px) {
  .pf__caselist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf__blk { padding: 28px 24px; }
}
@media (min-width: 1024px) {
  .pf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .pf__caselist { gap: var(--s-3); }
}
@media (prefers-reduced-motion: reduce) {
  .pf__case:hover .ico { translate: none; }
}

/* Roadmap sobre fondo tinta: las piezas .rm de style.css están pensadas para marfil; aquí se pasan a los tonos oscuros */
#roadmap .rm__steps { background: rgba(236, 230, 218, .03); border-color: var(--line-dark); }
#roadmap .rm__steps .qx__tab { color: var(--stone-400); }
#roadmap .rm__steps .qx__tab[aria-selected="true"] { color: var(--ivory-200); }
#roadmap .rm__steps .qx__tab .num, #roadmap .rm__steps .qx__tab[aria-selected="true"] .num { color: var(--gold-400); }
#roadmap .rm__steps .qx__ind { background: var(--ink-800); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--line-dark-strong); }
#roadmap .rm__rail::before { background: var(--line-dark-strong); }
#roadmap .rm__rail::after { background: var(--gold-400); }
#roadmap .rm__rail li { color: var(--gold-400); }
html.js #roadmap .rm__rail li:not(.is-on) { color: var(--stone-400); }
#roadmap .rm__legend i { background: var(--gold-400); }
#roadmap .rm__legend i[data-s="a"] { background: transparent; border-color: var(--gold-400); }
#roadmap .rm__cards::before { background: var(--line-dark-strong); }
#roadmap .rm__card { border-color: var(--line-dark); }
#roadmap .rm__card::before { border-color: var(--gold-400); }
#roadmap .rm__s { border-color: var(--line-dark-strong); color: var(--stone-400); }
#roadmap .rm__s[data-s="1"], #roadmap .rm__s[data-s="2"] { color: var(--gold-400); }
#roadmap .bezel--final { border-color: var(--gold-400); }
@media (hover: hover) and (pointer: fine) {
  #roadmap .rm__card:hover { border-color: var(--line-dark-strong); }
}

/* Fuentes y medición */
.lid-3 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1023px) { .lid-3 .cell:nth-child(even) { border-left: 0; } }
@media (min-width: 1024px) {
  .lid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lid-4 .cell { border-left: 1px solid var(--line); }
  .lid-4 .cell:first-child { border-left: 0; }
}
.lid-quote { max-width: 760px; margin-top: var(--s-5); }
.lid-quote .bezel__core { display: grid; gap: 12px; padding: var(--s-4) var(--s-3); }
.lid-quote__q { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--fg); }
.lid-note { margin-top: var(--s-3); }

/* Solución: abrebocas de Bookflow (copy + chips + tres capturas con profundidad suave) */
.lid-sol { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.lid-sol__copy > * + * { margin-top: var(--s-3); }
.lid-sol__copy .t-lead { max-width: 52ch; }
.lid-chips { padding-top: var(--s-1); }
.lid-sol__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding-top: var(--s-2); }
.lid-sol__act + .t-small { margin-top: var(--s-2); }
.lid-sol__vis { min-width: 0; }
.lid-sol__stack { position: relative; isolation: isolate; padding-bottom: 20%; }
.lid-win { margin: 0; overflow: hidden; border: 1px solid rgba(201, 169, 110, .30); border-radius: var(--r-md); background: var(--ink-900); box-shadow: 0 28px 56px -28px rgba(0, 0, 0, .65); }
.lid-win img { display: block; width: 100%; height: auto; }
.lid-win__bar { display: flex; align-items: center; gap: 6px; height: 26px; padding-inline: 12px; background: var(--ink-800); border-bottom: 1px solid var(--line-dark); }
.lid-win__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(236, 230, 218, .22); }
.lid-win--main { position: relative; z-index: 1; width: 92%; margin-left: auto; }
.lid-win--back { display: none; position: absolute; z-index: 0; left: 0; bottom: 0; width: 56%; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6); }
.lid-phone { position: absolute; z-index: 2; right: 0; bottom: 0; width: 30%; margin: 0; padding: 5px; border: 1px solid rgba(201, 169, 110, .34); border-radius: 24px; background: var(--ink-900); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .7); }
.lid-phone img { display: block; width: 100%; height: auto; border-radius: 19px; }
.lid-sol__cap { margin-top: var(--s-3); }
/* Entrada: la ventana principal llega con el reveal de la sección; el teléfono y la ventana de atrás se suman con un leve desfase */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.is-fallback) .lid-sol__vis .lid-win--back, html.js:not(.is-fallback) .lid-sol__vis .lid-phone { opacity: 0; transform: translateY(24px); }
  html.js:not(.is-fallback) .lid-sol__vis.is-in .lid-win--back, html.js:not(.is-fallback) .lid-sol__vis.is-in .lid-phone { opacity: 1; transform: none; transition: opacity .7s var(--ease-out) .25s, transform .7s var(--ease-out) .25s; }
  html.js:not(.is-fallback) .lid-sol__vis.is-in .lid-phone { transition-delay: .45s; }
}
@media (min-width: 640px) {
  .lid-win--back { display: block; }
  .lid-phone { width: 24%; }
  .lid-sol__stack { padding-bottom: 24%; }
}
@media (min-width: 1024px) {
  .lid-sol { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); }
  .lid-sol__copy { grid-column: 1 / span 5; }
  .lid-sol__vis { grid-column: 6 / span 7; }
}