/* ============================================================
   PRISMA · soluciones.css
   Hub de Soluciones (soluciones.html) y Brand Fit (brand-fit.html).
   Todo lo estructural (tipografía, color, botones, header, pie) sale de
   css/main.css; aquí viven solo las piezas propias:
     1. Tokens locales
     2. Portada del hub (solo texto)
     3. Prisma (el haz que se abre en cuatro caminos; hoy solo lo usa Brand Fit)
     4. Las cuatro formas, en columnas (el tablero para elegir)
     5. ¿Por dónde empezar?: Brand Fit y Brand & Media Analysis
     6. Brand Fit (el test)
   El hub tiene un solo trabajo: que cada persona sepa a cuál de las cuatro
   formas de trabajar entrar. Por eso no lleva gráficos ni vistas previas
   animadas (pedido del cliente, 2026-10-05): portada corta y las cuatro en
   columnas, a la vista en una sola pantalla.
   Movimiento: curvas de main.css (--ease-*), nada de rebotes.
   Con prefers-reduced-motion todo queda en su estado final, quieto.
   ============================================================ */

/* ---------- 1. Tokens locales ---------- */
:root {
  /* Color de cada rayo del prisma. Son decorativos (líneas, nunca texto):
     de la brasa a la luz. El del Shop es blanco, como su página. */
  --ray-0: #FF4201;
  --ray-1: #F4F4F6;
  --ray-2: #EE7D00;
  --ray-3: #F2A65A;
  /* --fs-display, --lh-display y --ls-display viven en css/main.css: el
     titular de portada es el mismo en toda la familia de Soluciones. */
}

/* html ya lleva scroll-padding-top: 96px (main.css). Brand Fit suma este
   margen a sus anclas; el hub no: /soluciones#analisis tiene que quedar a
   96 px del borde, no a 192. */
.bf-page [id] { scroll-margin-top: 96px; }

/* ---------- 2. Portada del hub ----------
   Corta a propósito: el titular a la izquierda y la descripción a la
   derecha, para que las cuatro columnas de abajo entren en la primera
   pantalla. .sol-top envuelve la portada y el tablero: comparten el fondo. */
.sol-top {
  position: relative; overflow: clip;
  /* Margen interior de cada columna del tablero. Lo comparte la portada: la
     descripción arranca en la misma vertical que el texto de la tercera
     columna, así titular y descripción se leen sobre la rejilla de abajo. */
  --sol-pad: clamp(20px, 1.9vw, 34px);
}
.sol-hero { position: relative; padding: calc(84px + 8.5vh) 0 clamp(30px, 5.2vh, 52px); }
.sol-hero__head { display: grid; gap: 26px; }
@media (min-width: 1024px) {
  .sol-hero__head { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 0; }
  /* La descripción cierra a la altura de la última línea del titular. */
  .sol-hero__side { padding: 0 0 .55em calc(var(--sol-pad) + 1px); }
}
/* Pantallas bajas (portátiles de 13" con la barra del navegador): menos aire
   arriba para que los cuatro botones sigan entrando en la primera pantalla. */
@media (min-width: 1024px) and (max-height: 740px) {
  .sol-hero { padding-top: calc(76px + 3.5vh); padding-bottom: clamp(22px, 4vh, 32px); }
}
@media (min-width: 1200px) and (max-height: 700px) {
  .sol-opt { padding-block: 22px 24px; }
  .sol-opt__link { padding-top: 16px; }
}
/* Teléfono: la portada arranca más arriba; lo que importa viene debajo. */
@media (max-width: 639.98px) { .sol-hero { padding-top: calc(72px + 6vh); padding-bottom: 28px; } }
.sol-hero__title {
  margin-top: 22px;
  font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display);
  max-width: 11.5em;
}
.sol-hero__title em { font-style: normal; color: var(--orange); }
.sol-hero__lead {
  max-width: 44ch; text-wrap: pretty;
  font-size: var(--fs-lead); line-height: 1.6; color: var(--text-on-ink-2);
}
.sol-hero__cue {
  margin-top: 14px; max-width: 44ch; text-wrap: pretty;
  font-size: var(--fs-lead); line-height: 1.5; color: var(--text-on-ink);
}
/* La flecha apunta a las cuatro columnas, que están justo debajo. El texto
   alternativo vacío evita que se lea "flecha". */
