/* ==========================================================================
   ruta.css — /experiencias/ruta (F8.1 «De demos a Rutas»). Página oscura.
   REUSA diagnostico.css para el quiz/marcador/escaneo/anillo/form (clases dg-*).
   Esto solo agrega: hero (tesis) · dolores · camino de la Ruta · Beneficio.
   Solo tokens de variables.css. CSP-safe (cero inline; el JS pinta el resultado).
   ========================================================================== */

html.page-ruta, html.page-ruta body { background: var(--c-ink-900); }

.rt { background: var(--g-quiz); }
.rt-wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Hero (tesis) ---------- */
.rt-hero { padding: clamp(96px, 14vh, 150px) 0 clamp(44px, 6vh, 76px); }
.rt-hero__grid { display: grid; gap: clamp(30px, 4vw, 54px); }
@media (min-width: 920px) { .rt-hero__grid { grid-template-columns: 1.12fr .88fr; align-items: center; } }
.rt-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 .8rem var(--font-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--c-teal-200); }
.rt-kicker::before { content: ""; width: 28px; height: 1px; background: var(--c-teal-200); }
.rt-hero h1 { margin: 0; font-family: var(--font-serif); font-weight: 600; color: var(--c-on-dark); font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.rt-hero h1 em { font-style: italic; color: var(--c-teal-200); }
.rt-hero__lead { margin: 20px 0 0; max-width: 40ch; color: var(--c-on-dark-soft); font-size: var(--fs-lead); line-height: 1.55; }
.rt-hero__cta { display: flex; flex-wrap: wrap; gap: 1.3rem; align-items: center; margin-top: 28px; }
.rt-link { color: var(--c-teal-200); text-decoration: underline; text-underline-offset: 3px; font: 600 .95rem var(--font-sans); }
.rt-link:hover { color: #a5e0dc; }
.rt-meta { display: flex; flex-wrap: wrap; gap: 1.7rem; margin-top: 32px; }
.rt-meta span { display: flex; flex-direction: column; color: var(--c-on-dark-mut); font-size: .84rem; }
.rt-meta b { font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; color: var(--c-on-dark); line-height: 1; }

.rt-hero__card { padding: 24px; border-radius: var(--r-lg); border: 1px solid rgba(127, 208, 204, .16); background: var(--g-card); }
.rt-hero__cardh { margin: 0 0 14px; font: 700 .72rem var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-on-dark-mut); }
.rt-hstep { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; position: relative; }
.rt-hstep::before { content: ""; position: absolute; left: 6px; top: 20px; bottom: -7px; width: 1.5px; background: rgba(127, 208, 204, .18); }
.rt-hstep:last-child::before { display: none; }
.rt-hstep__d { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; margin-top: 4px; z-index: 1; }
.rt-hstep:nth-child(1) .rt-hstep__d { background: var(--c-tec); }
.rt-hstep:nth-child(2) .rt-hstep__d { background: var(--c-ven); }
.rt-hstep:nth-child(3) .rt-hstep__d { background: var(--c-fin); }
.rt-hstep__t { font-family: var(--font-serif); color: var(--c-on-dark); font-size: 1rem; line-height: 1.2; }
.rt-hstep__s { font-size: .8rem; color: var(--c-on-dark-mut); }
.rt-hstep__f { margin-left: auto; font: 700 .64rem var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-teal-200); padding-top: 3px; }

/* ---------- Secciones ---------- */
.rt-sec { padding: clamp(46px, 7vh, 84px) 0; }
.rt-sec--alt { background: var(--c-ink-900); }
.rt-sec__h { max-width: 640px; margin: 0 0 clamp(26px, 4vw, 42px); }
.rt-eyebrow { margin: 0; font: 700 .72rem var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--c-teal-200); }
.rt-sec__h h2 { margin: .6rem 0 0; font-family: var(--font-serif); font-weight: 600; color: var(--c-on-dark); font-size: var(--fs-h2); line-height: 1.08; text-wrap: balance; }
.rt-sec__h p { margin: .8rem 0 0; color: var(--c-on-dark-soft); font-size: var(--fs-lead-sm); line-height: 1.55; }

/* ---------- Dolores ---------- */
.rt-dolores { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .rt-dolores { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .rt-dolores { grid-template-columns: repeat(4, 1fr); } }
.rt-dolor { text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 14px; min-height: 138px;
  padding: 20px; border-radius: var(--r-md); border: 1px solid rgba(127, 208, 204, .16); background: var(--g-card);
  color: var(--c-on-dark); transition: transform var(--t-fast), border-color var(--t-fast); }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .rt-dolor:hover { transform: translateY(-4px); border-color: var(--c-teal-200); }
}
.rt-dolor:focus-visible { outline: 2px solid var(--c-teal-200); outline-offset: 3px; }
.rt-dolor__q { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.25; color: var(--c-on-dark); }
.rt-dolor__go { margin-top: auto; font: 700 .74rem var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-teal-200); display: flex; align-items: center; gap: .4em; }
.rt-dolor__go svg { transition: transform var(--t-fast); }
@media (hover: hover) { .rt-dolor:hover .rt-dolor__go svg { transform: translateX(3px); } }

