/* ================================================================
   CAMINO VIVO · la guía animada del pedido
   Componente compartido por Ensutex (#proceso), ModoFan
   (#como-funciona) y REBXN (la sección del proceso).

   Reglas del componente:
   · Sin JS el marcado se lee solo: una lista de 5 estaciones con su
     duda y su respuesta. Todo lo animado cuelga de `html.cv-listo`.
   · Escritorio: la sección se ancla y la pista corre en horizontal.
   · Celular: estaciones apiladas, el trazo baja y Asu viaja pegajosa.
   · Solo se mueve transform, opacity y stroke-dashoffset.
   · Los colores los pone cada marca en [data-cv-marca="..."].
   ================================================================ */

[data-cv] {
  --cv-n: 5;
  --cv-alto: 420vh;
  --cv-techo: 5rem;
  --cv-asu: 72px;
  --cv-ease: cubic-bezier(.22, 1, .36, 1);
  --cv-ease-resorte: cubic-bezier(.34, 1.35, .64, 1);
  --cv-chip: 220ms;
  --cv-respuesta: 350ms;
  --cv-texto: 1rem;
  --cv-etiqueta: .78rem;
  --cv-radio: 18px;
  --cv-fondo: transparent;
  --cv-tinta: #09090b;
  --cv-apagado: #4d5159;
  --cv-linea: rgba(9, 9, 11, .14);
  /* Respaldo neutro del acento: cada marca declara el suyo más abajo.
     Antes era #0ea5e9 (azul cielo), que la paleta ya no admite. */
  --cv-acento: #e20613;
  --cv-acento-2: #e20613;
  --cv-trazo: rgba(9, 9, 11, .2);
  --cv-nodo: #ffffff;
  --cv-chip-fondo: rgba(9, 9, 11, .04);
  --cv-globo-fondo: #ffffff;
  --cv-globo-tinta: #18181b;
  --cv-sombra: 0 18px 40px rgba(9, 9, 11, .16);
  /* La escena en escritorio no queda en blanco plano: lleva su propio
     fondo claro con una textura muy suave (dos brillos de marca muy
     tenues y una retícula fina). Cada marca puede cambiar el tono y la
     retícula; ModoFan y REBXN dejan pasar su fondo oscuro. */
  --cv-escena-fondo: #f7f8fc;
  --cv-trama: rgba(9, 9, 11, .04);
  --cv-textura:
    radial-gradient(75rem 42rem at 8% -12%, color-mix(in srgb, var(--cv-acento) 14%, transparent), transparent 68%),
    radial-gradient(60rem 38rem at 102% 112%, color-mix(in srgb, var(--cv-acento-2) 10%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, var(--cv-trama) 0 1px, transparent 1px 4.5rem),
    repeating-linear-gradient(90deg, var(--cv-trama) 0 1px, transparent 1px 4.5rem);
  /* El marcador de dudas vive dentro de una píldora oscura en celular:
     ahí el gris de marca no se lee. Estos dos colores son los de la
     píldora y se eligen para pasar el mínimo de contraste sobre ella. */
  --cv-contador-pildora: #cfd2d8;
  --cv-contador-numero: var(--cv-acento-2);
}

/* --- Cada marca pone sus colores --------------------------------- */
[data-cv-marca="ensutex"] {
  --cv-tinta: #09090b;
  --cv-apagado: #4d5159;
  --cv-linea: rgba(9, 9, 11, .14);
  /* El acento del camino de Ensutex es --ens-sky, que ahora vale #E20613
     (rojo de marca, ver premium-video.css). El respaldo también deja el
     azul cielo: si el token faltara, el trazo caía en #0ea5e9. */
  --cv-acento: var(--ens-sky, #e20613);
  --cv-acento-2: var(--ens-red, #e20613);
  --cv-trazo: rgba(9, 9, 11, .22);
  --cv-nodo: #ffffff;
  --cv-chip-fondo: rgba(255, 255, 255, .8);
  --cv-globo-fondo: #09090b;
  --cv-globo-tinta: #ffffff;
  --cv-sombra: 0 20px 42px rgba(9, 9, 11, .18);
  /* Sobre la píldora negra el rojo de marca quedaba en 4,0:1, justo bajo
     el mínimo: se aclara el número, que es lo único que cambia. */
  --cv-contador-numero: #ff3b47;
}

[data-cv-marca="modofan"] {
  --cv-tinta: var(--mf-text, #F5F2FF);
  --cv-apagado: var(--mf-muted, rgba(245, 242, 255, .74));
  --cv-linea: var(--mf-line, rgba(245, 242, 255, .12));
  --cv-acento: var(--mf-accent, #8B5CFF);
  --cv-acento-2: var(--mf-turquoise, #18bdd5);
  /* El morado de marca en la LETRA CHICA sobre el oscuro de la escena da 4,48:1
     en el cuerpo y 4,20:1 en el globo — bajo el mínimo AA de 4,5:1 para letra
     normal (ambas etiquetas son de 12,48 y 14 px, mayúsculas). Se aclara solo la
     etiqueta al morado claro de la propia paleta (#9D76FF, el mismo que ya usa
     --cv-trazo): 5,71:1 y 5,35:1. El acento de marca no se toca donde es gráfico
     —trazos, nodos, filetes— y sigue siendo #8B5CFF. Es el mismo remedio que
     este archivo ya aplicó al contador de Ensutex (líneas 75-77) y al nombre de
     Asu en el globo (líneas 201-204). */
  --cv-etiqueta-tinta: #9D76FF;
  --cv-trazo: rgba(157, 118, 255, .38);
  --cv-nodo: var(--mf-surface, #15102A);
  --cv-chip-fondo: rgba(139, 92, 255, .14);
  --cv-globo-fondo: var(--mf-surface-2, #1C1535);
  --cv-globo-tinta: var(--mf-text, #F5F2FF);
  --cv-sombra: 0 22px 48px rgba(0, 0, 0, .46);
  /* La escena ya es oscura: se deja pasar el fondo de la sección y solo
     se le suma la textura de la marca. La tarjeta NO usa --cv-fondo: tiene
     su propio degradado de marca (ver «fondo de tarjeta propio» más abajo),
     que es donde se resolvió el contraste. */
  --cv-escena-fondo: transparent;
  --cv-trama: rgba(245, 242, 255, .05);
}

[data-cv-marca="rebxn"] {
  --cv-tinta: var(--rx-text, #F2F2F2);
  --cv-apagado: var(--rx-muted, rgba(242, 242, 242, .72));
  --cv-linea: var(--rx-line, rgba(255, 255, 255, .12));
  --cv-acento: var(--rx-neon, #FF2BD6);
  --cv-acento-2: var(--rx-gold, #D4AF37);
  --cv-trazo: rgba(255, 43, 214, .4);
  --cv-nodo: var(--rx-bg, #050506);
  --cv-chip-fondo: rgba(255, 43, 214, .12);
  --cv-globo-fondo: var(--rx-surface-2, #15151B);
  --cv-globo-tinta: var(--rx-text, #F2F2F2);
  --cv-sombra: 0 22px 48px rgba(0, 0, 0, .5);
  --cv-escena-fondo: transparent;
  --cv-trama: rgba(255, 255, 255, .05);
}

/* --- 1 · Marco común -------------------------------------------- */
[data-cv] .cv__lienzo { position: relative; }
[data-cv] .cv__escena { position: relative; }
[data-cv] .cv__pista { position: relative; }
[data-cv] .cv__trazo,
[data-cv] .cv__asu-host { display: none; }

[data-cv] .cv__estaciones {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cv-estacion;
}

[data-cv] .cv-estacion { position: relative; min-width: 0; }

[data-cv] .cv-estacion__cuerpo {
  position: relative;
  display: grid;
  gap: .55rem;
  padding: 1.35rem 1.25rem 1.45rem;
  border: 1px solid var(--cv-linea);
  border-radius: var(--cv-radio);
  background: var(--cv-fondo);
}

[data-cv] .cv-estacion__paso {
  margin: 0;
  /* La etiqueta chica puede necesitar un tono más claro que el acento de marca
     para pasar AA sobre el fondo de su propia escena. Cada marca que lo necesite
     declara --cv-etiqueta-tinta; donde no, esto vale exactamente lo de antes. */
  color: var(--cv-etiqueta-tinta, var(--cv-acento));
  font-size: var(--cv-etiqueta);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* El tamaño del título lo pone cada marca (Ensutex abajo; ModoFan y
   REBXN conservan su .b-h3): acá solo se ordena el color y el aire. */
[data-cv] .cv-estacion__titulo {
  margin: 0;
  color: var(--cv-tinta);
  line-height: 1.25;
}

[data-cv] .cv-estacion__texto {
  margin: 0;
  color: var(--cv-apagado);
  line-height: 1.55;
}

[data-cv] .cv-estacion__chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  max-width: 100%;
  margin: .35rem 0 0;
  padding: .4rem .8rem;
  border: 1px dashed var(--cv-linea);
  border-radius: 999px;
  background: var(--cv-chip-fondo);
  color: var(--cv-tinta);
  font-size: var(--cv-texto);
  line-height: 1.35;
}

[data-cv] .cv-estacion__check {
  flex: 0 0 auto;
  color: var(--cv-acento-2);
  font-size: .875rem;
  font-weight: 900;
}

[data-cv] .cv-estacion__globo {
  display: grid;
  gap: .2rem;
  margin: 0;
  padding: .8rem 1rem;
  border-left: 3px solid var(--cv-acento);
  border-radius: 4px 14px 14px 4px;
  background: var(--cv-globo-fondo);
  color: var(--cv-globo-tinta);
  font-size: var(--cv-texto);
  line-height: 1.5;
}

/* El globo de Asu es oscuro (#09090b): el rojo de marca en 12 px da 4,04:1 y no
   pasa AA. Sobre oscuro, el rojo claro de la paleta (#ff3b47). Solo Ensutex: las
   otras marcas tienen su propio acento. */
[data-cv-marca="ensutex"] .cv-estacion__globo .cv-estacion__quien { color: #ff3b47; }

[data-cv] .cv-estacion__quien {
  color: var(--cv-etiqueta-tinta, var(--cv-acento));
  font-size: var(--cv-etiqueta);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* El nodo y el CTA final van en la misma fila: Asu llega al lado del
   botón y nunca lo tapa (el hueco es mayor que su ancho). */
[data-cv] .cv-estacion__cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3rem;
  margin-top: .5rem;
}

[data-cv] .ens-process__cta.cv-estacion__cierre,
[data-cv] .b-actions.cv-estacion__cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 3rem;
  margin-top: .6rem;
}

[data-cv] .cv-estacion__nodo {
  display: none;
  width: 16px;
  height: 16px;
  border: 3px solid var(--cv-acento);
  border-radius: 50%;
  background: var(--cv-nodo);
  box-shadow: 0 0 0 6px var(--cv-chip-fondo);
}

[data-cv] .cv-estacion__cta { min-height: 48px; }

[data-cv] .cv__contador {
  margin: 1.5rem 0 0;
  color: var(--cv-apagado);
  font-size: var(--cv-etiqueta);
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

[data-cv] .cv__contador b { color: var(--cv-acento-2); font-weight: 900; }

/* --- 2 · Con JS: aparece el trazo, Asu y el ritmo --------------- */
html.cv-listo [data-cv] .cv__trazo { display: block; }
html.cv-listo [data-cv] .cv__asu-host { display: block; }
html.cv-listo [data-cv] .cv-estacion__nodo { display: grid; place-items: center; }

html.cv-listo [data-cv] .cv-estacion__globo,
html.cv-listo [data-cv] .cv-estacion__chip {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

html.cv-listo [data-cv] .cv-estacion__check,
html.cv-listo [data-cv] .cv-estacion__duda {
  transition: opacity var(--cv-chip) var(--cv-ease), color var(--cv-chip) var(--cv-ease);
}

html.cv-listo [data-cv] .cv-estacion__check { opacity: 0; }
html.cv-listo [data-cv] .cv-estacion__cuerpo { transition: opacity 320ms var(--cv-ease); }
html.cv-listo [data-cv] .cv-estacion:not(.cv-estacion--llego) .cv-estacion__titulo,
html.cv-listo [data-cv] .cv-estacion:not(.cv-estacion--llego) .cv-estacion__texto { opacity: .45; transition: opacity 320ms var(--cv-ease); }

/* Llegó Asu: aparece la duda (220 ms) */
html.cv-listo [data-cv] .cv-estacion--llego .cv-estacion__chip {
  opacity: 1;
  transform: none;
  transition: opacity var(--cv-chip) var(--cv-ease), transform var(--cv-chip) var(--cv-ease);
}

/* 350 ms después la respuesta la reemplaza y la duda queda tachada */
html.cv-listo [data-cv] .cv-estacion--resuelta .cv-estacion__globo {
  opacity: 1;
  transform: none;
  transition: opacity var(--cv-chip) var(--cv-ease) var(--cv-respuesta),
    transform var(--cv-chip) var(--cv-ease) var(--cv-respuesta);
}

html.cv-listo [data-cv] .cv-estacion--resuelta .cv-estacion__chip { opacity: .45; }

html.cv-listo [data-cv] .cv-estacion--resuelta .cv-estacion__duda {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

html.cv-listo [data-cv] .cv-estacion--resuelta .cv-estacion__check {
  opacity: 1;
  transition-delay: var(--cv-respuesta);
}

html.cv-listo [data-cv] .cv-estacion--resuelta .cv-estacion__nodo {
  background: var(--cv-acento);
  transition: background-color var(--cv-chip) var(--cv-ease) var(--cv-respuesta);
}

/* El trazo y Asu */
[data-cv] .cv__trazo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--cv-trazo);
  pointer-events: none;
}

[data-cv] .cv__camino {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El camino que falta: punteado y tenue, por debajo del encendido. En
   celular no se pinta: ahí el trazo queda como estaba. */
[data-cv] .cv__camino--falta { display: none; }

[data-cv] .cv__asu-host {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

[data-cv] .cv__asu {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--cv-asu);
  height: var(--cv-asu);
  will-change: transform;
}

[data-cv] .cv__asu-cuerpo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

[data-cv] .cv__asu-cuerpo svg { width: 100%; height: 100%; display: block; }

[data-cv] .cv-estacion__cta { position: relative; z-index: 2; }

html.cv-listo [data-cv] .cv__asu--quieta .cv__asu-cuerpo {
  animation: cv-respira 2.4s var(--cv-ease) infinite;
}

@keyframes cv-respira {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* --- 3 · Escritorio: la sección se ancla y la pista corre ------- */
@media (min-width: 1024px) {
  [data-cv] {
    /* Una estación cada tercio de pantalla: entran tres a la vez. */
    --cv-paso: 33.3333vw;
    --cv-asu: 64px;
    --cv-banda-arriba: 21.5rem;
    --cv-banda-abajo: 2.5rem;
  }

  /* La banda de estaciones se sale del contenedor de la sección para
     llenar el ancho de la pantalla. El recorte con margen evita que ese
     salto agregue scroll horizontal: se recorta el sobrante, nada más.
     (`overflow: clip` no crea caja de scroll, así que el anclaje de la
     escena sigue funcionando.) */
  html.cv-listo [data-cv] {
    overflow: clip;
    overflow-clip-margin: 60vw;
  }

  html.cv-listo [data-cv] .cv__lienzo {
    height: var(--cv-alto);
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  html.cv-listo [data-cv] .cv__escena {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    padding-top: var(--cv-techo);
    background-color: var(--cv-escena-fondo);
    background-image: var(--cv-textura);
  }

  /* El encabezado que ya existía (eyebrow, título y bajada) queda fijo
     arriba a la izquierda mientras la pista avanza. Vive fuera de la
     escena, así que se ancla contra el mismo contenedor que ella. */
  html.cv-listo [data-cv] [data-cv-cabeza] {
    position: sticky;
    top: var(--cv-techo);
    z-index: 6;
    max-width: 46rem;
    margin-inline: 0;
    text-align: left;
  }
  html.cv-listo [data-cv] [data-cv-cabeza] > p { margin-inline: 0; }

  html.cv-listo [data-cv] .cv__pista {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: calc(var(--cv-n) * var(--cv-paso));
    height: 100%;
    will-change: transform;
  }

  html.cv-listo [data-cv] .cv__estaciones {
    display: flex;
    width: 100%;
    gap: 0;
  }

  html.cv-listo [data-cv] .cv-estacion {
    display: grid;
    flex: 0 0 var(--cv-paso);
    align-content: center;
    /* La banda arranca debajo del encabezado anclado y deja el aire de
       abajo: las tarjetas quedan en el medio, no pegadas al techo. */
    padding-block: var(--cv-banda-arriba) var(--cv-banda-abajo);
    padding-inline: clamp(1rem, 1.9vw, 2rem);
  }

  html.cv-listo [data-cv] .cv-estacion__cuerpo {
    width: min(26.25rem, 100%);
    margin-inline: auto;
    transform: translate3d(0, var(--cv-desfase, 0px), 0);
  }

  /* Las estaciones de los costados se ven, pero más tenues: se apaga la
     tarjeta entera y no se vuelve a apagar el texto por dentro (si no,
     las dos opacidades se multiplican y el texto no se lee). */
  html.cv-listo [data-cv] .cv-estacion:not(.cv-estacion--foco) .cv-estacion__cuerpo { opacity: .5; }
  html.cv-listo [data-cv] .cv-estacion:not(.cv-estacion--foco) .cv-estacion__titulo,
  html.cv-listo [data-cv] .cv-estacion:not(.cv-estacion--foco) .cv-estacion__texto { opacity: 1; }

  /* El nodo marca dónde cruza el trazo, y Asu viaja sobre él: en
     escritorio el nodo va lo bastante alto como para que el avatar (64px)
     no le pase por encima al rótulo de la tarjeta. */
  html.cv-listo [data-cv] .cv-estacion__nodo { position: absolute; top: -1.5rem; left: 50%; margin-left: -8px; }
  /* En el cierre el nodo sube al borde de la tarjeta, como en las demás:
     así el trazo no se hunde en la última tarjeta —lo que lo obligaba a
     cruzar por encima de la anterior al bajar— y Asu termina arriba del
     cierre, no al costado del botón (ese es el diseño de celular). */
  html.cv-listo [data-cv] .cv-estacion--cierre .cv-estacion__nodo { position: absolute; top: -1.5rem; left: 50%; margin: 0 0 0 -8px; }
  html.cv-listo [data-cv] .cv-estacion--cierre .cv-estacion__cuerpo { width: min(26.25rem, 100%); }

  /* El marcador de dudas se va al extremo derecho: arriba a la izquierda
     ya vive el encabezado. */
  html.cv-listo [data-cv] .cv__contador {
    position: absolute;
    top: calc(var(--cv-techo) + .35rem);
    right: clamp(1.5rem, 4vw, 4rem);
    left: auto;
    z-index: 5;
    margin: 0;
    transform: none;
    text-align: right;
  }

  /* El trazo: la parte ya recorrida, encendida en el acento de la marca
     y con un brillo suave; la que falta, punteada y tenue, por debajo. */
  html.cv-listo [data-cv] .cv__camino--falta {
    display: block;
    stroke: var(--cv-trazo);
    stroke-dasharray: .5 11;
  }
  html.cv-listo [data-cv] .cv__camino:not(.cv__camino--falta) {
    stroke: var(--cv-acento);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cv-acento) 60%, transparent));
  }

  /* Asu viaja dentro de la pista: su host acompaña el recorrido. */
  html.cv-listo [data-cv] .cv__asu-host { position: absolute; inset: 0; }
}

/* --- 4 · Celular: estaciones apiladas, Asu pegajosa ------------- */
@media (max-width: 1023px) {
  html.cv-listo [data-cv] .cv__escena { padding-top: 0; }

  html.cv-listo [data-cv] .cv__pista { display: block; width: 100%; }

  /* El carril del trazo (3,25rem) deja a Asu entera dentro de la
     pantalla: su centro cae a 36px del borde y mide 56px. */
  html.cv-listo [data-cv] .cv__estaciones {
    display: grid;
    gap: clamp(1.5rem, 6vw, 2.5rem);
    padding-left: 3.25rem;
  }

  html.cv-listo [data-cv] .cv-estacion__cuerpo { width: 100%; }

  html.cv-listo [data-cv] .cv-estacion__nodo { position: absolute; top: 1.5rem; left: -1.5rem; }

  html.cv-listo [data-cv] .cv__asu-host {
    position: sticky;
    top: 45vh;
    z-index: 4;
    height: 0;
    width: 100%;
  }

  html.cv-listo [data-cv] .cv__contador {
    position: sticky;
    top: .75rem;
    z-index: 5;
    margin: 0 0 .75rem;
    padding: .4rem .8rem;
    border: 1px solid var(--cv-linea);
    border-radius: 999px;
    background: var(--cv-globo-fondo);
    width: fit-content;
    margin-inline: auto;
  }

  /* Dentro de la píldora el texto va claro: el gris de la sección clara
     no se lee sobre el fondo oscuro de la píldora. */
  html.cv-listo [data-cv] .cv__contador { color: var(--cv-contador-pildora); }
  html.cv-listo [data-cv] .cv__contador b { color: var(--cv-contador-numero); }

  /* El cierre en celular: el nodo va arriba del botón (no al costado,
     que no cabe), así el trazo termina justo sobre el CTA y Asu queda
     pegada a él y sin taparlo. */
  html.cv-listo [data-cv] .cv-estacion__cierre {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
  html.cv-listo [data-cv] .cv-estacion--cierre .cv-estacion__nodo {
    position: static;
    margin: 0;
  }
  [data-cv] { --cv-asu: 56px; }
}

/* --- 5 · Movimiento reducido: todo quieto y ya resuelto --------- */
@media (prefers-reduced-motion: reduce) {
  html.cv-listo [data-cv] .cv__lienzo { height: auto !important; width: auto !important; margin-left: 0 !important; }
  html.cv-listo [data-cv] .cv__escena { position: static !important; height: auto !important; overflow: visible !important; }
  html.cv-listo [data-cv] .cv__pista { position: relative !important; transform: none !important; width: 100% !important; display: block !important; }
  html.cv-listo [data-cv] .cv__estaciones { display: grid !important; width: 100% !important; gap: clamp(1.5rem, 5vw, 2.5rem) !important; padding-left: 3.25rem !important; }
  html.cv-listo [data-cv] .cv-estacion { display: block !important; flex: none !important; padding: 0 !important; }
  html.cv-listo [data-cv] .cv-estacion__cuerpo { width: 100% !important; transform: none !important; }
  html.cv-listo [data-cv] .cv-estacion__nodo { position: absolute !important; top: 1.5rem !important; left: -1.5rem !important; margin: 0 !important; }
  html.cv-listo [data-cv] .cv__asu-host { position: absolute !important; inset: 0 !important; }
  html.cv-listo [data-cv] .cv__asu--quieta .cv__asu-cuerpo { animation: none !important; }
  html.cv-listo [data-cv] .cv__trazo { display: block; }
  html.cv-listo [data-cv] .cv-estacion__globo,
  html.cv-listo [data-cv] .cv-estacion__chip { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.cv-listo [data-cv] .cv-estacion__chip { opacity: .45 !important; }
  html.cv-listo [data-cv] .cv-estacion__duda { text-decoration: line-through; }
  html.cv-listo [data-cv] .cv-estacion__check { opacity: 1 !important; }
  html.cv-listo [data-cv] .cv-estacion__titulo,
  html.cv-listo [data-cv] .cv-estacion__texto { opacity: 1 !important; }
  /* Sin recorrido no hay estación enfocada: ninguna tarjeta se apaga ni
     el encabezado se queda pegado. */
  html.cv-listo [data-cv] .cv-estacion__cuerpo { opacity: 1 !important; }
  html.cv-listo [data-cv] [data-cv-cabeza] { position: static !important; }
  html.cv-listo [data-cv] .cv-estacion--cierre .cv-estacion__nodo { position: static !important; }

  html.cv-listo [data-cv] .cv__contador {
    position: static !important;
    margin: 1.25rem auto 0 !important;
    transform: none !important;
  }
}

/* --- 6 · Ajustes de marca --------------------------------------- */
/* Ensutex: la sección ya es clara; el bloque respira como el resto.
   Los tamaños son los que ya tenía la sección (1rem el título, .9rem
   el párrafo): no se agranda nada de lo que ya estaba publicado. */
[data-cv-marca="ensutex"] .cv-estacion__cuerpo {
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 14px 34px rgba(9, 9, 11, .07);
}
[data-cv-marca="ensutex"] .cv-estacion__titulo {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
[data-cv-marca="ensutex"] .cv-estacion__texto { font-size: .9rem; }
[data-cv-marca="ensutex"] .cv-estacion__cta { min-height: 48px; }

/* ModoFan y REBXN: fondo de tarjeta propio de la marca.
   ModoFan tenía el degradado TRANSLÚCIDO —10% de morado arriba, y abajo solo
   medio opaco— sobre el fondo de la escena, que en esta sección lleva el
   degradado morado→turquesa de la marca. Medido sobre el píxel pintado, la
   tarjeta quedaba entre 2,59:1 (abajo) y 1,29:1 (arriba): el velo de arriba es
   casi transparente, así que la franja morada pasaba por detrás de la etiqueta y
   el texto morado se volvía del mismo color que su fondo. La etiqueta
   «Estación 0N · …» es justamente el PRIMER hijo de la tarjeta, o sea el punto
   más transparente de todos.
   Se separa entonces el color de base del velo: la base es opaca (--mf-surface)
   y el morado queda como velo encima, apagándose hacia abajo. El aspecto es el
   mismo —la tarjeta sigue teniendo su lavado morado arriba y su tono de marca
   abajo—, pero el fondo del texto ya no depende de qué pase por detrás: queda
   entre 4,93:1 arriba y 5,68:1 abajo con #9D76FF. Además se gana lo que pide la
   dirección visual de las marcas: los degradados van en fondos de escena,
   «nunca en el texto». */
[data-cv-marca="modofan"] .cv-estacion__cuerpo {
  background-color: var(--mf-surface, #15102A);
  background-image: linear-gradient(180deg, rgba(139, 92, 255, .13), rgba(139, 92, 255, 0) 72%);
}
[data-cv-marca="rebxn"] .cv-estacion__cuerpo { background: var(--rx-surface, #0E0E12); }
[data-cv-marca="rebxn"] .cv-estacion__titulo { letter-spacing: .01em; }

/* El camino entra en la sección sin tocar su encabezado ni su CTA. */
[data-cv] .cv__lienzo { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
[data-cv] .cv__respaldo { display: grid; gap: 1.25rem; margin-top: clamp(1.5rem, 4vw, 2.5rem); }

@media (max-width: 1023px) {
  [data-cv] .cv__respaldo { margin-top: 1.5rem; }
}

/* --- 7 · La onda del camino (escritorio) ------------------------ */
/* Cada estación sube o baja un poco: el trazo que las une es una
   onda, no una línea recta, y Asu la recorre de punta a punta. El
   desnivel es corto a propósito: con tres tarjetas a la vista, la que
   sube tiene que pasar por debajo del encabezado anclado. */
@media (min-width: 1024px) {
  html.cv-listo [data-cv] .cv-estacion:nth-child(1) .cv-estacion__cuerpo { --cv-desfase: -5vh; }
  html.cv-listo [data-cv] .cv-estacion:nth-child(2) .cv-estacion__cuerpo { --cv-desfase: 4vh; }
  html.cv-listo [data-cv] .cv-estacion:nth-child(3) .cv-estacion__cuerpo { --cv-desfase: -6vh; }
  html.cv-listo [data-cv] .cv-estacion:nth-child(4) .cv-estacion__cuerpo { --cv-desfase: 4vh; }
  html.cv-listo [data-cv] .cv-estacion:nth-child(5) .cv-estacion__cuerpo { --cv-desfase: -2vh; }
}

/* 25-sep (Carlitos: "pésima forma de entregar una solución"): la duda resuelta NO se
   tacha ni se apaga; queda legible con su visto, y la respuesta de Asu debajo. La
   etiqueta de Asu deja la mayúscula chica espaciada, que costaba leer. */
html.cv-listo [data-cv] .cv-estacion--resuelta .cv-estacion__chip,
html.cv-listo [data-cv] .cv-estacion__chip { opacity: 1 !important; }
html.cv-listo [data-cv] .cv-estacion__duda,
html.cv-listo [data-cv] .cv-estacion--resuelta .cv-estacion__duda { text-decoration: none !important; color: var(--cv-tinta, #09090b); }
[data-cv] .cv-estacion__quien { text-transform: none !important; letter-spacing: 0 !important; font-size: .875rem !important; font-weight: 700 !important; }
[data-cv] .cv-estacion__respuesta { line-height: 1.55; }