.sol-hero__cue::after {
  content: '↓' / ''; display: inline-block; margin-left: .45em;
  color: var(--orange); animation: sol-nudge-y 2.4s var(--ease-soft) infinite;
}
@keyframes sol-nudge-y { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(4px); } }

/* ---------- 3. Prisma ----------
   Un haz blanco entra por la izquierda, cruza un prisma de filete fino y
   sale abierto en cuatro rayos, uno por rótulo. El SVG cubre el bloque
   entero y js/soluciones.js lo redibuja con las medidas reales de los
   rótulos (ResizeObserver), así los rayos siempre llegan a su texto. */
.prism {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 64%);
  min-height: clamp(300px, 42vh, 380px);
}
@media (min-width: 600px) { .prism { grid-template-columns: minmax(0, 1fr) minmax(0, 52%); min-height: clamp(330px, 50vh, 480px); } }
@media (min-width: 1024px) { .prism { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); } }
.prism__svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.prism__labels {
  grid-column: 2; position: relative; z-index: 1;
  display: grid; align-content: space-between; gap: 8px;
  padding-block: 1%;
}
.prism__label {
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: baseline;
  padding: 11px 12px 12px; margin-left: -12px; border-radius: 12px;
  transition: background-color .25s var(--ease-ui), opacity .35s var(--ease-ui);
}
a.prism__label:hover, a.prism__label:focus-visible { background: var(--tint-soft); }
.prism__num {
  font-size: .76rem; letter-spacing: .1em; color: var(--text-on-ink-2);
  font-variant-numeric: tabular-nums;
}
.prism__name {
  font-size: clamp(1.08rem, 1.55vw, 1.4rem); font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.2; color: var(--text-on-ink);
  transition: color .25s var(--ease-ui);
}
.prism__desc {
  grid-column: 2; margin-top: 3px;
  font-size: .9rem; line-height: 1.4; color: var(--text-on-ink-2);
}
@media (max-width: 599px) {
  .prism__label { grid-template-columns: 2.1em minmax(0, 1fr); padding: 9px 10px 10px; margin-left: -10px; }
  .prism__desc { font-size: .84rem; }
}
.prism.is-hover .prism__label:not(.is-active) { opacity: .4; }
.prism__label.is-active .prism__name { color: var(--orange); }

.prism__shape { fill: rgb(var(--fg-rgb) / .035); stroke: rgb(var(--fg-rgb) / .42); stroke-width: 1; stroke-linejoin: round; }
.prism__facet { fill: none; stroke: rgb(var(--fg-rgb) / .12); stroke-width: 1; }
.prism__inner { fill: none; stroke: rgb(var(--fg-rgb) / .55); stroke-width: 1.4; stroke-linecap: round; }
.prism__beam { fill: none; stroke-width: 2; stroke-linecap: round; }
.prism__ray {
  fill: none; stroke: var(--c); stroke-width: var(--w, 1.5); stroke-linecap: round;
  opacity: var(--o, .9);
  transition: opacity .4s var(--ease-ui), stroke-width .4s var(--ease-ui), stroke .7s var(--ease-ui);
}
.prism__glow { fill: none; stroke-linecap: round; opacity: .5; }
.prism__glow--ray { stroke: var(--c); stroke-width: 7; opacity: calc(var(--o, .9) * .3); transition: opacity .4s var(--ease-ui), stroke .7s var(--ease-ui); }
.prism__dot { fill: var(--c); opacity: var(--o, .9); transition: opacity .4s var(--ease-ui), fill .7s var(--ease-ui); }
.prism__halo { fill: none; stroke: var(--c); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .3s var(--ease-ui), transform .5s var(--ease-enter); transform: scale(.6); }
.prism__ray.is-active { --w: 2.4; --o: 1; }
.prism.is-hover .prism__ray:not(.is-active),
.prism.is-hover .prism__dot:not(.is-active) { --o: .22; }
.prism.is-hover .prism__glow--ray:not(.is-active) { opacity: .04; }
.prism__halo.is-active { opacity: .7; transform: scale(1); }
/* Pulsos de luz que recorren el haz y después cada rayo. pathLength=100:
   un trazo de 7 que va de antes del principio (7) a después del final. */