/* ---------- Camino de la Ruta (dentro del resultado) ---------- */
.rt-sol { margin: 0 0 4px; font: 700 .82rem var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-teal-200); }
.rt-path { position: relative; margin-top: 26px; display: grid; gap: 16px; }
.rt-path::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 2px; background: var(--g-meter); }
.rt-tier { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.rt-node { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; z-index: 2; position: relative;
  background: var(--c-ink-900); border: 2px solid; font-family: var(--font-serif); font-size: 1.25rem; color: var(--c-on-dark); }
.rt-tier:nth-child(1) .rt-node { border-color: var(--c-tec); }
.rt-tier:nth-child(2) .rt-node { border-color: var(--c-ven); }
.rt-tier:nth-child(3) .rt-node { border-color: var(--c-fin); }
.rt-tcard { padding: 18px 20px; border-radius: var(--r-md); border: 1px solid rgba(127, 208, 204, .16); background: rgba(127, 208, 204, .05); }
.rt-trol { font: 700 .68rem var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-teal-200); }
.rt-trol i { font-style: normal; color: var(--c-on-dark-mut); }
.rt-tname { margin: .35rem 0 .3rem; font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; color: var(--c-on-dark); }
.rt-tline { margin: 0; color: var(--c-on-dark-soft); font-size: .95rem; line-height: 1.5; }
.rt-tgo { margin-top: 12px; display: inline-flex; align-items: center; gap: .4em; font: 700 .84rem var(--font-sans); color: var(--c-teal-200); text-decoration: none; }
.rt-tgo:hover { color: #a5e0dc; }
.rt-tgo:focus-visible { outline: 2px solid var(--c-teal-200); outline-offset: 3px; }
.rt-porque { margin-top: 26px; padding: 16px 20px; border-left: 3px solid var(--c-teal-200); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: rgba(127, 208, 204, .06); }
.rt-porque p { margin: 8px 0 0; color: var(--c-on-dark-soft); font-size: .98rem; line-height: 1.55; }
.rt-ritmo { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(127, 208, 204, .14); font-size: .95rem; color: var(--c-teal-200); }
.rt-rcta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.rt-note { margin-top: 14px; font-size: .85rem; color: var(--c-on-dark-mut); }
.rt-note b { color: var(--c-teal-200); font-weight: 600; }

/* ---------- Beneficio (bloqueado / desbloqueado) ---------- */
.rt-benef { padding: clamp(32px, 5vw, 56px); border-radius: var(--r-lg); border: 1px solid rgba(127, 208, 204, .14); background: var(--g-band); position: relative; }
.rt-seal { display: inline-flex; align-items: center; gap: .55em; padding: .4em 1em; border-radius: var(--r-pill); font: 700 .72rem var(--font-sans); letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(194, 135, 26, .5); color: #C2871A; }
.rt-seal--lock { border-color: rgba(234, 229, 216, .28); color: var(--c-on-dark-soft); }
.rt-benef h2 { margin: 1rem 0 .4rem; font-family: var(--font-serif); font-weight: 600; color: var(--c-on-dark); font-size: var(--fs-h2); line-height: 1.08; max-width: 18ch; }
.rt-benef__intro { margin: 0; color: var(--c-on-dark-soft); font-size: var(--fs-lead-sm); line-height: 1.55; max-width: 58ch; }
.rt-perks { display: grid; gap: 14px; margin: 28px 0 22px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .rt-perks { grid-template-columns: 1fr 1fr 1fr; } }
.rt-perk { padding: 20px; border-radius: var(--r-md); border: 1px solid rgba(127, 208, 204, .14); background: rgba(127, 208, 204, .05); }
.rt-perk h4 { margin: 0 0 .5rem; display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; font: 600 1rem var(--font-sans); color: var(--c-on-dark); }
.rt-perk__n { font-family: var(--font-serif); font-weight: 600; font-size: 1.4rem; color: var(--c-on-dark); font-variant-numeric: tabular-nums; }
.rt-perk__n.free { color: var(--c-teal-200); }
.rt-perk p { margin: 0; color: var(--c-on-dark-soft); font-size: .9rem; line-height: 1.5; }
.rt-benef__fine { margin: 0; color: var(--c-on-dark-mut); font-size: .82rem; line-height: 1.5; max-width: 70ch; }
.rt-benef__cta { margin-top: 22px; }

/* [hidden] pierde contra el display de clase → forzar en los bloques que togglea el JS */
.rt-benef[hidden], .rt-dolor[hidden] { display: none; }