.prism__pulse {
  fill: none; stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 7 93; stroke-dashoffset: 7; opacity: 0;
}
.prism.is-live .prism__pulse { opacity: 1; animation: prism-pulse 6.4s linear infinite; animation-delay: var(--d, 0s); }
.prism__pulse--beam { stroke: #fff; }
.prism__pulse--ray { stroke: var(--c); filter: brightness(1.35); }
@keyframes prism-pulse {
  0% { stroke-dashoffset: 7; }
  24% { stroke-dashoffset: -100; }
  100% { stroke-dashoffset: -100; }
}
/* En espera (Brand Fit sin respuestas): la luz entra al prisma pero todavía
   no se separa. Los rayos son hilos grises sin brillo ni pulsos; con la
   primera respuesta toman su color (las transiciones de arriba). */
.prism.is-latent .prism__ray { stroke: rgb(var(--fg-rgb) / .62); stroke-width: 1.1; }
.prism.is-latent .prism__dot { fill: rgb(var(--fg-rgb) / .5); }
/* (el brillo lleva su opacidad en línea, de setWeights: se apaga con el trazo) */
.prism.is-latent .prism__glow--ray { stroke: transparent; }
.prism.is-latent .prism__pulse--ray { opacity: 0; animation: none; }

/* ---------- 4. Las cuatro formas, en columnas ----------
   Un solo tablero partido por filetes, no cuatro cajas: es una marca y
   cuatro formas de trabajar. Cada columna dice lo mínimo para elegir (el
   nombre, la frase de quien la necesita y qué es en una línea) y toda ella
   es el enlace: el <a> del botón se estira hasta cubrirla (::after).
   De 640 px en adelante las filas van en subgrid: los nombres, las frases,
   las descripciones y los botones quedan a la misma altura en todas las
   columnas, como en una tabla. */
.sol-pick { position: relative; padding-bottom: clamp(20px, 4vh, 44px); }
.sol-board {
  --rb: calc(var(--r) - 1px);   /* radio interior: el del tablero menos su filete */
  display: grid; grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--line-on-ink); border-radius: var(--r);
  background: rgb(var(--fg-rgb) / .025);
}
.sol-opt {
  --rad: 0;
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(24px, 4.8vh, 48px) var(--sol-pad); border-radius: var(--rad);
  transition: background-color .25s var(--ease-ui);
}
.sol-opt + .sol-opt { border-top: 1px solid var(--line-on-ink); }
.sol-opt:first-child { --rad: var(--rb) var(--rb) 0 0; }
.sol-opt:last-child { --rad: 0 0 var(--rb) var(--rb); }
/* Cada camino (2026-10-08): el nombre va chico, como el kicker de la
   portada, y el titular es la promesa con la letra que antes tenía el
   nombre. Debajo, dos párrafos. */
.sol-opt__title {
  margin-top: clamp(10px, 1.6vh, 14px); max-width: 16em;
  font-size: clamp(1.4rem, 1.85vw, 1.78rem); font-weight: 500;
  line-height: 1.14; letter-spacing: -0.022em; color: var(--text-on-ink);
  text-wrap: balance;
}
.sol-opt__text {
  margin-top: clamp(14px, 2.4vh, 22px); max-width: 40ch;
  font-size: .93rem; line-height: 1.55; color: var(--text-on-ink-2); text-wrap: pretty;
}
.sol-opt__text p + p { margin-top: .8em; }
.sol-opt__link { margin-top: auto; padding-top: clamp(18px, 4vh, 40px); }
/* El enlace cubre la columna entera. Va sin position para que el ::after
   se mida contra .sol-opt; y el botón de dentro es solo su cara: nunca se
   le da transform al <a>, porque un transform lo volvería el contenedor del
   ::after y el clic soltado fuera del botón ya no contaría. */
.sol-opt__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--rad); }
.sol-opt__link:focus-visible { outline: none; }
.sol-opt__link:focus-visible::after { outline: 2px solid var(--orange); outline-offset: -3px; }
.sol-opt__btn { pointer-events: none; white-space: nowrap; }
@media (hover: hover) {
  .sol-opt:hover { background: rgb(var(--fg-rgb) / .055); }
  .sol-opt:hover .sol-opt__btn { background: var(--orange); border-color: var(--orange); color: var(--ink); }
  .sol-opt:hover .btn__arrow { transform: translateX(4px); }
}
.sol-opt:has(.sol-opt__link:focus-visible) .sol-opt__btn { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.sol-opt__link:active .sol-opt__btn { transform: scale(.97); }

/* Icono de cada camino (2026-10-08): cristal esmerilado con una luz naranja
   detrás que asoma por la esquina, al estilo de los iconos de cristal de
   Apple. La luz queda abajo a la derecha, casi toda tras el cristal (si
   asomaba arriba se leía como un globo de notificación). El dibujo va en blanco con el trazo de los pictogramas del
   comparador de Programas (48 × 48, 1,5 px, puntas redondas). La luz es un
   bloque con degradado; el cristal la difumina con backdrop-filter y solo
   el trozo que sale del borde se ve nítido. */
.sol-ico {
  --ico: 60px;
  position: relative; display: block; flex: none;
  width: var(--ico); height: var(--ico);
  margin-bottom: clamp(18px, 3vh, 28px);
  transition: transform .45s var(--ease-enter);
}
.sol-ico__orb {
  position: absolute; right: -16%; bottom: -16%; width: 68%; height: 68%;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--tangerine) 0%, var(--orange) 72%);
  box-shadow: 0 0 26px rgb(var(--orange-rgb) / .35);
  transition: transform .5s var(--ease-enter);
}
.sol-ico__orb--diamond { border-radius: 24%; transform: rotate(45deg) scale(.82); }
.sol-ico__orb--square { border-radius: 30%; transform: rotate(14deg) scale(.9); }
.sol-ico__glass {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 26%;
  color: rgb(var(--fg-rgb));
  background:
    linear-gradient(155deg, rgb(255 255 255 / .22) 0%, rgb(255 255 255 / .08) 50%, rgb(255 255 255 / .05) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.7);
  backdrop-filter: blur(12px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .38),
    inset 0 0 0 1px rgb(255 255 255 / .12),
    inset 0 -14px 20px -16px rgb(255 255 255 / .22),
    0 14px 28px -16px rgb(0 0 0 / .9);
}
.sol-ico__g {
  width: 66%; height: 66%; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .25));
}
.sol-ico__g * { vector-effect: non-scaling-stroke; }
.sol-ico__g .f { fill: rgb(var(--fg-rgb) / .9); stroke: none; }
.sol-ico__g path.f:first-child { fill: rgb(var(--fg-rgb) / .16); stroke: currentColor; }
/* Al pasar por la columna, el cristal sube un poco y la luz se desliza
   hacia dentro: se nota que es una capa detrás. */
@media (hover: hover) {
  .sol-opt:hover .sol-ico { transform: translateY(-3px); }
  .sol-opt:hover .sol-ico__orb { transform: translate(5px, 5px); }
  .sol-opt:hover .sol-ico__orb--diamond { transform: translate(5px, 5px) rotate(45deg) scale(.82); }
  .sol-opt:hover .sol-ico__orb--square { transform: translate(5px, 5px) rotate(14deg) scale(.9); }
}

@media (min-width: 640px) {
  .sol-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-opt, .sol-opt:first-child, .sol-opt:last-child { --rad: 0; }
  .sol-opt:nth-child(1) { --rad: var(--rb) 0 0 0; }
  .sol-opt:nth-child(2) { --rad: 0 var(--rb) 0 0; }
  .sol-opt:nth-child(3) { --rad: 0 0 0 var(--rb); }
  .sol-opt:nth-child(4) { --rad: 0 0 var(--rb) 0; }
  .sol-opt:nth-child(-n+2) { border-top: 0; }
  .sol-opt:nth-child(2n) { border-left: 1px solid var(--line-on-ink); }
  @supports (grid-template-rows: subgrid) {
    .sol-opt { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-items: start; justify-items: start; }
    .sol-opt__link { align-self: end; }
  }
}
/* En escritorio el tablero se queda en 2 × 2 (2026-10-08, a pedido): con
   los titulares y los dos párrafos, cuatro columnas quedaban angostas y
   altas. Las columnas son anchas, así que el margen interior crece (la
   descripción de la portada lo sigue y arranca en la misma vertical que el
   texto de la segunda columna) y los párrafos ganan algo de medida. */
@media (min-width: 1200px) {
  .sol-top { --sol-pad: clamp(34px, 3.2vw, 52px); }
  .sol-opt__text { max-width: 46ch; }
}
/* Teléfono: una lista. El nombre a la izquierda y la flecha a la derecha,
   como una fila que se toca entera; así las cuatro caben casi en una
   pantalla. El texto del botón sigue ahí para el lector de pantalla. */
@media (max-width: 639.98px) {
  .sol-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding-block: 18px 20px; }
  .sol-ico { --ico: 44px; grid-column: 1; grid-row: 1; margin: 0; }
  .sol-opt__kicker { grid-column: 2; grid-row: 1; }
  .sol-opt__link { grid-column: 3; grid-row: 1; margin: 0; padding: 0; }
  .sol-opt__title, .sol-opt__text { grid-column: 1 / -1; max-width: none; }
  .sol-opt__title { margin-top: 14px; }
  .sol-opt__text { margin-top: 10px; }
  .sol-opt__btn { width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; font-size: 1rem; }
  .sol-opt__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .sol-opt:active { background: rgb(var(--fg-rgb) / .055); }
}

/* ---------- 5. ¿Por dónde empezar? ----------
   Segundo plano: dos puertas quietas para quien no se reconoció arriba.
   El tiempo (2 minutos, 2 semanas) es lo que las distingue; lo demás es un
   título, una frase y un botón. Sin vistas previas ni animaciones propias. */
.sol-start { padding-top: clamp(48px, 9vh, 104px); }
.sol-start__head { margin-bottom: clamp(28px, 5vh, 52px); }
.sol-start .section__title { max-width: 30ch; }
.sol-start__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-on-ink-2); }
.sol-doors { display: grid; gap: 16px; }
@media (min-width: 900px) { .sol-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.sol-door {
  display: grid; gap: 22px clamp(26px, 3vw, 52px);
  padding: clamp(24px, 2.8vw, 44px); border-radius: var(--r);
  border: 1px solid var(--line-on-ink); background: rgb(var(--fg-rgb) / .025);
}
/* La columna del tiempo mide lo mismo en las dos puertas: sus textos
   arrancan en la misma vertical aunque "minutos" y "semanas" no midan igual. */
@media (min-width: 560px) { .sol-door { grid-template-columns: clamp(9.5rem, 13vw, 11.5rem) minmax(0, 1fr); } }
.sol-door__time { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; align-content: start; gap: 6px 10px; }
.sol-door__pre {
  grid-column: 1 / -1;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-ink-2);
}
.sol-door__num {
  font-weight: 200; font-size: clamp(4.2rem, 6.2vw, 5.8rem); line-height: .8;
  letter-spacing: -0.06em; font-variant-numeric: tabular-nums;
}
.sol-door__unit { font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 300; letter-spacing: -0.02em; }
.sol-door__body { display: flex; flex-direction: column; align-items: flex-start; }
.sol-door__title { margin-top: 12px; max-width: 22ch; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.sol-door__text { margin: 12px 0 24px; max-width: 48ch; font-size: .95rem; line-height: 1.55; color: var(--text-on-ink-2); text-wrap: pretty; }
/* Los dos botones quedan a la misma altura aunque un texto sea más largo. */
.sol-door .btn { margin-top: auto; }

/* ---------- 6. Brand Fit ---------- */
.bf {
  position: relative; overflow: clip;
  padding: calc(76px + 3vh) 0 clamp(64px, 10vh, 120px);
}
@media (min-width: 1024px) { .bf { padding-top: calc(90px + 6vh); } }
.bf__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1024px) {
  .bf__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 110px); align-items: start; }
  .bf.is-result .bf__grid { grid-template-columns: minmax(0, 1fr); }
}
.bf__main { position: relative; min-height: clamp(480px, 66vh, 660px); }
.bf.is-result .bf__main { min-height: 0; }
.bf__viz { display: none; }
@media (min-width: 1024px) {
  .bf__viz { display: block; position: sticky; top: 140px; }
  /* En el resultado el prisma se queda arriba a la derecha, con las dos
     rutas encendidas: es el mismo haz que se fue ordenando con las respuestas. */
  .bf.is-result .bf__viz { position: absolute; top: 0; right: var(--gutter); width: min(42%, 540px); }
  .bf.is-result .bf__viz .prism { min-height: 250px; }
  .bf.is-result .prism__desc { display: none; }
  .bf.is-result .bf__vizcap { display: none; }
}
.bf__viz .prism { min-height: 400px; grid-template-columns: minmax(0, 1fr) minmax(0, 58%); transition: min-height .5s var(--ease-enter); }
.bf__vizcap { margin-top: 18px; font-size: .85rem; color: var(--text-on-ink-2); max-width: 34ch; }
.bf-screen:focus { outline: none; }
.bf-screen [tabindex="-1"]:focus { outline: none; }

/* Inicio */
.bf-intro__title { margin-top: 22px; max-width: 12.5em; text-wrap: pretty; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.bf-intro__lead { margin-top: 28px; max-width: 46ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--text-on-ink-2); }
.bf-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.bf-meta li {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line-on-ink);
  font-size: .88rem; color: var(--text-on-ink-2);
}
.bf-meta li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
/* El cierre del titular va en naranja, como en el resto de los héroes, y
   "dónde empezar." queda junto (nbsp): nunca deja "empezar." sola abajo. */
.bf-intro__title em { font-style: normal; color: var(--orange); }
/* Si esta pestaña ya tiene respuestas: cuánto lleva, seguir o volver a empezar. */
.bf-saved { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: .88rem; color: var(--text-on-ink-2); }
.bf-saved[hidden] { display: none; }
.bf-saved b { font-weight: 500; color: var(--text-on-ink); }
.bf-saved__bars { flex: none; display: grid; grid-template-columns: repeat(5, 14px); gap: 3px; }
.bf-saved__bars i { height: 3px; border-radius: 2px; background: rgb(var(--fg-rgb) / .16); }
.bf-saved__bars i.is-on { background: var(--orange); }
.bf-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 38px; }
.bf-saved:not([hidden]) + .bf-go { margin-top: 20px; }
.bf-start[hidden], .bf-reset[hidden] { display: none; }   /* .btn trae display: inline-flex y le ganaría al atributo */
.bf-reset {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 10px; margin-inline: -10px;
  font-size: .95rem; color: var(--text-on-ink-2); cursor: pointer;
  transition: color .2s var(--ease-ui);
}
.bf-reset svg { width: 15px; height: 15px; transition: transform .5s var(--ease-enter); }
.bf-reset:hover { color: var(--text-on-ink); }
.bf-reset:hover svg { transform: rotate(-200deg); }
.bf-reset:active svg { transform: rotate(-260deg); transition-duration: .2s; }
.bf-reset:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.bf-note { margin-top: 20px; font-size: .88rem; color: var(--text-on-ink-2); max-width: 52ch; }

/* Barra superior: atrás + progreso */
.bf-top { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(30px, 5vh, 52px); }
.bf-back {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px;
  border-radius: 999px; border: 1px solid var(--line-on-ink);
  font-size: .9rem; color: var(--text-on-ink-2);
  transition: color .2s var(--ease-ui), border-color .2s var(--ease-ui), transform .16s var(--ease-snap);
}
.bf-back:hover { color: var(--text-on-ink); border-color: rgb(var(--fg-rgb) / .34); }
.bf-back:active { transform: scale(.97); }
.bf-progress { flex: 1; max-width: 300px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.bf-progress i { height: 3px; border-radius: 2px; background: rgb(var(--fg-rgb) / .12); transition: background-color .4s var(--ease-ui); }
.bf-progress i.is-done { background: rgb(var(--orange-rgb) / .5); }
.bf-progress i.is-now { background: var(--orange); }
.bf-count { font-size: .85rem; color: var(--text-on-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Pregunta */
.bf-q__title { margin-top: 14px; max-width: 19ch; text-wrap: pretty; font-size: clamp(1.8rem, 3.1vw, 2.65rem); line-height: 1.1; letter-spacing: -0.02em; }
.bf-q__help { margin-top: 14px; max-width: 50ch; color: var(--text-on-ink-2); }
.bf-opts { display: grid; gap: 10px; margin-top: clamp(28px, 4.5vh, 44px); max-width: 680px; }
.bf-opt {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 16px;
  min-height: 60px; padding: 15px 20px; border-radius: 14px;
  border: 1px solid rgb(var(--fg-rgb) / .16); cursor: pointer;
  transition: border-color .2s var(--ease-ui), background-color .2s var(--ease-ui), transform .16s var(--ease-snap);
}
.bf-opt:hover { border-color: rgb(var(--fg-rgb) / .36); background: rgb(var(--fg-rgb) / .03); }
.bf-opt:active { transform: scale(.993); }
.bf-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bf-opt__dot {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgb(var(--fg-rgb) / .45);
  transition: background-color .2s var(--ease-ui), border-color .2s var(--ease-ui);
}
.bf-opt__dot::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .22s var(--ease-snap); }
.bf-opt__text { font-size: clamp(1rem, 1.15vw, 1.07rem); line-height: 1.42; color: var(--text-on-ink); }
.bf-opt.is-checked { border-color: var(--orange); background: rgb(var(--orange-rgb) / .07); }
.bf-opt.is-checked .bf-opt__dot { background: var(--orange); border-color: var(--orange); }
.bf-opt.is-checked .bf-opt__dot::after { transform: scale(1); }
.bf-opt:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }
.bf-opt.is-focus { outline: 2px solid var(--orange); outline-offset: 3px; }
.bf-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 28px; }
.bf-next[disabled] {
  background: transparent; border-color: var(--line-on-ink); color: var(--text-on-ink-2);
  pointer-events: none;
}
.bf-hint { font-size: .82rem; color: var(--text-on-ink-2); }
@media (hover: none) { .bf-hint { display: none; } }

/* Resultado */
.bf-res__title { margin-top: 14px; max-width: 21ch; text-wrap: pretty; font-size: clamp(1.95rem, 3.4vw, 2.95rem); line-height: 1.08; letter-spacing: -0.02em; }
.bf-res__sub { margin-top: 14px; max-width: 54ch; color: var(--text-on-ink-2); font-size: var(--fs-lead); line-height: 1.55; }
.bf-routes { display: grid; gap: 16px; margin-top: clamp(32px, 5vh, 52px); }
@media (min-width: 900px) { .bf-routes { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); } }
.bf-route {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(24px, 3vw, 42px); border-radius: var(--r);
  background: var(--ink-2); border: 1px solid var(--line-on-ink);
}
.bf-route--1 { border-color: rgb(var(--orange-rgb) / .6); background: linear-gradient(180deg, rgb(var(--orange-rgb) / .08), rgb(var(--orange-rgb) / 0) 60%), var(--ink-2); }
.bf-route__k { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-ink-2); }
.bf-route--1 .bf-route__k { color: var(--orange); }
.bf-route__name { margin-top: 18px; font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.03em; }
.bf-route__title { margin-top: 10px; font-size: 1.08rem; line-height: 1.4; color: var(--text-on-ink); max-width: 34ch; }
.bf-route__why { margin-top: 16px; max-width: 48ch; color: var(--text-on-ink-2); text-wrap: pretty; }
.bf-route__why b { font-weight: 400; color: var(--text-on-ink); }
.bf-route__progs { margin-top: 20px; }
.bf-route__progs p { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-ink-2); }
.bf-route__progs ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bf-route__progs a {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgb(var(--fg-rgb) / .22); font-size: .9rem;
  transition: border-color .2s var(--ease-ui), color .2s var(--ease-ui);
}
.bf-route__progs a:hover { border-color: var(--orange); color: var(--orange); }
/* Ficha corta de cada ruta, para que el resultado diga qué es cada forma de
   trabajar sin tener que salir a verla. (El hub ya no la lleva: allí los
   detalles viven en la página de cada solución.) */
.bf-route__spec { width: 100%; margin-top: 22px; border-top: 1px solid var(--line-on-ink); }
.bf-route__spec > div {
  display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line-on-ink);
  font-size: .9rem; line-height: 1.45;
}
.bf-route__spec dt { color: var(--text-on-ink-2); }
.bf-route__spec dd { margin: 0; color: var(--text-on-ink); text-wrap: pretty; }
.bf-route__go { margin-top: auto; padding-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.bf-ana {
  display: grid; gap: 18px 40px; margin-top: 16px;
  padding: clamp(24px, 3vw, 42px); border-radius: var(--r);
  border: 1px dashed rgb(var(--fg-rgb) / .22);
}
@media (min-width: 900px) { .bf-ana { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } }
.bf-ana.is-strong { border: 1px solid var(--orange); background: rgb(var(--orange-rgb) / .05); }
.bf-ana__time { display: flex; align-items: baseline; gap: 8px; }
.bf-ana__time b { font-weight: 200; font-size: clamp(3.4rem, 5vw, 4.6rem); line-height: .8; letter-spacing: -0.05em; }
.bf-ana__time span { font-size: 1.15rem; font-weight: 300; }
.bf-ana__k { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.bf-ana__name { margin-top: 8px; font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.15; }
.bf-ana__text { margin-top: 8px; max-width: 58ch; color: var(--text-on-ink-2); }
.bf-recap { margin-top: clamp(40px, 7vh, 72px); }
.bf-recap__h { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-ink-2); font-weight: 500; }
.bf-recap ol { margin-top: 14px; border-top: 1px solid var(--line-on-ink); }
.bf-recap li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line-on-ink);
}
@media (min-width: 800px) { .bf-recap li { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) auto; } }
.bf-recap__q { font-size: .9rem; color: var(--text-on-ink-2); }
.bf-recap__a { font-size: .98rem; color: var(--text-on-ink); grid-column: 1; }
@media (min-width: 800px) { .bf-recap__a { grid-column: auto; } }
.bf-recap__edit { grid-row: 1 / span 2; grid-column: 2; }
@media (min-width: 800px) { .bf-recap__edit { grid-row: auto; grid-column: auto; } }
.bf-recap__edit button {
  height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-on-ink);
  font-size: .86rem; color: var(--text-on-ink-2); transition: color .2s var(--ease-ui), border-color .2s var(--ease-ui);
}
.bf-recap__edit button:hover { color: var(--text-on-ink); border-color: rgb(var(--fg-rgb) / .34); }
.bf-res__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.bf-res__note { font-size: .88rem; color: var(--text-on-ink-2); }
.bf-noscript { margin-top: 28px; padding: 20px 24px; border-radius: 14px; border: 1px solid var(--line-on-ink); color: var(--text-on-ink-2); max-width: 60ch; }
.bf-noscript a { color: var(--text-on-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Movimiento reducido ----------
   main.css acorta todas las animaciones a 0,001 s; las que se repiten
   (los pulsos del prisma, la flecha de la portada) se apagan del todo para
   que no queden parpadeando ni con un trazo suelto a mitad de camino. */
@media (prefers-reduced-motion: reduce) {
  .prism__pulse { display: none; }
  .sol-hero__cue::after { animation: none; }
}